Hvordan sentrere ui-float-label

stemmer
0

Jeg har følgende mal:

<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>

Hvor som viktige CSS klasser er:

.centered
{
    text-align: center;
}

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

Hvilke resultater i:

skriv

Åpenbart etikettene er ikke sentrert / i flukt med inngangssignalene. Men hvordan kan jeg oppnå dette med primeng er float etiketter?

Publisert på 02/12/2019 klokken 23:55
kilden bruker
På andre språk...                            


1 svar

stemmer
0

Merkelappen bør ha en absolutt posisjon;

For eksempel:

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>

Svarte 03/12/2019 kl. 01:32
kilden bruker

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