As I’m working towards moving my Web App to Web API 2.0, I’m trying to figure out styling for the App. The main thing I’m trying to figure out is for the WebListBox. I know about using bootstrap and bootstrap.min.css for most of the basic stylizing changes, but there are some things that get overridden later on. Mainly, the background color for selected items. I’ve tried doing it in the bootstrap.min.css, and in the HTML header, but they both are before what looks like a style sheet created by Xojo(See screenshot). Any ideas on how I could accomplish this?
Note: The name of the Style sheet that is overriding changes on every session.
You should probably file a ticket so that we can place CSS after all framework CSS to override it. This seems like the framework design could be improved to help us.
1 Like
Can you provide a sample of what you are trying to do?
Yeah, so mainly I’m trying to change the color of a selected cell in a WebListBox. So I’ve tried using the selected class in bootstrap.min.css to change background-color, but that gets overridden in the framework style sheet. So I also tried to use the HTML header to add a CSS style directly, but that gets placed right before the framework style(This can be seen in the screenshot above). You can see the developer tools on the screenshot below. The selected cell is a dark blue background, and I’m trying to change the color of that to a teal color(you can see my other .selected attempts in the styles column at the bottom.)
It looks like Xojo is creating a CSS that overrides the datatables.min.css
If they don’t create the CSS then the datatables.min.css background-color will be used and we can override that with code.
Of course all this information is from a CSS newbie and playing with Chrome developer tools. I’m sure @Anthony_G_Cyphers understand all of this better, I hope he can comment.
1 Like
This style block appears to only contain the SelectedRowColor property value when changed in the IDE. If you want to change the selected row color, what’s wrong with doing that via the IDE’s inspector? Or is the goal to set a certain cell’s color?
If you do want to just remove it, add this to the Shown event of your WebListBox:
ExecuteJavaScript( "$('#" + me.ControlID + "_style').detach();" )
1 Like
I honestly missed that it was even a possibility to change in the IDE, so that helps a ton! That would make sense as to why it would want to be overwritten by the IDE. Thank you!
Happy to help!