Search code examples
palantir-foundryfoundry-slate

How can I fully hide a widget in Slate using CSS?

I have a container widget that is placed positionally on top of a code sandbox widget that I want to conditionally hide.

I have set the container widget CSS property of display to none by applying a conditional class on the container widget. This class is applied via the ‘Additional CSS Classes’ panel in the container widget configuration, as well as listening to state change on the code sandbox widget. This class sets the CSS property of display to none on the widget.

{{#if w_widget1.state.hideContainer}}
hidden
{{/if}}

When I do this, the container widget is hidden, yet it is still clickable. How can I fully hide my widgets using conditional classes set in this manner?

code as entered into input pannel in Slate

Clickable empty widget in Slate

Solution

  • Slate has a wrapper element called sl-app-widget for the widget elements. This and any other wrapper elements must be set to hidden for your widget to be fully hidden from the page. It is good practice to open chrome developer tools to inspect on which exact HTML element the hidden conditional class is set, and to check whether the parent elements are hidden also.

    The has psuedo class on CSS is very useful for selecting parent elements. An example implementation in the styles window:

    sl-app-widget:has(div.widget-wrapper > div.hidden) {
    height: 0px !important;
    display: none;
}

    Note the has pseudo-selector has full support in all browsers except for Firefox. In Firefox, it is marked as experimental and hidden behind a feature flag, more information here: https://developer.mozilla.org/en-US/docs/Web/CSS/:has#browser_compatibility