在 dbc.Card 中拉伸并固定 dbc.Textarea 的高度

Question

我用 dbc.Card

创建了一个简单的布局

但是，由于 dbc.Card 组件未拉伸到与相邻卡片相同的高度，因此 dbc.Textarea 也未拉伸。

如何自动将一张卡片的高度拉伸到与其相邻卡片相同的高度？

另外，当我改变文本区域的长度时，卡片的高度也会改变。通过固定文本区域的高度，我也想固定卡片的高度。

有没有办法固定文本区域的高度？

谢谢。

这是我的源代码。

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)

补充修改

关于第二个文本区域问题，我想阻止用户改变文本区域的高度。通过允许用户更改高度，将无法匹配卡片的高度，如下所示。

更具体地说，我想使用下图中文本区域右下角的图标禁用高度更改功能。或者我想阻止用户使用它。

Answer 1

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

您可以通过将函数 create_text_card() 返回的卡片内容的 CSS 属性 height 设置为 100% 来实现。这会将其高度设置为其垂直可用的整个白色间距（即与相邻卡片的高度相同）。

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

是的，您将 textarea 组件的 resize 属性设置为 none 以禁用调整 textarea 组件的大小。如果您想要固定值，则使用像素值，否则，使用百分比来指示文本区域高度应相对于卡片内容高度的多少。

示例：

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

编辑

是的，您将 textarea 组件的 resize 属性设置为 none 以禁用调整 textarea 组件的大小。

示例：

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

在 dbc.Card 中拉伸并固定 dbc.Textarea 的高度

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

python-3.x

bootstrap-4

plotly-dash

补充修改