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.
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;
}
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;
}
4. Observam rezultatul