search

italia / bootstrap-italia

Bootstrap Italia è un tema basato su Bootstrap 5 conforme alle "Linee guida di design per i siti internet e i servizi digitali della Pubblica Amministrazione"
https://italia.github.io/bootstrap-italia
BSD 3-Clause "New" or "Revised" License
311 stars 163 forks source link

Nel componente Callout se il titolo è inferiore a 10 caratteri, la linea dopo il titolo non chiude il box. #1119

Closed andrea-conforto closed 5 months ago

andrea-conforto commented 5 months ago

Versione di Bootstrap Italia

Il problema è stato riscontrato sulla versione 2.8.7 e su versioni precedenti

Comportamento atteso

Utilizzando il codice HTML: 

<div class="callout">
  <div class="callout-inner">
    <div class="callout-title">
      <svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-info-circle"></use></svg>
      <span class="visually-hidden">Confermato</span> 
      <span class="text">Titolo</span>
    </div>
    <p>Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius.</p>
  </div>
</div>

Che contiene un titolo inferiore a 10 caratteri la linea subito dopo il titolo dovrebbe chiudere il box, invece resta spezzata. Il problema sembra evidenziarsi solo in presenza di un titolo inferiore a 10 caratteri.

Possibili soluzioni

Modificando la lina 238 del file /src/custom/_callout.scss da width: 250%; a width: calc(100% + 23rem); oppure a width: 1200%; il problema sembra rientrare.

andrea-conforto commented 5 months ago

1121 versione anche per il Design React Kit