Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: mdb-select wired behaviour

morgoth pro asked 6 years ago


Hi there, I have a form inside a .container>.row>.col-md-6 <form method="post" accept-charset="utf-8" novalidate="novalidate" id="ShoppingcartOptionSelector" role="form" action="/catalog/shoppingcarts/add/2136"><div style="display:none;"><input type="hidden" name="_method" class="form-control " value="POST" /><input type="hidden" name="_csrfToken" class="form-control " autocomplete="off" value="86e8259d94b4b89ae05635dfe60f3b33a2b44855896cb5e700bfcea41db457b3614f1baaeddcc6df2bd86128dbcd2c716a9b80f623c5245809706b12546c93ca" /></div> <div class="product-params clearfix row"> <div class="col-md-6"><fieldset class="form-group "><label for="size-id">Size</label><select name="size_id" class="mdb-select " id="size-id"><option value="34">42</option><option value="35">43</option><option value="36">44</option><option value="37">45</option><option value="38">46</option><option value="39">47</option></select></fieldset></div> <div class="col-md-6"><fieldset class="form-group "><label for="color-id">Color</label><select name="color_id" class="mdb-select " id="color-id"><option value="61" selected="selected">NERO</option></select></fieldset></div> </div> <div class="product-cta clearfix row"> <div class="col-md-6"><a href="/catalog/wishlists/add/2136" class="btn btn-lg btn-outline-red red-text" id="add-to-wishlist-btn"><i class="fa fa-heart"></i> Aggiungi alla wishlist</a></div> <div class="col-md-6"><button class="btn btn-danger btn-lg red btn btn-secondary" type="submit"><i class="fa fa-shopping-cart"></i> Aggiungi al carrello</button></div> </div> <div style="display:none;"><input type="hidden" name="_Token[fields]" class="form-control " autocomplete="off" value="3a92476be59c30e87aab70341d7e751c30f82d1e%3A" /><input type="hidden" name="_Token[unlocked]" class="form-control " autocomplete="off" value="" /><input type="hidden" name="_Token[debug]" class="form-control " autocomplete="off" value="%5B%22%5C%2Fcatalog%5C%2Fshoppingcarts%5C%2Fadd%5C%2F2136%22%2C%5B%22size_id%22%2C%22color_id%22%5D%2C%5B%5D%5D" /></div></form> the select works like a charm, but when the component is placed in the middle of the viewport or even little bit over the bottom (when the option list is top-bottom) it happens that list disappear under the end of the col-md-6. I already tried to force the z-index option and a tons of tricky things without any success. Do you have any idea on how to solve the issue?   You can look at this link and play with the "size" select https://www.motolandferrara.com/catalog/prodotto/3477-AIRTECH-EVO-GTX.html

Mikołaj Smoleński staff answered 6 years ago


Hi, Your .view wrapper has style property overflow: hidden. That's why select disappears when it's outside Your div. I suggest to change that property (for example to inherit). Regards

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

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags