Stretch and fix the height of dbc.Textarea in dbc.Card

user_16860162 0
Viewed 673

I created a simple layout with dbc.Card

enter image description here

However, since the dbc.Card component is not stretched to the same height as the adjacent card, the dbc.Textarea is not stretched either.

How can I automatically stretch the height of a card to the same height as its adjacent cards?

Also, when I change the length of the text area, the height of the card also changes. By fixing the height of the text area, I want to fix the height of the card as well.

Is there a way to fix the height of the text area?

Thank you.

here is my source code.

import dash
from dash import dcc, html
import dash_bootstrap_components as dbc
import plotly.express as px
from dash.dependencies import Input, Output
import plotly.graph_objects as go
import numpy as np

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

N = 10
x = np.random.rand(N)
y = np.random.rand(N)

def get_go_graph():
    fig = go.Figure(go.Scatter(x=x, y=y))
    fig.update_layout(
        width=450,
        height=330,
        margin=dict(
            l=0,
            r=0,
            b=0,
            t=0,
            pad=4
        ),
        paper_bgcolor="LightSteelBlue")
    return fig

def create_graph_card():
    card_content = dbc.Card(
        [
            dbc.CardHeader(html.Div("graph card header")),
            dbc.CardBody(dcc.Graph(figure=get_go_graph(),className='h-100 mx-auto'),),
        ],
        #style={"width": "35rem"}
    )
    return card_content

def create_text_card():
    card_content = dbc.Card(
        [
            dbc.CardHeader("text card header"),
            dbc.CardBody(dbc.Textarea(placeholder="This is text area.", style={"width": "100%", "height": "100%",}),),
        ],
        #style={"width": "5rem"}
    )
    return card_content


app.layout = html.Div(
    [
        dbc.Row(
            [
                dbc.Col(create_graph_card()),
                dbc.Col(create_graph_card()),
                dbc.Col(create_text_card()),
            ],
            style={"padding": "1rem 1rem"},
        ),
        dbc.Row(
            [
                dbc.Col(create_graph_card()),
                dbc.Col(create_graph_card()),
            ],
            style={"padding": "0rem 1rem"},
        ),
    ],
    style={"height": "100vh"},
)

if __name__ == "__main__":
    app.run_server(debug=True)

Supplement and modification

Regarding the second text area issue, I would like to prevent the user from changing the height of the text area. By allowing the user to change the height, it will not be possible to match the height of the cards as shown below.

enter image description here

To be more specific, I would like to disable the height change function using the icon placed in the lower right corner of the text area in the image below. Or I would like to prevent users from using it.

enter image description here

bootstrap-4 plotly-dash python-3.x
1 Answers

How can I automatically stretch the height of a card to the same height as its adjacent cards?

You do this by setting the CSS attribute height of the card content that is returned by the function create_text_card() to 100%. This will set its height to the entire white spacing it has available vertically (ie. The same height as the adjacent card).

Is there a way to fix the height of the text area?

Yes, you set the resize attribute of the textarea component to none to disable the resizing of the textarea component. If you want a fixed value then use pixel values, otherwise, use percentages to indicate how much the textarea height should be relative to the card content height.

Example:

def create_text_card():
    card_content = dbc.Card(
        [
            dbc.CardHeader("text card header"),
            dbc.CardBody(
                dbc.Textarea(
                    placeholder="This is text area.",
                    style={"width": "100%", "height": "50 px"} # MODIFIED CODE
                )
            ),
        ],
        style={"height":"100%"} # NEW CODE
    )
    return card_content

EDIT

Yes, you set the resize attribute of the textarea component to none to disable the resizing of the textarea component.

Example:

def create_text_card():
    card_content = dbc.Card(
        [
            dbc.CardHeader("text card header"),
            dbc.CardBody(dbc.Textarea(placeholder="This is text area.", style={"width": "100%", "height": "50 px", "resize": "none"}),),
        ],
        style={"height":"100%"}
    )
    return card_content
user_87073370
Related