Question 244174 in CSS Question posted in
Some basic documentation can be found here.

Css – Filling the height in Tabs react-bootstrap

I am using React Bootstrap.
I have got a full screen Modal and in its body it has got a and .
I one of these Tabs I want to create a Lexical Editor, the editor should fill the 100% of the width and the height of modal body (with some margin).

This is my simplified 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 full code

As you can see, I tried to put everything with h-100. But it didn’t work.
Then I tried adding some CSS3 on the .tab-pane and .tab-content but the correct percentage for the height varies depending on the device, so it’s not responsive.
I also tried the solution from this question

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I first tried with this CSS class but it didn't work:

    .tab-content {
    height: calc(100% - 6rem);
}

    Looks like I had an h-100 in the placeholder so, I had two h-100. What means that I was using the 200% of the height, what caused page overflow.

    I expect that this Q&A will be useful for someone.


  2. 0

    The "h-100" class in Bootstrap adjusts the height of an element to 100% of its parent’s height. For instance, if you set a wrapper’s height to 20rem and apply the "h-100" class to its children, those children will inherit a height of 20rem. However, it’s important to note that this class only affects the direct child elements, not the descendants further down the hierarchy. Therefore, you should also apply the "h-100" class to each level of children as needed. In this specific case, you should apply the "h-100" class to the TextEditor component.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search