0
497
Visualizações¿Cómo alinear dos cuadros de entrada de formulario entre sí?
Tengo un modal con un formulario (usando Bootstrap-Vue y Vue2). Cada fila tiene dos campos. Si el usuario no ingresa un valor válido en el campo, el estado del campo devuelve false , lo que hace que el cuadro se coloree de rojo y agregue un mensaje debajo del campo. Pero quiero que ambos campos (en la misma fila) estén alineados entre sí. El problema:
Cuando no muestro un error, se ve bien:
El código:
<div class="text-right"> <div class="row"> <div class="col-md-6"> <div class="modal-label">שדה 1</div> <b-form-input :class="{ 'invalid-form-box': !stateField1(), 'modal-input': true}" v-model="course_number" type="number" placeholder="שדה 1" :trim="trimInput"/> <p v-if="!stateField1()" class="invalid-form-text"> לא חוקי 1 </p> <p v-if="!stateField2() && stateField1()" class="invalid-form-text"></p> </div> <div class="col-md-6"> <div class="modal-label">שדה 2</div> <b-form-input :class="{ 'invalid-form-box': !stateField2(), 'modal-input': true}" v-model="score" type="number" placeholder="שדה 2" :trim="trimInput"/> <p v-if="!stateField2()" class="invalid-form-text"> לא חוקי 2 </p> <p v-if="!stateField1() && stateField2()" class="invalid-form-text"></p> </div> </div> ... </div> <style scoped> div { margin: auto 0; direction: rtl; } input { direction: rtl; } .modal-label { margin-bottom: 0.5rem; } .modal-input { margin-bottom: 0.5rem; } .modal-header .close { padding: 1rem 1rem !important; margin: -1rem auto -1rem -1rem !important; } .invalid-form-text { width: 100%; margin-top: 0.25rem; font-size: 80%; color: #dc3545; } .invalid-form-box:focus { border-color: #dc3545; box-shadow: 0 0 0 0.2rem rgb(220 53 69 / 25%); background-repeat: no-repeat; } .invalid-form-box { border-color: #dc3545; background-repeat: no-repeat; } </style> ¿Cómo puedo hacer que estén alineados? Traté de reemplazar <p> con <div> , <label> y <span> . También intenté usar <br> .
6 Respostas
Responde à pergunta0
Hay dos maneras de lograr esto. Recomiendo el primero.
Haga que la posición de la etiqueta 'texto de forma no válida' sea absoluta y corrija su posición donde desee y eso eliminará este cambio de diseño.
Si está utilizando flex use align-items: flex-start, de modo que cuando aparezca un error, la alineación los alineará para flex start y parecerá que están en la misma línea. (Debería funcionar, pero podría no funcionar debido a otros conflictos CSS; en caso de que no funcionara, solo pregunte)
0
Si usa BootstrapVue, puede hacer algo como:
<b-row align-v="start"> <b-col cols="6"> // Whatever goes in your first column </b-col> <b-col cols="6"> // Whatever goes in your second column </b-col> </b-row>0
El desplazamiento es causado por el margin: auto 0; regla en:
div { margin: auto 0; ❌ causes layout shift when error message appears } Esa regla establece los márgenes superior e inferior de todos los div s en auto . Observe los márgenes verticales de los div s ( div.col-md-6 y div.modal-label ) cuando no hay error:
Y cuando hay un error, los márgenes exteriores se colapsan para dejar espacio:
Solución
Creo que solo estabas tratando de establecer los márgenes horizontales en 0. Puedes hacerlo con:
div { margin-right: 0; margin-left: 0; } 
0
Puede agregar esto a la división principal.
display: flex; align-items: center; justify-content: center;Esto pondrá ambas entradas alineadas una al lado de la otra.
0
Creo que esta línea de código es responsable de mostrar u ocultar el error.
<p v-if="!stateField2()" class="invalid-form-text">Puede tener esta p debajo de cada cuadro de texto
Y su clase de texto de forma no válida puede ser así
.invalid-form-text{ visibility: hidden; }El punto aquí es que si muestra elementos ocultos con estilo de visibilidad, el elemento seguirá ocupando espacio en DOM sin importar que estén visibles u ocultos, y no alterará las alineaciones de los elementos.
0
Un enfoque es hacer que el elemento .invalid-form-text tenga una altura de 0px y asegurarse de que su desbordamiento esté configurado como visible si aún no lo está.
Si necesita agregar algún margen al elemento, puede cambiar su margen existente para transformar: translateY, lo que evita que afecte a otros elementos en el diseño dom.
.invalid-form-text{ height: 0; overflow: visible; margin: 0px; transform: translateY(0.25rem); }