Exemplu utilizare CSS pt elementul drop-down variante produs

In cele ce urmeaza va prezentam un exemplu de ajustare a modului de afisare a elementului drop-down pt variante produs.



1. Observam ca implicit, drop-down-ul pt variante nu permite afisarea completa a textului pt varinate.c1

2. Cu ajutorul "Developer tools" din browser, identificam codul CSS implicit aferent obiectului drop-down. Se evidentiaza doua aspecte asupra carora vom interveni:

- latimea implicita a listei este de 140px; o vom ajusta la 240px

.page-product-detail #aroundpage ul.selectboxit-options {
max-width: 140px;
}

- in cazul in care textul nu se incadreaza, configurarea implicita este pt a ascunde textul ; vom opta pt a afisa textul (visible)

#aroundpage .selectboxit-options li,
#aroundpage .selectboxit-options .selectboxit-optgroup-header {
overflow:hidden;
}

c2

3. Ajustam cele doua proprietatila Admin->Design website->Fisier CSS Utilizator

- latimea

.page-product-detail #aroundpage ul.selectboxit-options {
max-width: 240px;
}

- vizibilitate in caz de depasire

#aroundpage .selectboxit-options li,
#aroundpage .selectboxit-options .selectboxit-optgroup-header {
overflow:visible;
}

c3

4. Observam rezultatul

c4