Dash CSS - offset columns

Dash Python
1

Hey,

Wondering if anybody has examples of the using the offset-by-x classes from the Dash stylesheet?

These aren’t working as I expected and some examples would be nice to help me understand!

Thanks!

2

Sure!

 html.Div("div content", className='my-container eight columns offset-by-four') )

Works like a charm.

If you look at the sample css in the docs,

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
...
 .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }

You can see that the offset css selector looks for items which have both the offset-by-x class and the column or columns class while the column width selector looks for items with both the x and the columns class.

Thus my example works because the resulting object has the three classes eight columns offset-by-four. It could just as well have had them listed as columns offset-by-four eight, if you yoda-grammar mind not.

3

An HTML/CSS newbie question:
Why the selectors use multiple class names .two.columns instead of a single one two-columns?