Can't get p-float-label to work

Post Reply
DougB
Posts: 9
Joined: 07 Jun 2021, 19:09

08 Jun 2021, 01:01

I've just purchase Ultima (3.1.1) and I tried to add 'p-float-label' to the FormLayoutDemo.vu, but it doesn't work, however it does work in FloatLabelDemo.vue.

This is what I added to the first input:

<div class="p-field p-float-label">
<label for="name1">Name</label>
<InputText id="name1" type="text" />
</div>

Is there something I'm missing here?

tugce.kucukoglu
Posts: 124
Joined: 23 Oct 2020, 09:28

08 Jun 2021, 09:10

It's completely about designing CSS. 'label' tag should come after components. This works:

Code: Select all

<div class="p-field p-float-label">
      <InputText id="name1" type="text" />
      <label for="name1">Name</label>
</div>

DougB
Posts: 9
Joined: 07 Jun 2021, 19:09

08 Jun 2021, 16:53

Thanks, that did the trick :)

DougB
Posts: 9
Joined: 07 Jun 2021, 19:09

08 Jun 2021, 17:55

While the reordering worked, I noticed a related issue.

In Login.vue, when you enter text into either the Email or Password fields, and then change focus, the label is still seen in the background underneath the text.

Image

DougB
Posts: 9
Joined: 07 Jun 2021, 19:09

08 Jun 2021, 23:40

Turns out this is a bug in the PrimeVue code and has been submitted as such.

tugce.kucukoglu
Posts: 124
Joined: 23 Oct 2020, 09:28

09 Jun 2021, 08:55

Please add InputText v-model props. For example:

Code: Select all

<div class="p-inputgroup">
    <span class="p-inputgroup-addon">
          <i class="pi pi-envelope"></i>
    </span>
    <span class="p-float-label">
          <InputText type="text" id="email" v-model="value1" />
          <label for="email">Email</label>
    </span>
</div>

Post Reply

Return to “Ultima - PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest