Add Data Widget - CSS Issues with Custom Theme

[BrianCollins]

Web AppBuilder 2.4 (but this happened to me in prior versions)

I've created a custom theme by making some modifications to the standard Dart Theme. Nothing too fancy...I haven't created any new files or CSS classes. I've only made modifications to existing content to move the Dart Panel to the top of the screen instead of the bottom and add my logo on the right side of the panel.

Here's my problem...every widget displays normally except the Add Data widget. I've attached two images here as an example. One is from the standard Dart Theme and the other is from my modification. For some reason the widget isn't respecting the styling and instead is going entirely white on many of the div tags that are needed to use the widget.

I don't want to modify the CSS of a given app. I want to figure out the root cause so that when I create new apps i don't have to fix the styling every time or copy/paste the bandaided file.The CSS file for this widget is gigantic and I'm assuming that something has been lost in translation from the original Dart Theme to my customized offshoot.

[RobertScheitlin__GISP · Accepted solution]

Brain,

   You are not going to get around customizing css for your needs. If you look in the AddData widget style.css you will find 55 lines of CSS that deal specifically with the dart theme. You will need to override these css rules in some manner. You may be able to override them in your themes style.css as it has a higher specificity/priority then the widgets style.css.

[BrianCollins]

Thanks for the prompt reply Robert! I stepped away from the problem and tried to rethink a simple fix. Since we don't actually want/need the default Dart Theme, I removed that, renamed my theme to DartTheme, updated the appropriate reference names in a few config files and boom!...it works! Somewhere in the CSS it obviously references the specific theme name and/or URI paths. I think this will work for us for our WAB Developer environment.

[RobertScheitlin__GISP]

Yes the AddData widget has those 55 specific Dart theme css rules that will be ignored if your custom theme does not have the Dart name.