I'm building an app in Experience Builder for a client who wants to style out-of-the-box widgets as much as possible and avoid custom components for t

[AndrewAlbers]

I'm building an app in Experience Builder for a client who wants to style out-of-the-box widgets as much as possible and avoid custom components for the sake of maintainability. For example: here's an out-of-the-box filter (on the left) compared to the same filter with styling and style.scss provided by a custom theme:

 The style.scss code for the filter relies on identifying descendants of the widget's data-widgetid:

div[data-widgetid="widget_116"] .filter-items-container,
div[data-widgetid="widget_116"] .filter-item,
div[data-widgetid="widget_116"] .filter-item-inline {
  border: none;
  overflow: visible;
}
div[data-widgetid="widget_116"] .filter-item-icon, div[data-widgetid="widget_116"] .filter-item-name {
  display: none;
}
div[data-widgetid="widget_116"] .overflow-auto {
  overflow: visible !important;
}
div[data-widgetid="widget_116"] .switch-slider {
  height: 20px;
  width: 50px;
  color: var(--light);
  background: var(--primary);
  border-radius: 10px;
  overflow: visible;
}
div[data-widgetid="widget_116"] .jimu-switch:not(.checked)::after {
  content: "2023";
  margin: auto;
  font-size: medium;
}
div[data-widgetid="widget_116"] .checked .jimu-switch::after {
  content: none;
  font-size: medium;
}
div[data-widgetid="widget_116"] span.jimu-switch.checked::before {
  position: absolute;
  width: 50px;
  content: "2019";
  padding-left: 10px;
  font-size: medium;
}
div[data-widgetid="widget_116"] span.switch-slider {
  text-align: center;
  font-size: medium;
}
div[data-widgetid="widget_116"] .switch-slider::before {
  content: "2019";
}
div[data-widgetid="widget_116"] .checked .switch-slider {
  background: var(--primary);
  color: var(--light);
}
div[data-widgetid="widget_116"] .checked .switch-slider::before {
  content: "2023";
}
div[data-widgetid="widget_116"] .jimu-switch {
  width: 100px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: var(--light-200);
}
div[data-widgetid="widget_116"] .checked .switch-slider {
  margin-left: 50px;
}

I think I can match the client's desired mockup pretty closely with pure CSS this way, but I worry since these data-widgetid values are related to the order in which widgets are added to the experience. That means deleting and re-creating a widget is going to necessitate updating the CSS selectors in style.scss.

Is there any better way to select specific widgets with css than the way I'm doing it? Is there any other attribute that could be used as a css selector?  Ideally it'd be nice if widgets could be selected via css using the name given to them in the outline, but this doesn't seem to affect anything in the app DOM.

[AndrewAlbers]

Whoops, accidentally posted this before giving it a title. Is there no way to edit / delete posts?

[KatiePhillips_ODNR]

Click on "Post Options" for the original post. You should see the option to edit.

[AndrewAlbers]

Hmm, sadly I do not see an edit option in either options drop-down. Do I need to ask my admin for more privileges I wonder?

 

[KatiePhillips_ODNR]

Hmm, I'm sorry maybe you do. 

[JeffreyThompson2]

Powers on ESRI Community are granted by the ESRI Community Managers. Your GIS Administrator has no control over this site. To your actual question...

The way I see it you have three choices:

1. Try to get hyper specific using css combinators to target your elements without needing to use the widget_id. https://www.w3schools.com/css/css_combinators.asp
2. Get less specific with your css and accept that all the sliders in your application will have this styling.
3. Make a custom widget, so you can name your own css classes.

Be aware that ESRI has been replacing more and more of their elements with the Calcite design system which makes it very difficult to target their components with css, so in terms of long-term maintenance, a custom widget may be the easiest option.