Topic: Modal Body auto height when mdb-auto-completer and mdb-select is open

bitjuice pro asked 2 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


Arkadiusz Idzikowski staff commented 2 years ago

Did you try to use appendToBody input?


bitjuice pro commented 2 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 2 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 2 years ago

Which device and browser do you use?


bitjuice pro commented 2 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


bitjuice pro answered 2 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 2 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 2 years ago

Fixed. Sorry for the inconvenient



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

  • User: 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