search

equinor / webviz-core-components

Discipline agnostic Webviz and Dash components.
https://github.com/orgs/equinor/projects/24
MIT License
15 stars 16 forks source link

Style for wrapped dcc-components #193

Open jorgenherje opened 2 years ago

jorgenherje commented 2 years ago

Style argument does not work properly for wrapped components.

dcc (dash-core-components) are wrapped and placed in webviz_core_components/wrapped_components-folder. For wrapped components with label argument, the html.Label is first child in children list, and the wrapped component is appended afterwards. The style argument does not handle styling properly, as they seem to be appended to the wrapped component only.

Example: For wrapped wcc.RadioItems the html.Label is added if provided, and thereafter the dcc.RadioItems is added to childrens list. If style={"margin-top": "10px", "margin-bottom": "10px"} is provided, the margin-top setting is applied on the dcc.RadioItems, which introduce spacing between label and radio items.

jorgenherje commented 2 years ago

NOTES from https://github.com/equinor/webviz-core-components/issues/221

I have registered two problems with the label of SelectWithLabel:

  1. It is not possible to change the label in a callback
  2. If you hide the component with style={"display": "none"}, then the component is hidden, but the label is still there.

I would assume this is an example of same issue reported in https://github.com/equinor/webviz-core-components/issues/193

The component from dash-core-components ( dcc) is placed within a html.Div together with a html.Label, but the **kwargs are only passed to the Select component. Thus all styling will only affect the Select and not the html.Label.

Similar issues yield for other wrapped dcc components