Ultima label bug

[matic79]

I am having issues with Ultima label animation, as you can see in attached image. It happens occasionally, when form is opened in edit mode. There is no rule when this happens. I tried production mode, but still no change.
This is sample code:

Code: Select all

<div class="ui-g-12 ui-md-4">
          <span class="md-inputfield">
              <input type="text" formControlName="ZIRO_RACUN" pInputText />
              <label>Bank_account</label>
          </span>
        </div>

Any ideas?

[eddbog]

We have the similar issue as well.
It seems that it's related to the auto-complete feature of a browser.
I assume that in this case the data are automatically inserted by browser into input fields.
Ultima does not handle such cases properly, the animation that moves label above input field does not occur, so the input field is polluted with the label.

[mert.sincan]

Which PrimeNg and Ultima versions are you using? I tested this issue but, I couldn't replicate it. Can you please attach a sample .ts and html page for us to replicate?

Also, can you please try Ultima2.0 version; http://blog.primefaces.org/?p=4326

[eddbog]

For example, the following code leads to the broken label display, like this: https://drive.google.com/file/d/0B6c8-4 ... npWd3I4N00

Code: Select all

import { Component } from '@angular/core';

export class TestData {
    constructor( public data: string) {}
}

@Component({
    selector: 'test-bug',
    template: `
        <form autocomplete="off">
            <br/>
            <span class="md-inputfield">
                <input type="text" pInputText autocomplete="off" required [(ngModel)]="model.data" name="data">
                <label>Label</label>
            </span>
            <br/>
            <button type="submit" pButton label="submit"></button>
        </form>              
    `

}) export class FcBlankComponent {
    model: TestData = new TestData ('this is a test');
}

[cagatay.civici]

We're checking this now.

[mert.sincan]

I tested this issue but I didn't see a bug like in your screenshot. My test code;

Code: Select all

@Component({
    selector: 'test-bug',
    template: `
        <form autocomplete="off">
            <br/>
            <span class="md-inputfield">
                <input type="text" pInputText autocomplete="off" required [(ngModel)]="model.data" name="data">
                <label>Label</label>
            </span>
            <br/>
            <button type="submit" pButton label="submit"></button>
        </form>              
    `

}) export class FcBlankComponent {
    model: TestData = new TestData ('this is a test');
}

Code: Select all

<div class="ui-fluid">
    <div class="ui-g">
        <div class="ui-g-12">
            <div class="card card-w-title">
                <h1>Form Elements</h1>
                <div class="ui-g form-group">
                    <div class="ui-g-12 ui-md-2">
                        <label for="textarea">Text-Bug Component</label>
                    </div>
                    <div class="ui-g-12 ui-md-4">
                        <test-bug></test-bug>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Screenshot;

Which PrimeNg and Ultima version are you using? Also, did you change something in Ultima theme?

[eddbog]

We are using Ultima 2.0 and PrimeNG 2.0.0-rc2.

I've just tried to reproduce the issue within Ultima2 demo application and was't able to do it, so it seems that the issue is related to possible incompatibility among css styles we using in our application.
I'll continue investigation and will let you know the results.

[lostdalek]

Hi,
I'm able to replicate this issue on the demo page (http://www.primefaces.org/ultima-ng/#/forms) in forms and login pages.

It happen everytime you type some text in an input and use "tab" key to go to the next input.
Label will go back in it's position as soon as the cursor is moved.
Same behavior on chrome/safari/firefox (mac / latest versions)

[matic79]

Yep, @lostdalek is right, if u go on your demo page (http://www.primefaces.org/ultima-ng/#/forms) and use tab to get inside of your input, then type text and move on with tab button, label will go back down and over text, as soon as you move your mouse everything will go back to normal.

[DarthMaul]

Hi,

We replicated the issue we will check this and get back to you.