French Dropdown Menu Relatively Inconsistent Topic is solved

[etpourquelque27]

French dropdown menu moves to the right as opposed to English and Spanish dropdown menus that do not. In custom.css file the following snippet was added:

div.mod-languages ul {
text-align: left !important;
}

Furthermore, if I rename "Français" to default "French (fr-FR)" in "System / Content Languages / French (fr-FR) admin backend", the three dropdown languages (English, French, and Spanish) will line up properly on the right whenever a specific language is selected. In mobiles and Firefox the dropdowns are displayed nicely. Could it be a Google Chrome issue?

The problem here is that the word "Français" moves the menu to the right. The word "French" targets English speakers and not French speakers.

English.png

Spanish.png

French.png

Thank you in advance for helping.

[etpourquelque27]

I think I have found the culprit. The "inset" for French is 0px auto auto 0px. However, for English and Spanish the inset is 0px 0px auto auto. When I change the French inset to the same English and Spanish inset, the dropdown menu lines up properly. My question now is:
Which file do I edit to make the correction? A specific file is not indicated. I only see "element.style" where as the ul class is:

<ul class=”lang-block dropdown-menu show” dir=”ltr” data-proper-placement=”bottom-start” style=”position: absolute;inset: 0px 0px auto auto;” margin…..

Should I use the class in custom.css as follows?

.lang-block dropdown-menu show .style {
inset: 0px 0px auto auto !important;
}

Problem.png

solution.png

[SharkyKZ]

The styling is probably added dynamically by JavaScript.

[ceford]

Your dropdown list screenshot is not the same as mine. You need to provide your site URL or we are just guessing what the problem might be.

[etpourquelque27]

Thank you for taking the time to analyzing the problem. I have finally resolved it by adding the following in custom.css:

.dropdown-menu {
background-color: #025202;
inset: 0px 0px auto auto !important;
}

As you can see, just changing inset from : "0px auto auto 0px;" to "0px 0px auto auto;" fixed the problem.

However, I would have much preferred to edit the css using inline, which was no where to be found.

Once again, thank you.