- Home
-
Universes
-
Account
-
Casino
-
Components
-
Game cards
-
Banners
-
Navigation
-
Header
-
- Modal
- Bottom Sheet
- ProgressBar
-
- Guidelines
-
-
Sport
-
Components
-
Guidelines
-
Iconography
-
-
-
Turf
-
Components
-
Progressive betting slip
- Market types
- Boosted cards
- Race cards
- Meeting cards
- Jockey cards
- Onboarding
- Race event
- Sections
- Ranking
- Badge
- Performance tag
- Tag
-
-
-
Payment
-
Components
-
-
Content
-
Widgets
-
Chatbot
-
Button
- Conversation
-
Window
-
-
-
Guidelines
-
Tactics components
-
Actions
-
Communication
-
Decorative
-
Forms
-
Navigation
-
- Visual testing
Dropdown
This component is visually extended from the Tactics dropdown component. Its particularity is that it is deported outside the DOM of its triggering parent.
TWIG component : Betclic/_common/_twig/_components/_forms/_input_fields.twig
CSS components : Betclic/_tactics/_common/_css/_components/_form/_fields.scss
Betclic/_tactics/_common/_css/_components/_form/_informations.scss
Betclic/_tactics/_common/_css/_components/_form/_inputs.scss
Betclic/_tactics/_common/_css/_components/_form/_labels.scss
Betclic/_tactics/_common/_css/_components/_form/_validation.scss
Betclic/_tactics/_common/_css/_components/_form/_sizes.scss
Betclic/_tactics/_common/_css/_components/_form/_dropdown.scss
JS : Betclic/_common/_js/_forms.js
The dropdown menu is moved at the end of the DOM, outside the parent container. To allow them to go over all the content. The positioning of the menu is entirely dynamic, it is placed above, below, to the left or even to the right of its trigger depending on its place in the window.
Default
In input field
Readonly
Disabled