CSS hover effects moves input field below

I finally got the PrimeVue hover effects working. I had to add a bit of CSS work to it, since the Designtokens did not all the work.

But now the hover effect of the first input field causes the input field below to move, when the border width of the first input field changes. I don’t want the input field below to move.

I don’t have this kind of problem for the textarea fields.

template:

<label for="ref_num" class="labels">Untertitel</label>
  <InputGroup>
    <IconField>
      <InputText id="eventSubtitle" v-model="eventSubtitle" placeholder="Untertitel" maxlength="255" />
      <!--InputIcon class="pi pi-exclamation-circle" v-tooltip="'Untertitel ist erforderlich'"></InputIcon-->
    </IconField>
  </InputGroup>

  <label for="ref_num" class="labels">Standort (GPS)</label>
  <InputGroup>
    <InputGroupAddon>
      <i class="pi pi-globe"></i>
    </InputGroupAddon>
    <IconField>
      <InputMask id="eventLocation" v-model="eventLocation" placeholder="Standort (GPS)" mask="99.9999, 999.9999"
        style="border-radius: 0rem 0.4rem 0.4rem 0rem;" maxlength="255" />
      <!--InputIcon class="pi pi-exclamation-circle" v-tooltip="'Standort erforderlich'"></InputIcon-->
    </IconField>
  </InputGroup>

style:

.p-inputtext {width: 100%; padding: 1rem !important; box-sizing: border-box;}
.p-inputtext:hover {border-width: 0.15rem; box-sizing: border-box;}

Solution

Layout shift is expected when any part of the layout changes size.

If you want to limit the space the layout takes you are already on the right path with box-sizing. However you did not mention the height so it does not limit the vertical. Also, no need to repeat styles that don't change:

p {
  width: 100%;
  height: 4rem;
  padding: 1rem;
  border-style: solid;
  border-color: red;
  box-sizing: border-box;
}

p:hover {
  border-width: 0.15rem;
}

<p>
  example para
</p>
<p>
  example para
</p>

This will no longer affect the layout outside the box but it will still move the inner text. Therefore it’s best practice to not change sizes on hover. If you want a border to appear, just change the color from transparent. This will keep the layout constant:

p {
  width: 100%;
  height: 4rem;
  padding: 1rem;
  box-sizing: border-box;
  border-style: solid;
  border-width: 0.15rem;
  border-color: transparent;
}

p:hover {
  border-color: red;
}

<p>
  example para
</p>
<p>
  example para
</p>

Answered By — Frox

Answer Checked By — Marilyn (FixIt Volunteer)

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0