0
118
VistasEstablecer el ancho de 2 elementos en función del texto más largo
Estoy tratando de determinar la mejor manera de hacer que 2 elementos tengan el mismo tamaño según el texto del elemento más grande.
Básicamente, tome los 2 elementos de texto "ouverture de session" y "xyz" (usado para un ejemplo de palabra corta) para que ambos botones tengan el mismo tamaño y sean lo suficientemente grandes como para manejar la mayor de las 2 entradas de texto.
Esto se puede hacer a través de Javascript, Angular, lo que sea.
3 Respuestas
Responde la pregunta0
Puede obtener el botón con el offsetWidth más grande y luego aplicarlo a la propiedad de estilo de width del otro botón.
const buttons = document.querySelectorAll('button') if (buttons[1].offsetWidth > buttons[0].offsetWidth) { buttons[0].style.width = buttons[1].offsetWidth + 'px'; } else { buttons[1].style.width = buttons[0].offsetWidth + 'px'; } <button>Hello World!</button> <button>Spectric</button>Si tiene varios botones, una solución más escalable:
const buttons = document.querySelectorAll('button') const biggestWidth = [...buttons].reduce((a,b) => a = b.offsetWidth > a ? b.offsetWidth + 1 : a, 0) buttons.forEach(e => e.style.width = biggestWidth + 'px') <button>Hello World!</button> <button>Spectric</button>0
Puedes hacerlo con grillas CSS:
.button-panel { display: inline-grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 10px; } <div class="button-panel"> <button>A very long button name</button> <button>Ok</button> </div>0
Puede establecer la propiedad de ancho mínimo en el elemento de botón. Al hacer esto, el botón más pequeño tendrá el mismo ancho que el más grande.