Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Style for wrapped dcc-components #193

Open
jorgenherje opened this issue Dec 13, 2021 · 1 comment
Open

Style for wrapped dcc-components #193

jorgenherje opened this issue Dec 13, 2021 · 1 comment
Labels
bug Something isn't working

Comments

@jorgenherje
Copy link
Collaborator

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.

  • ISSUE: Spacing between label and RadioItems:
    image

  • WANTED: Spacing above label and below RadioItems:
    image

@jorgenherje jorgenherje added the bug Something isn't working label Dec 13, 2021
@jorgenherje
Copy link
Collaborator Author

NOTES from #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 #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

@anders-kiaer anders-kiaer moved this to Backlog 📝 in Webviz Jan 9, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
Status: Backlog 📝
Development

No branches or pull requests

1 participant