Problema con CSS Advanced Search

[ivoales]

Salve a tutti, ho un fastidioso problema di css con il modulo di ricerca avanzata perché i menu a tendina dei filtri di ricerca sono troncati alla fine della sezione "#advancedSearch area".

Valutando la struttura del codice, risulta essere ordinato come segue:

Code: Select all

div#advancedSearch
	/* ecc. */
	
	div#search-form
	/* ecc. */
		
		div.controls .finder-selects /* qui inizia il blocco dei filtri */
			label.control-label
	
			select#tax-k2-category /* per esempio */ .inputbox .advancedSelect //il valore predefinito è "display: none; "
				option
				option
				option
				/* ecc. */
	
			div#tax_extra_fields_chzn /*per esempio*/ .chzn-container .chzn-container-single .chzn-container-single-nosearch
				a.chzn-single
					<span>voce</span>
				div.chzn-drop
					div.chzn-search
						input (type="text")
					/* ecc. */
					ul.chzn-results
						li.active-result .result-selected
				
						li.active-result
						li.active-result
						li.active-result
						/* ecc. */
				

Il problema è che se cambio il parametro "display" di "select.inputbox" in qualche modo (block, flex, ecc.) Il menu a tendina predefinito funziona correttamente e mostra tutte le voci senza troncarsi ma ovviamente anche "select.inputbox" è visibile quindi ho due menu a tendina uno sotto l'altro. Se lascio "select.inputbox" al valore predefinito questo è ovviamente nascosto ma l'altro viene troncato.

Ho provato tutto passo dopo passo per ogni riga da "div.controls" a "li.active-result" cambiando i valori per il box-sizing, display, height and overflow senza trovare una soluzione. Sembra che l'altezza automatica del menu a discesa sia definita solo da "select.inputbox" indipendentemente dal fatto che per impostazione predefinita il menu del modello sia quello disegnato come "div#fav-maincontent #advancedSearch .controls div".

Anche il div principale "div#search-form" resta sempre della stessa altezza indipendentemente dai parametri "display" o "height" impostati e in ogni caso non c'è modo di far apparire il cursore in overflow-y nel blocco a tendina selezionato.

Ovviamente sto sbagkiando qualcosa relativamente all'ordine e all'impostazione dei parametri CSS degli elementi ma non riesco a risolvere il problema tranne che nascondendo "div#fav-maincontent #advancedSearch .controls div" e lasciare che "div#fav-maincontent #advancedSearch .controls select" sia "visibile come display:block (o altro). Solo, lo stile del dropdown è orribile e la necessità di sapere dov'è che sbaglio è più forte di me.

Uso joomla 3.9.20, il template free "favourite" e K2. La versione di PHP è la 7.4.8.

La pagina incriminata è a questo indirizzo:
https://www.csviveredalridere.it/index. ... a-avanzata

Se qualcuno ha un'idea di come risolvere la questione, dormirò un po' più tranquillamente.

Grazie in anticipo.

[ivoales]

Uhm, pare che nessuno abbia una risposta...

comunque, il problema gira intorno ad un conflitto tra la chiamata alla funzione

Code: Select all

function(e) {
  var i, n, o = t(this),
    s = o.attr("data-target");
  s || (e.preventDefault(), s = "#" === (s = (s = o.attr("href")) && s.replace(/.*(?=#[^\s]+$)/, "")) ? "" : s), i = (n = t(document).find(s)).data("collapse") ? "toggle" : o.data(), o[n.hasClass("in") ? "addClass" : "removeClass"]("collapsed"), n.collapse(i)
}

del pulsante "ricerca avanzata" che alterna l'assegnazione delle classi .collapse e .collapse.in e la proprietà della DIV #advancedSearch.

Perché le due classi agiscano correttamente #advancedSearch dovrebbe essere impostata su "display: flex;" (anche "block" va bene). Ma in questo caso i menu sono ovviamente troncati. Viceversa perché non lo siano occorre che #advancedSearch abbia la proprietà "display: table".

Soluzione: ho comunque eliminato i dropdown definiti dalle classi .chzn- e mantenuto quelli definiti da select.inputbox ridisegnandoli in css come i primi, e dal punto di vista estetico siamo a cavallo. In realtà potevo evitare e mantenere attivi i primi, ma il lavoro era già stato fatto prima che mi accorgessi del reale motivo del problema e di riscrivere il css non avevo decisamente voglia.

In ogni caso, ho riassegnato le classi .collapse come "display: flex;" e .collapse.in come "display: table;" e ho risolto la questione. Tutto i dropdown funzionano perfettamente su desktop, disposti in orizzontale e su mobile disposti in verticale, a parte il fatto che ovviamente .collapse.in non lavora in transition, ma chi se ne frega. E questa è la reale soluzione al problema.

Grazie comunque.