Topic: mdb-select (jquery) wrong dropdown-content vertical position
Hi,
I'm facing a problem with mdb-select component in mdb pro version.
When the select is placed at the very bottom of the viewport it works like a charm, but when the select is placed a bit upper, and the top css property is setted to 0 the dropdown-content is hidden under the end of the col.
I tried to set z-index with no success because the origin is the form nested in a col: there is not enough space to display all the options in there.
Is there a way to override the js trigger to develop a better solution to display it? Or do you have any better idea to solve this issue?
If you tell me a way to attach some screenshot I can send it to you...
The resulting html code is
Start your code here <div class="col-md-6"><fieldset class="form-group "><label for="size-id">Size</label><div class="select-wrapper mdb-select"><span class="caret"></span><input type="text" class="select-dropdown" readonly="true" data-activates="select-options-d49c62ed-817d-4460-b50f-c7f16dde6f57" value="41"><ul id="select-options-d49c62ed-817d-4460-b50f-c7f16dde6f57" class="dropdown-content select-dropdown" style="width: 390.75px; position: absolute; top: 0px; left: 0px; opacity: 1; display: none;"><li class=""><span class="filtrable">41</span></li><li class=""><span class="filtrable">42</span></li><li class=""><span class="filtrable">43</span></li><li class=""><span class="filtrable">44</span></li><li class=""><span class="filtrable">45</span></li><li class=""><span class="filtrable">46</span></li><li class=""><span class="filtrable">47</span></li></ul><select name="size_id" class="mdb-select initialized" id="size-id"><option value="33">41</option><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></div></fieldset></div>My very best regards
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Resolved
Specification of the issue
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Ollie Vincent pro commented 7 years ago
Hi, You can host screenshots externally and share a link, or share a link to your project for us to review.cdenby pro commented 7 years ago
I believe I have the same issue. In my case, the Drop-down, medium low on the page, opens upward and the top portion of the drop-down content is hidden behind containers higher in the screen. Here is a 1-minute video of the issue: https://drive.google.com/file/d/1IJ-RQYLr06FpomiLxi2VTgiZCBDQHdho/view?usp=sharing Can we sort out a solution to this?cdenby pro commented 7 years ago
I've resolved my issue with it. Because it was in a div that could be overly long, I made that div a max-height with overflow-y:scroll. When I removed that, the entire drop-up appeared.