Inline Important Styling

[JarrodO]

Hello,

Just a heads up that I have a dark mode setting in my application, and this line of code I had to remove to apply it because inline important can't be overridden I believe.

{"key":"background","value":"white !important"}

[PhilippeMarcMeyer]

Hello Jarod,
Please to meet you.
I recently made a new branch 'freeStyledButton' where you can change the button style : just modify the style in the css file

.vsb-main button{ min-width: 120px; border-radius: 0; width: 100%; text-align: left; z-index: 1; color: #333; background: white !important; border: 1px solid #999 !important; line-height:20px; font-size:14px; padding:6px 12px; }

The program will put them back in-line
I'm not sure it will work
The goal is to preserve the button style from mixing issues with the host page that may hold interfering styles

please try it
and give me back advices

Thanks

[PhilippeMarcMeyer]

another way would be to allow user to pass somme style as a parameter which would override the default css what do you think ?

[PhilippeMarcMeyer]

You can override !important :
by setting the property externally (I mean after initializing the drop down)
document.querySelector("#demo-multiple button").style.setProperty("background-color", "pink", "important");
where demo-multiple is the id of the parent div of the select
You can have it directly without knowing the parent div of the select
ex with select id = "brandsMulti"

document.querySelector("#brandsMulti").parentNode.querySelector("button").style.setProperty("background-color", "pink", "important");

=> I will modify the vanilla select box in order to simplify access using the id of the original select

[JarrodO]

Hey Philippe,

Pleased to meet you as well, and thank you for creating vanillaSelectBox! I think either keeping all the CSS in a stylesheet or passing it as a parameter would work. Personally, I like keeping CSS in a stylesheet but am sure that there's a reason it needs to be in JavaScript. I'll give it a go as soon as I have a bit of time.

Much appreciated

[PhilippeMarcMeyer]

keeping style in css files is definitely a good practise
let me explain why I chose, in this very specific case, not to follow this rule :
When testing vsb users reported having styling problems due to unwanted interactions between vsb style sheet and other style sheets present in their codebase. that why I choose to put the style inlien inside the button.

I'm currently trying to figure out how to allow user to change the default style but still protecting the button to theses unwanted interactions.

[JarrodO]

Ah, I see. That makes sense. I tried the code, but yeah if the JavaScript still makes it inline !important then it still can't be overridden by a style sheet. If I could pass the styling in JavaScript as a setting then yes that would be a way by this. I'm still uncertain why the users having issues couldn't override the vsb styles with their own. I'll have to go back through issues and check it out. Thanks 👍

[brodieaustin]

Would it be possible to have an option to disable inline styles? I'm using JS to wipe out the inline styles after the select is initialized on the page. {inlineStyles: true/false}

[PhilippeMarcMeyer]

Brodie,
It's done and a little more than what you asked : I have reversed the boolean behaviour : keepInlineStyles:true keeps the old behaviour but by default, the inline css is no longer injected in the main menu.
Thank you for your help in improving this tool !

[brodieaustin]

That's fantastic! Thank you.

[PhilippeMarcMeyer]

ok let's do that see you soon

…

On Thu, 14 Oct 2021 21:58 Brodie Austin, ***@***.***> wrote: Would it be possible to have an option to disable inline styles? I'm using JS to wipe out the inline styles after the select is initialized on the page. {inlineStyles: true/false} — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#27 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAQTZ6ZGKXEGW3I3PS4KW5DUG4Y5DANCNFSM4V7WB2SQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.