.form-outline does not work as a column.


Topic: .form-outline does not work as a column.

webservices pro premium priority asked a year ago

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?


Grzegorz Bujański staff answered a year ago

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>

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 Standard
  • MDB Version: MDB5 6.4.1
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: Yes