Come centrare ui-float-label

voti
0

Sto avendo la seguente configurazione:

<div class=smallCard>
    <p-card class=centered>
        <p-header>
            <img width=200 height=100 src=assets/images/vendor.svg />
        </p-header>

        <p-messages></p-messages>

        <span class=ui-float-label>
            <input id=username type=text pInputText [(ngModel)]=username required>
            <label for=username>{{'Username' | translate}}</label>
        </span>

        <br>

        <span class=ui-float-label>
            <input id=password type=password pPassword [feedback]=false [(ngModel)]=password required />
            <label for=password>{{'Password' | translate}}</label>
        </span>

        <br>

        <p-checkbox name=permanent value=true label={{'Remember me' | translate}} [(ngModel)]=isPermanent>
        </p-checkbox>

        <p-footer>
            <p-button label=Login (onClick)=login()></p-button>
        </p-footer>

    </p-card>
</div>

Dove, come gli importanti classi CSS sono:

.centered
{
    text-align: center;
}

.smallCard
{
    margin-top: 20%;
    margin-left: 40%;
    margin-right: 40%;
}

Che si traduce in:

entrare

Ovviamente le etichette non sono centrati / allineate con gli ingressi. Ma come faccio a raggiungere questo obiettivo con le etichette galleggiante di primeng?

È pubblicato 02/12/2019 alle 23:55
fonte dall'utente
In altre lingue...                            


1 risposte

voti
0

L'etichetta deve avere una posizione assoluta;

Per esempio:

var element = document.getElementById("label");

function handleFocus() {
  element.classList.add("active");
}

function handleBlur() {
  var myInput = document.getElementById("input");
  if (!myInput.value) {
      element.classList.remove("active");
  }
}
.wrapper {
  position: relative;
}

label {
  position: absolute;
  display: flex;
  align-items: center;
  height: 50px;
  left: 10px;
}

.active {
  height: 20px;
}

input {
  padding: 5px;
  widt: 100px;
  height: 40px;
  border: 2px solid purple;
  border-radius: 4px;
}
<div class='wrapper'>
  <label id='label'>blabla</label>
  <input id='input'
        onFocus="handleFocus();"
        onBlur="handleBlur();"
  />
</div>

Risposto il 03/12/2019 a 01:32
fonte dall'utente

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more