label and dash component side by side

谁说我不能喝 提交于 2021-02-08 02:12:18

问题


I am using Dash. One of the thing I want to do is have a label and slider side by side. The following code render this. What can I do the the code so that the slider label and the slider shows up side by side. Thanks.

                                    html.Div(
                                    [
                                        html.Label("First Slider"),
                                        dcc.RangeSlider(
                                            id="my-range-slider",
                                            # label="Slider 1",
                                            min=0,
                                            step=0.01,
                                            max=1,
                                            value=[0.2, 0.8],
                                            marks={0: "0", 1: "1"},
                                            allowCross=False,
                                        ),
                                    ],
                                    className="rows",
                                ),
                                html.Div(
                                    [
                                        html.Label("Second Slider"),
                                        dcc.RangeSlider(
                                            id="my-range-slider1",
                                            # label="Slider 1",
                                            min=0,
                                            step=0.01,
                                            max=1,
                                            value=[0.2, 0.8],
                                            marks={0: "0", 1: "1"},
                                            allowCross=False,
                                        ),
                                    ],
                                    className="rows",
                                ),

回答1:


Flexbox will get that done easily. Make each of the containing divs have style=dict(display='flex'), and just make sure there's enough horizontal room.



来源:https://stackoverflow.com/questions/63515531/label-and-dash-component-side-by-side

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!