Iconify icon will not display next to Textarea

Dash Python
1

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)
3

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)

image

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