Feature Request: Add 'visible' attribute to both dcc and html components

[SterlingButters]

Self-explanatory from the title. Would be much easier, I think, than a callback-function that returns an html.Div object.

[nicolaskruchten]

Seconded! Right now unless I'm mistaken there are three-ish ways to "hide" something:

1. Remove it from the layout: can cause problems with callback chains
2. Style a parent element (e.g. a parent div) with display: none
3. (if the component has its own style and/or className) style the component itself with display: none

Having a visibility attribute in all components would be a nice way to gloss over the differences in component APIs (i.e. style vs className) and would allow for very clear callbacks to control visibility, that aren't also enmeshed with other styling.

[ned2]

Rather than introducing a custom Dash attribute that then needs to be mapped onto a CSS style, I think it would be better to use plain CSS to style components to begin with. There is already the visibility CSS property for this, and the already mentioned display:none.

The problem as I think @nicolaskruchten alluded to is that not all Dash Core Components support a style attribute. In particular, the following dcc components are missing them: Dropdown, Slider, RangeSlider, Markdown.

Further to this, DatePickerSingle and DatePickerRange are also missing the className property, as reported in https://github.com/plotly/dash-core-components/issues/67.

I think the more general solution is to require that Dash Core Components have both style and className properties. I've found the lack of support for style by some of these components frustrating in the past.

[nicolaskruchten]

I think that @ned2's solution would be good in any case (standardizing style and className everywhere) but I would still advocate for a broken-out visibility or hidden attribute/prop for two reasons:

1. Showing/hiding elements is such a common thing to do that we want to make it as easy as possible, without forcing non-front-end developers to have to learn CSS (e.g. the differences between visibility and display and the interactions between different classes, or mixtures of style/class etc) just to hide an element.
2. My feeling is that although CSS can be used to control both visual presence and visual styling, most developers conceive of the logic for controlling these in a decoupled way: one callback for visibility, and another for conditional styling. For example if you're using a callback today to hide an element with style then that same callback has to restore the original style when unhiding, which mixes concerns. One could of course style with className and show/hide with style but then I refer to my point above :)

A visibility attribute could just cause the component to render as an empty span tag, so it's still in the DOM and callback chains, but has no impact on layout, so it wouldn't touch the component's style or class attributes, it would control visibility outside the component itself at the Dash level.

[imsrgadich]

Any update on this? Thank you.

[nwheatle]

I am also wishing for the ability to hide a RangeSlider. Does anyone know how to get around this, or have an example? Depending on the nature of the data loaded, I want to either show a Dropdown containing all unique integer values, or if there are more than x values (too many), a RangeSlider with min and max integers selected.

[gvwilson]

Hi - this issue has been sitting for a while, so as part of our effort to tidy up our public repositories I'm going to close it. If it's still a concern, we'd be grateful if you could open a new issue (with a short reproducible example if appropriate) so that we can add it to our stack. Cheers - @gvwilson