Hi,
I am building over the Financial Report template but facing issue in applying CSS to dropdown.
At #1 in code below, when I apply both offset and column size, only column size works. When I apply only offset, then it works. How can I apply both to control spacing and size of my dropdown?
html.Div(
[
html.Div(
[
html.Div(
(
dcc.Dropdown(id='company_1',
options=[
{'label': 'ABBOTT LABORATORIES', 'value': 'ABT'},
],
value='ABT'
)
),className="offset-by-two column four columns" #1
),
html.Div(
(
dcc.Dropdown(id='company_2',
options=[
{'label': 'AMERICAN EXPRESS CO', 'value': 'AXP'},
],
value='AXP'
)
), className="offset-by-one column four columns"
),
],
className="row",
),
],
className="row ",
),
Hi @saboo.anuj17
Try it this way, so the main/first Div is where you put your code on offset-by-…
app.layout = html.Div([
html.Div([
html.Div([
dcc.Checklist(id='recycling_type',
options=[{'label':str(b),'value':b} for b in sorted(df['type'].unique())],
value=[b for b in sorted(df['type'].unique())],
),
], className='three columns'
),
html.Div([
blabla....
)
], className='nine columns'
),
], className='row'
),
], className='ten columns offset-by-one'
)
Hi @adamschroeder, I tried what you advised(code below) but there is no change in the UI. Note that I have two dropdowns in the same row, the idea is to offset both of them and control the size to arrange the layout on the page.
html.Div(
[
html.Div(
[
html.Div(
[
dcc.Dropdown(id='company_1',
options=[
{'label': 'ABBOTT LABORATORIES', 'value': 'ABT'},
],
value='ABT'
)
],className="five columns"
),
html.Div(
[
dcc.Dropdown(id='company_2',
options=[
{'label': 'ABBOTT LABORATORIES', 'value': 'AXP'},
],
value='AXP'
)
], className="five columns"
),
],
className="row",
),
],
className="offset-by-two columns",
),
do you have your css form inside the assets folder. And the assets folder in the same folder where your .py file is?
I have 4 CSS files inside the assets folder, one of them containing the following content along with other. Note that if I apply offset-by-two columns three columns, then size becomes three. If I only apply offset-by-two columns, then I do get the desired result. When I try to apply both, only column size works.
@media (min-width: 550px) {
.container {
width: 80%;
}
.column,
.columns {
margin-left: 4%;
}
.column:first-child,
.columns:first-child {
margin-left: 0;
}
.one.column,
.one.columns {
width: 4.66666666667%;
}
.two.columns {
width: 13.3333333333%;
}
.three.columns {
width: 22%;
}
.four.columns {
width: 30.6666666667%;
}
.five.columns {
width: 39.3333333333%;
}
.six.columns {
width: 48%;
}
.seven.columns {
width: 56.6666666667%;
}
.eight.columns {
width: 65.3333333333%;
}
.nine.columns {
width: 74%;
}
.ten.columns {
width: 82.6666666667%;
}
.eleven.columns {
width: 91.3333333333%;
}
.twelve.columns {
width: 100%;
margin-left: 0;
}
.one-third.column {
width: 30.6666666667%;
}
.two-thirds.column {
width: 65.3333333333%;
}
.one-half.column {
width: 48%;
}
/* Offsets */
.offset-by-one.column,
.offset-by-one.columns {
margin-left: 8.66666666667%;
}
.offset-by-two.column,
.offset-by-two.columns {
margin-left: 17.3333333333%;
}
.offset-by-three.column,
.offset-by-three.columns {
margin-left: 26%;
}
.offset-by-four.column,
.offset-by-four.columns {
margin-left: 34.6666666667%;
}
.offset-by-five.column,
.offset-by-five.columns {
margin-left: 43.3333333333%;
}
.offset-by-six.column,
.offset-by-six.columns {
margin-left: 52%;
}
.offset-by-seven.column,
.offset-by-seven.columns {
margin-left: 60.6666666667%;
}
.offset-by-eight.column,
.offset-by-eight.columns {
margin-left: 69.3333333333%;
}
.offset-by-nine.column,
.offset-by-nine.columns {
margin-left: 78%;
}
.offset-by-ten.column,
.offset-by-ten.columns {
margin-left: 86.6666666667%;
}
.offset-by-eleven.column,
.offset-by-eleven.columns {
margin-left: 95.3333333333%;
}
.offset-by-one-third.column,
.offset-by-one-third.columns {
margin-left: 34.6666666667%;
}
.offset-by-two-thirds.column,
.offset-by-two-thirds.columns {
margin-left: 69.3333333333%;
}
.offset-by-one-half.column,
.offset-by-one-half.columns {
margin-left: 52%;
}
}
Hi @adamschroeder, was able to find the issue due to a CSS overwride. Commented the following in the template style to make offsetting work.
.columns {
margin-left: 0 !important;
}
1 Like