Form/Input customization


Topic: Form/Input customization

Kaherdino pro premium priority asked 8 months ago

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.


Krzysztof Wilk staff commented 8 months 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-notch element inside an input. So the example selector could look like this: .form-outline .form-control~div.form-notch :)

Keep coding!


Kaherdino pro premium priority answered 8 months ago

Using sass variable ? Is not possible ?


Krzysztof Wilk staff commented 8 months 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 pro premium priority commented 8 months 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 8 months 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.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • 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