I have tried all different kinds of styling, col width, etc, and cannot get the icon to display next to the textarea - only above or below it. What am I doing wrong?
import dash_bootstrap_components as dbc
from dash_iconify import DashIconify
import dash
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container([
dbc.Row([
dbc.Col([
DashIconify(icon="material-symbols:info-outline-rounded"),
dbc.Textarea()
], width=4)
])
])
if __name__ == '__main__':
app.run_server(debug=True)
Hi @anarchocaps
Try putting the icon and the textarea in seperate columns in the row. If you set width="auto"
then column will be sized according to the width of its content.
Setting className="g-0"
removes the gutters between the columns.
Here’s a complete example:
import dash_bootstrap_components as dbc
from dash_iconify import DashIconify
from dash import Dash
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container(
[
dbc.Row(
[
dbc.Col(
DashIconify(icon="material-symbols:info-outline-rounded"),
width="auto",
),
dbc.Col(dbc.Textarea()),
],
className="g-0",
)
]
)
if __name__ == "__main__":
app.run_server(debug=True)

For anyone using dash-mantine-components
it would look like this:
import dash_mantine_components as dmc
from dash_iconify import DashIconify
from dash import Dash, html
app = Dash(__name__)
app.layout = dmc.Container(
[
dmc.Group(
[
DashIconify(icon="material-symbols:info-outline-rounded"),
html.Textarea(),
],
position="left",
noWrap=True,
spacing="xs",
)
]
)
if __name__ == "__main__":
app.run_server(debug=True)
1 Like