Unable to change dropdown text color in Fomantic 2.8.4

[mpgr04]

I'm facing this issue only in the latest version - worked fine in 2.7.4.

I've written a custom dark mode css in which i change the background color and the text color of the dropdown - which works fine in 2.7.4

So, in the css file i'm targetin the default text class below the ui dropdown and giving it a custom color e.g. red - as said previously, this worked fine until 2.8.4.

But with the latest version, i'm not able to change the dropdown color in anyway, event changing it in the dev tool doesn't do anything

[lubber-de]

Could you please post your css snippet where it was working in 2.7.4 but not in 2.8.4 ?
The following is working in 2.7.4 as well as in 2.8.4

.ui.ui.dropdown > .default.text {
  color: red;
}

See https://jsfiddle.net/m3wfb70s/

Otherwise, when building Fomantic with a separate theme, changing @defaultTextColor in your dropdown.variables should work in both versions.

So , please post either your theme settings or the css snippet for better investigation

[mpgr04]

Here is my css snippet:

body.darkmode .ui.dropdown.default.text {
color: red !important;
}

This worked fine in 2.7.4 but is somehow not working in 2.8.4

[lubber-de]

The selector .ui.dropdown.default.text is invalid Fomantic Syntax. the default text div needs to be a child of ui dropdown (even in 2.7.4)
But even if this is a typo then still the selector .ui.dropdown .default.text works fine with 2.8.4
See https://jsfiddle.net/s60feabx/

Could you please change the jsfiddle to your individual html code so we can reproduce this?

[mpgr04]

I'm not able to reproduce this issue with the fiddle provided since i have a custom darkmode.css whoch changes the color of all kind of controls:

Hoverver i can provide you some screenshots:

This is how the dropdown looks like with 2.7.4
https://imgur.com/TibY4UN
https://imgur.com/2D8sshH

And this is how the dropdown looks like in 2.8
https://imgur.com/qllYqG8
https://imgur.com/t5p6HK5

And this is the css i'm using in my custom darkmode:

body.darkmode .ui.modal>.content>.ui.form .field .ui.dropdown input {
border-right: 1px solid var(--darkBorder) !important;
}

body.darkmode .ui.modal>.content>.ui.form .field .ui.dropdown.active {
border-color: var(--darkBorder) !important;
}

body.darkmode .ui.modal>.content>.ui.form .field .ui.dropdown .menu {
background-color: var(--darkDarker) !important;
color: var(--darkLighter) !important;
}

Also another thing which i discovered...
I've a top attached menu which looks like this in 2.7.4
https://imgur.com/ADTJ8C6

But in 2.8 it looks like this, without changing a single line of code
https://imgur.com/QbPhjjq

[lubber-de]

Sorry, but without having at least a html snippet and your css variables contents, i cannot replicate and help out.
Screenshots are nice, but we don't have the time to guess how your code is actually structured

What i guess is that your input fields have a state. Form states were refactored in 2.8 especially regarding background and color.

However as you are using !important i really cannot guess by screenshots whats exactly causing the issue as you also seem to use an additional CSS instead of making use of the fomantic theming system with a custom build.

I think you should be able to

• copy the affected modal html code (which contains the affected dropdown) to the jsfiddle i provided
• copy the mentioned attached menu code into the jsfiddle i provided
• copy your darkmode.css to the jsfiddle i provided (or at least the css snippet in addition with the current unknown css-variables you are using

I adjusted the jsfiddle so the body tag now has the darkmode class attached (this is done using the dropdown in the html tab in case you dont know)

https://jsfiddle.net/na2Lmjbo/

If it's a public accessible website, you could also just post a link 😉

[mpgr04]

Hi!
Thanks for your answer, and i totally understand the situation regarding the screenshots ;)

I've just installed two version of the website:

please log in with the following credentials:
Username: demo@kisenidemo
Password: KiseniDemo123

https://kiseni.com/excavationsitemanager - the working version with fomantic 2.7.4
https://kiseni.com/excavationsitemanager2_8 - the version which causes issues with fomantic 2.84

On https://kiseni.com/excavationsitemanager/php/settings.php - you can toggle the darkmode

and on https://kiseni.com/excavationsitemanager/PHP/SiteOverview.php you can find the modal if you click the add new button in the top attached menu (the menu which also changed its width, i mentioned in my prev. post.

I hope this makes things easier to investigate !

[lubber-de]

@mpgr04 Thanks for the links. I was now able to reproduce and find the reason.
It's related to #1235 which seems the browser is calculating a different z-index when using a dark theme
To fix this for your theme, add the following

body.darkmode .ui.search.dropdown>.text {
    z-index: 3;
}

[mpgr04]

Thank you for pointing out the issue - i implemented your solution and it worked great!
Thank your very much!

Could you also find out, why the top attached menu changed its width in the newest version as mentioned above?

[lubber-de]

Could you also find out, why the top attached menu changed its width in the newest version as mentioned above?

It's somehow related to your fixed width. Cannot figure out quickly what it otherwise causing it.
When the fixed width is disabled the attached menu has the same width in 2.7.x and 2.8.x

To match the width to your specifig usecase change the width from 1090px to 99.2%

#overviewTableMenu {
    /* width: 1090px; */
    width: 99.2%;
}

[mpgr04]

Hi!
You've solved all problems - thank you very much for your help!