DropDown on RTL not functioning correctly

Topic: DropDown on RTL not functioning correctly

sody priority asked 1 year ago

Expected behavior dropDown to show menu under the button.

using RTL, even if i use mdb.rtl.min.css is still the same behaviour.. in my enviroment it show the drop menu first time under the button , second time and on shown in the end of the line. attached snippet

Actual behavior

dropdrown shown in the end of the line

Resources (screenshots, code snippets etc.)

https://mdbootstrap.com/snippets/standard/sody/5673390

Add comment

sody priority answered 1 year ago

0 0 Best answer

hi,

unfortunatly something odd here.. when i change y snippet accordingly and hit save it works, but when I reload the page its not working..

even I changed it to ul in my enviroment and still get the same result.. drop-down menu moves to the end of the line.

in your snippt here is what i get in first click:<img src="https://usercontent.mdbootstrap.com/mdb-images/support/a856a865-117d-4d12-af22-3fad1f108ae5-dropdown1.jpg" alt="first click" title="">

in the second click:<img src="https://usercontent.mdbootstrap.com/mdb-images/support/3e871776-c719-4091-b22c-290af4d0f09e-dropdown2.jpg" alt="second click" title="">

I modified my snippet to simulate my full enviroment ( <a href="https://mdbootstrap.com/snippets/standard/sody/5673390" target="_blank">https://mdbootstrap.com/snippets/standard/sody/5673390</a> )

i get the same results as above, first click:<img src="https://usercontent.mdbootstrap.com/mdb-images/support/d896ee85-29d6-4c5c-8bfb-6f4adeea5184-dropdown3.jpg" alt="my first click" title="">

second click:<img src="https://usercontent.mdbootstrap.com/mdb-images/support/1328e993-32fd-4965-91a0-5a974d45561a-dropdown4.jpg" alt="my second click" title="">

AGAIN keep in mind that the snippets aren't fully shown my enviroment beacsue i use min.rtl.css so to really simulate you need to launch rtl.min.css stylesheet and not the default (LTR) one that the snippents has

Please insert min. 20 characters.

hi,

unfortunatly something odd here.. when i change y snippet accordingly and hit save it works, but when I reload the page its not working..

even I changed it to ul in my enviroment and still get the same result.. drop-down menu moves to the end of the line.

in your snippt here is what i get in first click:

in the second click:

I modified my snippet to simulate my full enviroment ( https://mdbootstrap.com/snippets/standard/sody/5673390 )

i get the same results as above, first click: my first click

second click: my second click

AGAIN keep in mind that the snippets aren't fully shown my enviroment beacsue i use min.rtl.css so to really simulate you need to launch rtl.min.css stylesheet and not the default (LTR) one that the snippents has

Kamila Pieńkowska staff commented 1 year ago

Please wrap button and dropdawn menu in <div class="dropdown d-inline-block"></div>

It won't work in the snippet because snippets do not support RTL but locally it will be ok.

sody priority commented 1 year ago

hi kamila, this fix in my enviroment positions the dropdown correctly but its invisible under the "", any idea how to bring it to front ?

iny my snippet there are other problem the dropdown starts from to pthe button down and not bottom down for some reason.

https://mdbootstrap.com/snippets/standard/sody/5673390

thanks

Kamila Pieńkowska staff commented 1 year ago

What do you mean by but its invisible under the ""

sody priority commented 1 year ago

I wrote < tr > it cutted OFF :)

sody priority commented 1 year ago

You can see it in the snippet too

Kamila Pieńkowska staff commented 1 year ago

It's because you've set in your navigation bar overflow value hidden in jgrid.

Add comment

Kamila Pieńkowska staff answered 1 year ago

0 0 Best answer

dropdown-menu needs to have ul tag. You've changed it to div. Here is adjusted snippet: https://mdbootstrap.com/snippets/standard/kpienkowska/5677119

Add comment

Write

Create snippet

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: Priority
Premium support: Yes
Technology: MDB Standard
MDB Version: MDB5 6.4.2
Device: desktop
Browser: chrome
OS: windows
Provided sample code: No
Provided link: Yes

sody

59Support score
13Questions 4Answers 6Snippets