Input label animation bug

[GreenMonkeyBoy]

Hi, if I download the ultima theme, install and serve, all is working fine. But if I integrate the ultima theme on my existing cli project, the label go up if click in the input field, but go down after I click somewhere else even if I write something in the input field:



This is what I've done on my existing cli project (read on https://www.primefaces.org/ultima-ng/#/documentation):
- copied the assets folder,
- added this styles:

Code: Select all

 "styles": [
        "../node_modules/primeng/resources/primeng.min.css", 
        "../src/assets/theme/theme-indigo.css",
        "../src/assets/layout/css/layout-indigo.css",
        "styles.css"
      ],

- not added any optional script because I don't use schedule, charts, editor... for now.

Then:

Code: Select all

<div class="ui-g-12">
    <span class="md-inputfield">
        <input type="text" autocomplete="off" class="ui-inputtext ui-corner-all ui-state-default ui-widget">
        <label>Username</label>
    </span>
  </div>

@angular/animations is installed, and BrowserAnimationsModule added in app.module.ts.

It's working fine on a fresh downloaded, installed and served ultima project, so I guess I miss an import or something.

I use node 8.6.0, angular 4.2.4 and angular/cli 1.4.4 and ultima 4.3.0.
Tested on xubuntu 16.04, Chrome Version 61.0.3163.100 (Official Build) (64-bit) and Firefox 55.0.2 (64-bit).

[merve7]

You need to add pInputText directive to your input.

[GreenMonkeyBoy]

Oh god... thank you.

[cagatay.civici]

Glad to hear issue is resolved.

[EddieSe12]

Hi,

does another solution for the problem mentioned above exist?

We did implement the ultima theme on an existing CLI project, added the styles to angular-cli.json, copied the assets folder and switched the app.component.ts and *.html counterparts of the theme.

In our project we did add the pInputText directive to our input textfield and end up with the same animation bug mentioned by the creator of the ticket.

It seems, that our project does not add the proper styles for the textfield at all.

Code: Select all

<li #search class="search-item" [ngClass]="{'active-top-menu':app.activeTopbarItem === search}"
          (click)="app.onTopbarItemClick($event,search)">
                        <span class="md-inputfield">
                            <input type="text" pInputText>
                            <label>Text</label>
                            <i class="topbar-icon material-icons">search</i>
                        </span>
      </li>

Here is an image of the animation bug:



If the image is not working follow this link:
https://ibb.co/jNKNKb

Here is the message of the browser developer tool:



If the image is not working follow this link:
https://ibb.co/ft2ysw

The animation does run properly in the theme but when we copy and paste the top-bar into our project the css-styles for pInputText do not get executed.

Is it ok if I create the request by the comment under this ticket or would you like me to create a new ticket for our problem?

[EddieSe12]

Okay, nevermind. The animation was not working properly because we did not import the InputTextModule. We thought it would be auto implemented with the template.