Plotly中的列问题-使用自定义CSS划线
Plotly中的列问题-使用自定义CSS划线
提问于 2021-07-01 22:19:10
下面的代码应该会在一个名为Setup的选项卡中产生三个相邻的下拉菜单，但实际上，我得到了三个下拉菜单，一个在另一个的顶部。
我做错了什么？任何帮助都将不胜感激！我已经包含了相关的Python代码，然后是我的所有CSS代码。请注意，show_layout函数最终由index.py中的app.layout调用。
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from app import app
from styles import cma_tab_style, active_cma_tab_style
def show_layout():
layout = html.Div([
dcc.Tabs(id='AllTabs',
value='SetupTab',
children=[
dcc.Tab(label='Setup',
value='SetupTab',
style=cma_tab_style,
selected_style=active_cma_tab_style),
dcc.Tab(label='Summary',
value='SummaryTab',
style=cma_tab_style,
selected_style=active_cma_tab_style)
]),
html.Div(id='content')
], style={'marginTop': '30px'})
return layout
@app.callback(Output('content', 'children'),
Input('AllTabs', 'value'))
def render_content(tab):
if tab == 'SetupTab':
content = html.Div(render_setup_tab())
else:
content = html.Div([
html.H3('Tab content 2')
])
return content
def render_setup_tab():
layout = html.Div(
children=
[
html.Div(
[
dcc.Dropdown(
id='the_assets',
options=[{'label': x, 'value': x} for x in ('Asset 1', 'Asset 2')],
style={'marginTop': '15px', 'background': 'black', 'color': 'black'},
placeholder='Asset Name')
], className='four columns'),
html.Div(
[
dcc.Dropdown(
id='cma_data',
style={'marginTop': '15px', 'backgroundColor': 'black', 'fontColor': 'white'},
placeholder='CMA Data',
)
], className='four columns'),
html.Div(
[
dcc.Dropdown(
id='cma_gen',
style={'marginTop': '15px', 'backgroundColor': 'black', 'fontColor': 'white'},
placeholder='Gen Profile'
)
], className='four columns'),
], className='row')
return layout至于cma_tab_style和active_cma_tab_style
cma_tab_style = {
'borderBottom': '1px solid #d6d6d6',
'backgroundColor': 'rgb(80, 80, 80)',
'color': 'white',
'borderTop': '1px solid white',
}
active_cma_tab_style = {
'borderBottom': '1px solid #d6d6d6',
'backgroundColor': 'rgb(255,145,0)',
'color': 'white',
'borderTop': '1px solid white',
}下面是我所有的CSS代码--以防有什么东西引起了麻烦：
body{
background-color: rgb(33, 33, 33);
font-family: 'arial';
}
h3{
font-color: white;
}
li{
display: block;
float: center;
border: 1px solid gray;
border-right: 1px solid rgb(200, 200, 200);
}
li a{
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
border: 1px solid gray;
}
.active .btn:hover{
background-color: orange;
color: white;
}
.ul:hover{
background-color: orange;
}
li a:active{
background-color: orange;
}
a{
display: inline-block;
padding: 8px;
background-color: (250, 250, 250)
}
a:hover{
background-color: orange;
}
.active{
background-color: rgb(60, 60, 60);
}
.VirtualizedSelectFocusedOption{
background-color: lightgrey;
color: black
}
button{
border-radius: 5px;
background-color: rgb(60, 60, 60);
border: none;
color: white;
text-align: center;
font-size: 16px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px
}
button span{
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
button span:after{
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}回答 1
Stack Overflow用户
发布于 2021-07-01 22:42:42
已解决:我没有使用className = "four columns"，而是在我的CSS中添加了以下代码片段：
.stuff{
float: left;
justify-content: space-between;
width: 33%;
}
.row:after{
content: "";
display: table;
clear: both;
}并设置className = "stuff"
希望这对其他遇到类似问题的人有所帮助！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68211910
复制相关文章
相似问题
腾讯云开发者
