Topic: Modal Body auto height when mdb-auto-completer and mdb-select is open
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
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 10 months 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 10 months ago
Fixed. Sorry for the inconvenient
Answered
- User: Pro
- Premium support: No
- Technology: Angular
- MDB Version: 9.2.0
- Device: PC
- Browser: Chorme
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes
Arkadiusz Idzikowski staff commented 11 months ago
Did you try to use
appendToBodyinput?bitjuice pro commented 11 months 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 10 months 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 10 months ago
Which device and browser do you use?
bitjuice pro commented 10 months 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