Click here to Skip to main content
15,507,201 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi,
I have the following HTML code for creating dropdown list items in the navbar section. I want to use the RTL direction, but all items are aligned with LTR.

<li mdbDropdown class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
                            mdbDropdownToggle aria-expanded="false">
                            option
                        </a>
                        <ul mdbDropdownMenu class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <li>
                                <a class="dropdown-item" href="#">Item1</a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="#">Item2</a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="#">Item3</a>
                            </li>
                        </ul>
                    </li>


Update:I'm using MDB for Angular 13.

What I have tried:

I tried to make some changes in my custom CSS file:
.dropdown-menu, .dropdown-item { 
    left: 0 !important; 
    right: auto !important;
}
Posted
Updated 3-May-22 19:57pm
v3

1 solution

Your markup looks wrong. Here is the documentation on how to do dropdown lists: Bootstrap Dropdowns - examples & tutorial[^]

As for RTL, thier documentation explains how to implement here: MDB 5 RTL[^]

Accourding to the link above, this should work:
HTML
<!DOCTYPE html>
<html lang="ar" dir="rtl">
    <head>
        <!-- header stuff goes here... -->
    </head>
    <body>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
    </body>
</htmp>

NOTE: Don't forget to follow the documentation and add the RTL language on the Html tag.

The above code is not for the navbar, but the same still applies. Here is the documentation: Bootstrap Navbar - examples & tutorial[^]
 
Share this answer
 
v2
Comments
Code4Ever 4-May-22 0:59am    
Hi, Excuse me! I forgot to mention that I'm using MDBootstrap for Angular 13. This site has special documentation for the Angular system. But I could not find any RTL documentation in MDB for Angular.
Graeme_Grant 4-May-22 1:24am    
did you try the <html lang="ar" dir="rtl">?

NOTE: set the language that you want to use, lang="ar" is just an example.
Code4Ever 4-May-22 1:31am    
Yes, I had used it before asking this question.
Graeme_Grant 4-May-22 3:29am    
Your question does not show that, so had to ask.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900