Topic: Modal Body auto height when mdb-auto-completer and mdb-select is open
bitjuice pro asked 4 years ago
Hi,
I have some modals that contains mdb-auto-completer and mdb-select in the body. Is it possible to auto adapt modal body height when drop down list is shown (so the scroll bar on the right isn't displayed)?
Mdb-autocompleter incorrect behavior https://drive.google.com/file/d/1KwkUAjX9FywLJsGGH4jghjH_dqZwXL00/view?usp=sharing
Mdb-autocompleter correct behavior https://drive.google.com/file/d/1zInDRKd183GWn9TUxaz3kA1g3lwD4j5s/view?usp=sharing
Mdb-select closed https://drive.google.com/file/d/15rIAMBW_WldTQfyX3xxkjmd6fkB7Q8pG/view?usp=sharing
Mdb-select open - incorrect behavior https://drive.google.com/file/d/1N9ze4AdjHIsZuCoC3XSLA1MG4VY0gGd-/view?usp=sharing
Mdb-select open - Correct behavior https://drive.google.com/file/d/1UcT_38ttvdwr82fMfu5COBpatIkebC5i/view?usp=sharing
Thanks
Marco
bitjuice pro answered 4 years ago
Hi
There is another issue: if I set [appendToBody] = true on mdb-select or on mdb-autocompleter displayed in a modal, if I accidentally scroll the page below, it moves with the whole page
https://drive.google.com/file/d/1ZaZY267zIFFcr27H79q-e6qgjXE1rU25/view?usp=sharing
https://drive.google.com/file/d/1SgiaU601JH_GmG0Xy_lMhAe3Aoyv_r3M/view?usp=sharing
Thank a lot
Marco
Arkadiusz Idzikowski staff commented 4 years ago
Thanks, we will take a closer look at that. Can you fix the link to the examples? We don't have access to this Google Drive files.
bitjuice pro commented 4 years ago
Fixed. Sorry for the inconvenient
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 9.2.0
- Device: PC
- Browser: Chorme
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes
Arkadiusz Idzikowski staff commented 4 years ago
Did you try to use
appendToBody
input?bitjuice pro commented 4 years ago
Thanks Arkadiusz,
I added appendToBody attribute and increased z-index of .dropdown-content css class, and now it works.
Regards
Marco
bitjuice pro commented 4 years ago
Hi
I added appendToBody attribute to mdb-select (9.2.0 version) and increased z-index of .dropdown-content css class, and it is now displayed correctly.
But on mobile there is another issue: I'm not able to click on items. If I click on them, dropdown become closed. On desktop it work fine.
How I can solve it?
thanks
Arkadiusz Idzikowski staff commented 4 years ago
Which device and browser do you use?
bitjuice pro commented 4 years ago
Hi Arkadiusz,
I use samsung Galaxy A5 with Android 8.0 and Chrome. But this issue is reproduced even if you use Google Chrome Console and set mobile view
Marco