search

italia / design-comuni-pagine-statiche

Le pagine statiche che compongono il modello di sito web per i comuni
https://italia.github.io/design-comuni-pagine-statiche
BSD 3-Clause "New" or "Revised" License
18 stars 24 forks source link

Errore componente cmp-input-search #144

Closed AlessandroVecchi closed 5 months ago

AlessandroVecchi commented 7 months ago

Ciao, Mi sono accorto che in versione mobile l'icona della ricerca che c'è nella pagina compare nel menu.

Screenshot 2023-12-13 145217

Io ho risolto abbassando lo z-index su .autocomplete-icon da 5 a 4 ma non so come mai fosse stato scelto questo preciso valore. Apparentemente non ho notato problemi di comportamento.

enrimk commented 7 months ago

Più in generale, visto che <header/> e <main/> sono nello stesso stacking context, ogni tanto ci potrebbero essere anche altri elementi della pagina che "bucano" l'overlay del menù, se capita che abbiano uno z-index > 5. Infatti 5 è lo z-index di .it-header-wrapper (anche se questo non sembra in accordo con la politica di BI in merito).

AlessandroVecchi commented 7 months ago

Ho trovato l'inghippo: con z-index a 4 ed il focus sul campo l'icona sparisce. Quindi la mia soluzione non è valida, converrebbe quindi innalzare il livello di it-header-wrapper verificando però tutte le conseguenze.

enrimk commented 7 months ago

Come hotfix, io ho usato questo:

.cmp-input-search .input-group {
    z-index: 0;
}

Stabilisce un context distinto per il contenitore del campo e delle sue decorazioni. Ha il vantaggio di non affidarsi a numeri magici, e di essere un fix localizzato e non interferire con altro (...forse. Con css non si sa mai). Lo svantaggio, è lo stesso: che è una toppa locale e non risolve altri possibili casi.

AlessandroVecchi commented 7 months ago

Come hotfix, io ho usato questo:

.cmp-input-search .input-group {
  z-index: 0;
}

Stabilisce un context distinto per il contenitore del campo e delle sue decorazioni. Ha il vantaggio di non affidarsi a numeri magici, e di essere un fix localizzato e non interferire con altro (...forse. Con css non si sa mai). Lo svantaggio, è lo stesso: che è una toppa locale e non risolve altri possibili casi.

Grazie, ho adottato la tua soluzione!

stale[bot] commented 5 months ago

Questo problema è stato automaticamente contrassegnato come non aggiornato perché non ha avuto attività recentemente. Sarà chiuso se non si verificano ulteriori attività. Considerate inoltre l'aggiornamento alle ultime versioni del tema. Grazie.