Estoy tratando de determinar la mejor manera de hacer 2 elementos del mismo tamaño basado en el texto de la mayor elemento.
Básicamente son los 2 elementos de texto "obertura de sesión" y "xyz" (utilizado para una palabra corta ejemplo), de modo que ambos botones son del mismo tamaño y son 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.
Usted puede hacerlo con cuadrículas de 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>Usted puede conseguir en el botón con el más grande offsetWidth, a continuación, aplicar eso a la otra del botón width propiedad de estilo.
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 usted tiene ultiple 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>Puede establecer la propiedad min-width en el elemento de botón. De esta manera, los más pequeños, el botón de la misma anchura que el más grande.