Topic: Use input group with forms
Expected behavior Use input group with forms, with different input components (input text, select, radio group, check boxes) to get a consistent layout and use the small size of input elements.
Actual behavior
Input group is not working with forms and mdb-form-control components. The input group docs are located in the Forms section in the documentation.
Input components support the class for small size but when I try to get a consisten size using other form elements like select or checkboxes, there is no way to make them smaller. Enclosing mdb-form-controls or select, check, etc within input group results in an inconsistent layout.
Resources (screenshots, code snippets etc.)
<mdb-form-control> and mdbInput, mdbLabel directives are used to create outline style with dynamic label. In input groups they are not used on purpose.
In terms of sizing you can use classes like .form-control-lg, .form-control-sm and .input-group-sm, .input-group-lg to set heights on individual inputs. More about sizing in our docs sections:
https://mdbootstrap.com/docs/angular/forms/input-fields/#section-sizing https://mdbootstrap.com/docs/angular/forms/input-group/
I hope it helps you with your situation. If you have any other questions feel free to ask.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: MDB5 3.0.1
- Device: PC
- Browser: Chrome, Firefox; Opera, Brave
- OS: Windows
- Provided sample code: No
- Provided link: No
Rafał Seifert free commented 1 year ago
Could you please edit your post and add code example how you build your elements? Right now it's hard to judge where exactly lies the problem. With code sample we will be able to recreate the form and think of potential solution.
diegomoreno_2000 pro commented 1 year ago
I'm interested in the input group sizing feature. I need to implement a complex form with 15 fields, including input text, datepicker, select, radio, checkbox ad file input.
I wonder if there is a way to consistently reduce the size of the input fields (other than input text kind). In most of the examples in the docs, you are using mdb-form control, but in the input group docs the input fields are not using it.