Início / coding / Perguntas / 79567245
Accepted
Han Solo
Asked: 2025-04-11 01:17:56 +0800 CST

Os efeitos de foco CSS movem o campo de entrada abaixo

  • 772

Finalmente consegui fazer os efeitos de foco do PrimeVue funcionarem. Precisei adicionar um pouco de CSS, já que os Designtokens não faziam todo o trabalho.

Mas agora o efeito de foco do primeiro campo de entrada faz com que o campo de entrada abaixo se mova, quando a largura da borda do primeiro campo de entrada muda. Não quero que o campo de entrada abaixo se mova.

Não tenho esse tipo de problema para os campos textarea.

modelo:

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

estilo:

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

1 respostas

  1. Best Answer

    A mudança de layout é esperada quando qualquer parte do layout muda de tamanho.

    Se você quiser limitar o espaço que o layout ocupa, já está no caminho certo com box-sizing. No entanto, você não mencionou a altura, então ela não limita a vertical. Além disso, não há necessidade de repetir estilos que não mudam:

    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>

    Isso não afetará mais o layout externo, mas ainda moverá o texto interno. Portanto, é recomendável não alterar o tamanho ao passar o mouse. Se quiser que uma borda apareça, basta alterar a cor de transparente. Isso manterá o layout constante:

    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>

    • 0

relate perguntas