Utilizing React Bootstrap, I have a full screen Modal with Tabs in its body. Within one of these Tabs, I aim to create a Lexical Editor that fills 100% of the width and height of the modal body with some margin.
This is a simplified version of my code:
From the tabs
<Tabs defaultActiveKey="description" className="mt-3">
<Tab className="text-center m-5 h-100" eventKey="description" title={t("exposition.description")}>
<TextEditor t={t} />
</Tab>
</Tabs>
From the text editor
<LexicalComposer initialConfig={initialConfig} className="h-100">
<RichTextPlugin
contentEditable={<ContentEditable className="h-100" />}
placeholder={
<div className="h-100">{t("editor.placeholder")}</div>
}
ErrorBoundary={LexicalErrorBoundary}
/>
</LexicalComposer>
The source code can be found here.
I attempted setting everything to h-100, but it was ineffective. Subsequently, I experimented with adding CSS3 to .tab-pane and .tab-content, yet determining the correct percentage for the height proved challenging due to device variability, making it non-responsive. I also explored the solution provided in this related question.