Topic: Form/Input customization
I'm looking for an easy way to customize all my form, by adding a border-radius for example.I try many sass-variables change or direct css modification, neither work.
Using sass variable ? Is not possible ?
Krzysztof Wilk staff commented 2 years ago
Hi!
Yes, that's also possible. You can set up an mdb SCSS from these instructions: https://mdbootstrap.com/docs/b5/react/content-styles/theme/. Then you can use scss/custom/_variables.scss to create a new one and overwrite it. In the case of border-radius you mentioned above, you can paste here i.e.
$form-notch-leading-border-radius: 0.9rem; :)
Keep coding!
Kaherdino priority commented 2 years ago
Thanks but It's only at the end, see : https://tinyurl.com/yehnvfas Sorry but why it's not $input-border-radius ? As in the BS5 docs : https://getbootstrap.com/docs/5.0/forms/form-control/#variables
Where can I find any docs about form-notch-leading-border-radius ?
Krzysztof Wilk staff commented 2 years ago
Hi!
Try updating these 2 variables - $form-notch-leading-border-radius and $form-notch-trailing-border-radius. There are some differences between MDB and Bootstrap because we improved some components (i.e. added form-notch div divided on 3 parts for better label handling).
I'm afraid there's no such page in our documentation for now.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB React
- MDB Version: MDB5 1.4.0
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No
Krzysztof Wilk staff commented 2 years ago
Hi!
Is it possible to share your code with me? It'll be helpful :)
You can try to use more precise selectors to style i.e. the
form-notchelement inside an input. So the example selector could look like this:.form-outline .form-control~div.form-notch:)Keep coding!