Input label animation bug

Post Reply
GreenMonkeyBoy
Posts: 4
Joined: 27 Oct 2016, 13:24

03 Oct 2017, 16:23

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:

Image

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
Posts: 66
Joined: 12 Sep 2017, 10:44

04 Oct 2017, 07:51

You need to add pInputText directive to your input.

GreenMonkeyBoy
Posts: 4
Joined: 27 Oct 2016, 13:24

04 Oct 2017, 14:07

Oh god... thank you.

User avatar
optimus.prime
Prime
Posts: 17686
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

01 Dec 2017, 13:05

Glad to hear issue is resolved.

EddieSe12
Posts: 2
Joined: 11 Dec 2017, 11:51

11 Dec 2017, 12:30

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:

Image

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

Here is the message of the browser developer tool:

Image

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
Posts: 2
Joined: 11 Dec 2017, 11:51

11 Dec 2017, 16:36

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.

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest