✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🧬 Learn how to build RNA-Seq data apps with Python & Dash. Register for the May 20 Webinar!

Multiple CSS classes in Dropdown

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