कैसे ui फ्लोट-लेबल केंद्र के लिए

वोट
0

मैं निम्नलिखित टेम्पलेट आ रही हैं:

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

कहाँ महत्वपूर्ण सीएसएस वर्ग हैं के रूप में:

.centered
{
    text-align: center;
}

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

जिसके परिणामस्वरूप:

यहाँ

जाहिर लेबल नहीं केंद्रित / आदानों के साथ गठबंधन कर रहे हैं। लेकिन यह कैसे मैं primeng की नाव लेबल के साथ इस लक्ष्य को हासिल करते हैं?

02/12/2019 को 23:55
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


1 जवाब

वोट
0

लेबल एक निरपेक्ष स्थिति होनी चाहिए;

उदाहरण के लिए:

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>

03/12/2019 को 01:32
का स्रोत उपयोगकर्ता

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