Decathlon / Decathlon/vitamin-web

bug(@vtmn/css): display issue for the vtmn-select_container when the text are too long

Open
#1,473 0 comments 0 reactions 0 assignees View on GitHub
bug 🐛 community 👥 CSS 🎨
Dominant language
HTML
Stars
287
Forks
76
PR merge metrics
No merged PRs in 30d

Description

### Actual behavior
I am a developper in Myaccount Team, we have seen issues with the select (`.vtmn-select_container`).

1. The label is displayed only in one line but it is problematic for long translations for example. See the screenshot :
![image](https://github.com/dktunited/vitamin-play/assets/46887873/fc9ac75a-fc79-4839-8ac5-e8ba3639b884)
![image](https://github.com/dktunited/vitamin-play/assets/46887873/416e4d89-5327-4200-9c60-75d4f7a1b635)

2. the option inside the select is too long and the display of the select goes out the window
![image](https://github.com/dktunited/vitamin-play/assets/46887873/32f09582-cafb-437d-9b21-06ffb806113f)

### Expected behavior

1. allow a long label in multiples lines.
![image](https://github.com/dktunited/vitamin-play/assets/46887873/cad88ecf-258b-4f15-893c-ea54c0e8e3d9)

3. fix the display of the select when the option text is too long
![image](https://github.com/dktunited/vitamin-play/assets/46887873/34daa9e2-6b0b-4603-beec-fc40ef97d7bf)

To fix the issues, I have made this modifications in my code
- add a container around the select
![image](https://github.com/dktunited/vitamin-play/assets/46887873/1af39d19-4bb8-4651-a422-1af9fa70beb9)

- overwrite the following css
![image](https://github.com/dktunited/vitamin-play/assets/46887873/02e48105-5b05-4713-86c9-757ef5877221)

The code of the `::before` is the same as `.vtmn-select_container::before` except the position, float and inset-block-start

**Version affected**
"@vtmn/css": "^0.91.5",

You can contact me or Myaccount Team if you have any questions.

Thanks
Lionel

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.