Jak do centra UI-float-label

hlasů
0

Mám následující šablony:

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

Kde jako důležité css třídy jsou:

.centered
{
    text-align: center;
}

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

Což má za následek:

zadejte

Je zřejmé, že štítky nejsou střed / vyrovnány s vstupy. Ale jak mohu dosáhnout s plovákem štítky primeng je?

Položena 02/12/2019 v 23:55
zdroj uživatelem
V jiných jazycích...                            


1 odpovědí

hlasů
0

Štítek by měl mít absolutní polohy;

Například:

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>

Odpovězeno 03/12/2019 v 01:32
zdroj uživatelem

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