diff --git a/src/lib/flexbox.css b/src/lib/flexbox.css new file mode 100644 index 00000000..22c66455 --- /dev/null +++ b/src/lib/flexbox.css @@ -0,0 +1,12 @@ +div.webviz-core-components-flexbox { + display: flex; + flex-wrap: wrap; + max-width: 90vw; +} + +/* Select direct children of a flexbox instance, + and set e.g. default min-width on them */ +div.webviz-core-components-flexbox > * { + flex: auto; + min-width: 300px; +} diff --git a/src/lib/index.js b/src/lib/index.js index 48b5b943..1ff1bbb4 100644 --- a/src/lib/index.js +++ b/src/lib/index.js @@ -2,4 +2,6 @@ import WebvizPluginPlaceholder from "./components/WebvizPluginPlaceholder.react"; import ColorScales from "./components/ColorScales.react"; +import "./flexbox.css" + export { WebvizPluginPlaceholder, ColorScales }; diff --git a/webviz_core_components/flexbox.py b/webviz_core_components/flexbox.py index 3c70bdca..a651da5c 100644 --- a/webviz_core_components/flexbox.py +++ b/webviz_core_components/flexbox.py @@ -7,39 +7,17 @@ class FlexBox(html.Div): """Behaves like Div from dash_html_components, but extends that container with - flexbox style settings. It also adds necessary flex CSS settings to its children. - - Other style settings are untouched. + flexbox style settings. It also adds min-width CSS style to direct children. """ def __init__(self, *args, **kwargs): - def container_style(old_style): - style = {} if old_style is None else copy.deepcopy(old_style) - style.update({"display": "flex", "flexWrap": "wrap"}) - return style - - def update_children_style(children): - if children is not None: - for child in children: - style = ( - copy.deepcopy(child.style) if hasattr(child, "style") else {} - ) - - style["flex"] = style.get("flex", "auto") - - if "min-width" not in style and "minWidth" not in style: - style["minWidth"] = "250px" - - child.style = style - - return children - - args, kwargs = argument_modifier( - html.Div, "style", container_style, args, kwargs - ) + def add_flexbox_css_class(className): + return ( + "" if className is None else className + " " + ) + "webviz-core-components-flexbox" args, kwargs = argument_modifier( - html.Div, "children", update_children_style, args, kwargs + html.Div, "className", add_flexbox_css_class, args, kwargs ) super().__init__(*args, **kwargs)