Visualizzazione dei risultati da 1 a 5 su 5

Hybrid View

  1. #1

    Disallineamento Pulsanti

    Ciao ragazzi,
    questo è il mio primo messaggio nel forum pertanto, innanzitutto, ciao!

    Venendo al mio quesito, sto costruendo una pillola libreria di componenti in React (ma questo è solo il contesto, non ha a che vedere con il mio problema) e sono incappato in un comportamento un pò bizzarro (almeno a prima vista) che non sono riuscito a spiegarmi.

    In pratica ho un componente Button che ha come classe CSS base la seguente dichiarazione:

    codice:
    .Button {
      align-items: center;
      display: inline-flex;
      border: 1px solid transparent;
      border-radius: var(--button-border-radius);
      cursor: pointer;
      font-family: inherit;
      font-weight: 500;
      justify-content: center;
      line-height: 1;
      outline: none;
      transition-duration: var(--button-transition-duration);
      transition-timing-function: linear;
      user-select: none;
      white-space: nowrap;
      &:enabled:active {
        opacity: .7;
      }
      &:disabled {
        cursor: default;
      }
      > svg, > img {
        height: 1em;
        width: 1em;
      }
    }
    Nella pagina di esempio della libreria ho disposto 3 di questi pulsanti dentro ad un <div> e ho notato che, se nel pulsante è presente l'icona, tutti e 3 risultano ben allineati altrimenti quello senza icona viene posizionato leggermente più in basso nella riga.
    Lascio due immagini che ben raffigurano l'anomalia.




    Grazie per gli eventuali consigli

  2. #2
    Uhm... Dopo alcuni test credo di aver capito l'inghippo.
    Nel caso del pulsante senza icona l'allineamento all'interno del div viene risolto sulla sua baseline, mentre quando c'è l'icona l'allineamento avviene rispetto alla base dell'elemento più alto quindi nel mio caso l'icona. Pertanto la baseline del secondo pulsante si allinea alla base dell'icona del primo e del terzo pulsante.
    Non so se mi sono spiegato .

    Convertendo il pulsante ad inline-block il testo torna, giustamente, allineato alla baseline (ma l'allineamento verticale dell'icona svacca, anche con "vertical-align: middle").

  3. #3
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    Ciao e benvenuto, non so se già hai risolto anche col secondo problema, ad ogni modo è difficile riprodurre il problema basandosi sul solo codice postato; nel caso, posta un link alla pagina in questione, se possibile, o magari predisponi un esempio minimo riproducibile usando qualche playground (uno tra tanti, CodePen), così sarà più semplice ricevere aiuto.

    Buon proseguimento
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  4. #4
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Ciao e benvenuto, non so se già hai risolto anche col secondo problema, ad ogni modo è difficile riprodurre il problema basandosi sul solo codice postato; nel caso, posta un link alla pagina in questione, se possibile, o magari predisponi un esempio minimo riproducibile usando qualche playground (uno tra tanti, CodePen), così sarà più semplice ricevere aiuto.

    Buon proseguimento
    Ciao Killer,
    grazie della risposta.
    Ecco il link al playground di prova (ho eliminato tutti gli stili, animazioni e orpelli vari per semplificare la lettura).

    https://codesandbox.io/s/button-test...le=/index.html

    Come vedi nel caso del pulsante senza icona l'allineamento avviene sulla baseline, mentre se l'icona è presente l'allineamento avviene rispetto alla base della content-box.
    Credo non ci sia nulla da fare (evidentemente questo è il comportamento predefinito degli elementi inline-flex) ma chiaramente se hai qualche dritta e mi sbaglio ben venga!

    Chiaramente potrei wrappare il tutto in una flexbox con align-items: center, oppure settare tutti i pulsanti con vertical-align: middle, ma ero proprio curioso di capire il perchè di questo comportamento degli elementi inline-flex con un classico container block.
    Ultima modifica di Aernom; 21-04-2021 a 12:07

  5. #5
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    Ho visto, non ti so dire molto di più di quanto hai già constatato tu stesso. Si tratta del calcolo delle altezze degli elementi inline e altre relative proprietà che influiscono sull'allineamento verticale. Vedi documentazione 10.8. Line height calculations: the line-height and vertical-align properties

    Da quel che ho provato, applicando vertical-align:middle (o top) alla classe .Button sembra risolvere.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.