Style text inputs, checkboxes, toggle buttons and range sliders.
Text inputs can be styled with a combination of CSS variables and selectors:
.ag-theme-alpine {
--ag-borders-input: dashed 2px !important;
--ag-input-border-color: red !important;
}
.ag-theme-alpine .ag-text-field-input {
background-image: linear-gradient(to right, white, #fc8d62) !important;
}
.ag-theme-alpine .ag-text-field-input::placeholder {
color: red !important;
font-weight: bold;
}
The following example shows the result using the CSS style defined above. Note that the grid is editable, try to modify
a cell to see how the style is also applied. You can also see the result on the menu of the columns.
import dash_ag_grid as dag
from dash import Dash, html
import pandas as pd
app = Dash(__name__)
df = pd.read_csv(
"https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)
columnDefs = [
{"field": "athlete"},
{"field": "age"},
{"field": "country"},
{"field": "year"},
]
app.layout = html.Div(
[
dag.AgGrid(
id="styling-inputs-text-inputs",
rowData=df.to_dict("records"),
columnDefs=columnDefs,
defaultColDef={'resizable': True, 'filter': True, "floatingFilter": True, 'editable': True},
dashGridOptions={'suppressMenuHide': True},
columnSize="sizeToFit",
)
]
)
if __name__ == "__main__":
app.run(debug=True)
The CSS variables relevant to styling text inputs are:
CSS Variable | Description |
---|---|
<p>--ag-borders-input <p><p>CSS border style and sizer - like ‘solid 1px’ or ‘none’<p> |
<p>Draw borders around inputs. Set this to a border style and thickness, for example <code>solid 1px<code> to enable borders, or <code>none<code> to disable borders.<p> |
<p>--ag-input-border-color <p><p>CSS color - like ‘red’ or ‘#fff’<p> |
<p>Color for borders around inputs, if enabled with <code>‑‑ag‑borders‑input<code>.<p> |
<p>--ag-borders-input-invalid <p><p>CSS border style and sizer - like ‘solid 1px’ or ‘none’<p> |
<p>Draw borders around inputs when their content has failed validation. Set this to a border style and thickness, for example <code>solid 2px<code> to enable borders. Set to <code>none<code> to disable borders but ensure that you have added styles to differentiate invalid from valid inputs.<p> |
<p>--ag-input-border-color-invalid <p><p>CSS color - like ‘red’ or ‘#fff’<p> |
<p>The color for the border around invalid inputs, if enabled with <code>‑‑ag‑borders‑input‑invalid<code>.<p> |
<p>--ag-invalid-color <p><p>CSS color - like ‘red’ or ‘#fff’<p> |
The color applied to form elements in an invalid state. |
<p>--ag-input-disabled-border-color <p><p>CSS color - like ‘red’ or ‘#fff’<p> |
The border around disabled text inputs. |
<p><code>‑‑ag‑input‑disabled‑background‑color<code><p><p>CSS color - like ‘red’ or ‘#fff’<p> | The background color of disabled text inputs. |
<p>--ag-input-focus-box-shadow <p><p>CSS box-shadow value - like ‘0 5px 10px black’<p> |
The box shadow around focussed inputs. |
<p>--ag-input-focus-border-color <p><p>CSS color - like ‘red’ or ‘#fff’<p> |
<p>Color of the border around focussed inputs. Set to <code>var(‑‑ag‑input‑border‑color)<code> if you do not want to change the border color on focus.<p> |
The default styles of the grid disable the browser’s native checkbox widget and create a custom appearance using icon
fonts.
See the Custom Icons at Global Level documentation for
how to replace the checkbox icons - the icons used
are checkbox-checked
, checkbox-unchecked
, checkbox-indeterminate
.
The colors can be controlled using the following CSS Variables:
.ag-theme-alpine {
--ag-checkbox-background-color: rgb(209, 255, 123) !important;
--ag-checkbox-checked-color: #66c2a5 !important;
--ag-checkbox-unchecked-color: darkred !important;
--ag-checkbox-indeterminate-color: #fc8d62 !important;
}
import dash_ag_grid as dag
from dash import Dash, html
import pandas as pd
app = Dash(__name__)
df = pd.read_csv(
"https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)
columnDefs = [
{
"field": "athlete",
"checkboxSelection": True,
"headerCheckboxSelection": True,
},
{"field": "age", "sort": "desc"},
{"field": "country", "sort": "asc"},
{"field": "year"},
]
selectedRows = [
{'athlete': 'Mark Todd', 'age': 56, 'country': 'New Zealand', 'year': 2012, 'date': '12/8/2012',
'sport': 'Equestrian', 'gold': 0, 'silver': 0, 'bronze': 1, 'total': 1},
{'athlete': 'Mac Cone', 'age': 55, 'country': 'Canada', 'year': 2008, 'date': '24/08/2008',
'sport': 'Equestrian', 'gold': 0, 'silver': 1, 'bronze': 0, 'total': 1},
{'athlete': 'Ian Millar', 'age': 61, 'country': 'Canada', 'year': 2008, 'date': '24/08/2008',
'sport': 'Equestrian', 'gold': 0, 'silver': 1, 'bronze': 0, 'total': 1}
]
app.layout = html.Div(
[
dag.AgGrid(
id="styling-inputs-checkboxes",
rowData=df.to_dict("records"),
columnDefs=columnDefs,
defaultColDef={'resizable': True},
selectedRows=selectedRows,
dashGridOptions={"rowSelection": "multiple"},
columnSize="sizeToFit",
)
]
)
if __name__ == "__main__":
app.run(debug=True)
Radio Buttons, such as those in the chart settings UI, are specialised checkboxes. They respond to the same color
variables as demonstrated above. They use the radio-button-on
and radio-button-off
icons.
Toggle Buttons, such as the “Pivot Mode” toggle in the above example, are specialised checkboxes. They respond to the
same checkbox color variables. In addition, they expose a few more variables for advanced customisation:
CSS Variable | Description |
---|---|
<p>--ag-toggle-button-border-width <p><p>CSS length - like ‘0’, ‘4px’ or ‘50%’<p> |
Size of the toggle button outer border. |
<p>--ag-toggle-button-on-border-color <p><p>CSS color - like ‘red’ or ‘#fff’<p> |
Color of the toggle button outer border in its ‘on’ state. |
<p>--ag-toggle-button-off-border-color <p><p>CSS color - like ‘red’ or ‘#fff’<p> |
Color of the toggle button’s outer border in its ‘off’ state. |
<p>--ag-toggle-button-on-background-color <p><p>CSS color - like ‘red’ or ‘#fff’<p> |
Color of the toggle button background in its ‘on’ state. |
<p>--ag-toggle-button-off-background-color <p><p>CSS color - like ‘red’ or ‘#fff’<p> |
Color of the toggle button background in its ‘off’ state. |
<p><code>‑‑ag‑toggle‑button‑switch‑background‑color<code><p><p>CSS color - like ‘red’ or ‘#fff’<p> | Color of the toggle button switch (the bit that slides from left to right). |
<p>--ag-toggle-button-switch-border-color <p><p>CSS color - like ‘red’ or ‘#fff’<p> |
Border color of the toggle button switch (the bit that slides from left to right). |
<p>--ag-toggle-button-width <p><p>CSS length - like ‘0’, ‘4px’ or ‘50%’<p> |
Width of the whole toggle button component. |
<p>--ag-toggle-button-height <p><p>CSS length - like ‘0’, ‘4px’ or ‘50%’<p> |
Height of the whole toggle button component. |
<br>