Topic: Unable to add more than 1 .mdb-select with a <label> tag on one page

duggiel free asked 5 years ago


I am currently unable to add more than one .mdb-select select tag on a page with their associated label tags.

The label tag uses the .select-wrapper element to position absolute. This means if there is more than 1 .select-wrapper element on the page, all the labels appear in the same place and overlap. (see image links for reference)

What is the solution for this bug?

Thanks

https://drive.google.com/file/d/1YbK4_60K36hbT3dVFsdgUUxMVFTwsnpG/view?usp=sharinghttps://drive.google.com/file/d/1YcbeMHKTXO3nmP03WLKd0Ae5E-3puC6s/view?usp=sharinghttps://drive.google.com/file/d/1YfOalZEcFI1LmMQNq_axaqP1n8rb5OVi/view?usp=sharing


duggiel free answered 5 years ago


Fixed it myself, turns out you need to specify a .row and .col-* otherwise it wont render properly.

To be honest it's not great code design, forcing people to use a row col for just a select tag.

<div class="row">
    <div class="col-lg-12">
      <%= f.select :one_click, options_for_select(Funnel.one_clicks.keys.map {|s| [s.titleize, s]}, @funnel.one_click), {include_blank: false}, class: 'mdb-select md-form' %>
      <%= f.label :one_click %>
    </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

Resolved

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.6.1
  • Device: Mac
  • Browser: Chrome
  • OS: OSX
  • Provided sample code: No
  • Provided link: Yes