Topic: .form-outline does not work as a column.
Expected behavior
Inputs wrapped in .form-outline can be used with .col-* to adjust the layout for responsive views.
Actual behavior
Inputs wrapped in .form-outline do not change width. They always stay full width and the background of the input, when using disabled, makes it clear that there is also different padding that gets applied
Resources (screenshots, code snippets etc.)
I was experimenting with this snippet of inputs to see if I could get it to work properly. It doesn't seem like it is possible. Is there some way to achieve columns and rows with inputs that .form-outline?
Try wrapping the .form-oultine element in a div with a .col class instead of adding it to that element. This should solve the problem
<div class="row">
<div class="col">
<div class="form-outline">
<input type="text" id="form1" class="form-control" disabled />
<label class="form-label" for="form1">Label One</label>
</div>
</div>
<div class="col">
<div class="form-outline">
<input type="text" id="form2" class="form-control" />
<label class="form-label" for="form2">Label Two (not disabled)</label>
</div>
</div>
<div class="col">
<div class="form-outline">
<input type="text" id="form3" class="form-control" disabled />
<label class="form-label" for="form3">Label Three</label>
</div>
</div>
</div>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 6.4.1
- Device: All
- Browser: All
- OS: All
- Provided sample code: No
- Provided link: Yes