Give item preview full height space

[alinekeller]

Une petite proposition d'amélioration pour l'affichage "full render". Actuellement, la hauteur de

, qui contient l'exemple de composant, s'adapte à la hauteur du composant. S'il contient un élément qui déborde, comme un dropdown, celui-ci n'est pas visible. Grâce à flexbox, on peut forcer le container à occuper tout l'espace disponible dans la fenêtre.

[github-actions]

Unit Test Results

    1 files      1 suites   0s ⏱️
268 tests 262 ✔️ 0 💤 0 ❌ 6 🔥
268 runs  256 ✔️ 0 💤 6 ❌ 6 🔥

For more details on these errors, see this check.

Results for commit c83debb.

♻️ This comment has been updated with latest results.

[github-actions]

🔎 Download the Backstop report for this pull request (link valid for 90 days):

• backstop-report.zip

[williambelle]

Est-il possible d'avoir la même fonctionnalité mais sans le "débordement" de la couleur ?
Par exemple, pour le footer, le background en noir dépasse/s'étire jusqu'au bas et on dirait que le composant ne se comporte pas correctement.

Avant	Après

|

[alinekeller]

@williambelle Non comme la couleur de fond se trouve sur l'élément qui est agrandi, ce n'est pas possible. Une autre possibilité serait de supprimer la propriété overflow:hidden qui se trouve sur .tlbx-item-preview, ainsi par exemple les dropdowns seraient quand même visibles même s'ils débordent.

[williambelle]

Je vois maintenant dans le code qu'il y avait une exception pour le dropdown :

elements/reader/reader.scss

Lines 44 to 48 in 83bce32

	/* Dropdown needs `overflow: visible` to allow it to
	escape its container. */
	.tlbx-item-preview.tlbx-component-dropdown {
	overflow: visible;
	}

mais il faudrait remplacer tlbx-component-dropdown par tlbx-element-dropdown. On pourrait ajouter tlbx-element-select-multiple pour le select multiple qui est aussi caché derrière le code.

[alinekeller]

Je vois maintenant dans le code qu'il y avait une exception pour le dropdown :

elements/reader/reader.scss

Lines 44 to 48 in 83bce32

	/* Dropdown needs `overflow: visible` to allow it to
	escape its container. */
	.tlbx-item-preview.tlbx-component-dropdown {
	overflow: visible;
	}

mais il faudrait remplacer tlbx-component-dropdown par tlbx-element-dropdown. On pourrait ajouter tlbx-element-select-multiple pour le select multiple qui est aussi caché derrière le code.

Parfait, j'ai modifié ça et ajouté directement la classe pour le breadcrumb avec dropdown.