Sto cercando di determinare il modo migliore per fare 2 elementi della stessa dimensione in base al testo di il maggiore elemento.
Fondamentalmente prendere la 2 elementi di testo "ouverture de session" e "xyz" (utilizzato per un breve parola di esempio) in modo che entrambi i pulsanti sono la stessa dimensione e sono abbastanza grande per gestire il più grande dei 2 ingressi di testo.
Questo può essere fatto tramite Javascript, Angolare, a prescindere.
Si può fare con i CSS griglie:
.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>Si può ottenere il pulsante con il più grande offsetWidthquindi applicare che per l'altro pulsante width proprietà di stile.
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>Se si dispone di ultiple pulsanti, una soluzione più scalabile:
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>È possibile impostare la proprietà min-width sul pulsante elemento. Facendo questo, il pulsante più piccolo, sarà della stessa larghezza come il più grande.