Search code examples
c#cssblazorblazor-webassemblymudblazor

MudBlazor MudTabs --> Tab Content Height

I am trying to setup a MudBlazor MudTab panel. I'm struggling to figure out how I can make the tab's content have a height of 100%.

I put together this chunk of test code to demonstrate the issue I am having:

<div style="height: 50vh; width: 50vw; padding: 5px; border: 2px solid blue;">

  <MudTabs Rounded="true" Centered="true" PanelClass="pa-6" Style="height: 100%; border: 2px solid red;">

    <MudTabPanel Text="Messages">

      <div style="height: 100%; border: 2px solid green;">

        <textarea style="height: 100%; width: 100%;">@Output</textarea>

      </div>

    </MudTabPanel>

  </MudTabs>

</div>


@code {

  String Output = String.Format("qqqq \n wwww \n eeee \n rrrr \n tttt");

}

I want the textarea to take up 100% of the space. Any suggestions on how I can accomplish this would be greatly appreciated! :)

Solution

  • MudTabs is a flexbox, so you can use the flex-grow-1 css utility class on the PanelClass property.

    <div style="height: 50vh; width: 50vw; padding: 5px; border: 2px solid blue;">
  <MudTabs Rounded="true" Centered="true" PanelClass="pa-6 flex-grow-1" Style="height:100%; border: 2px solid red;">
    <MudTabPanel Text="Messages" >
      <div style="height: 100%; border: 2px solid green;">
        <textarea style="height: 100%; width: 100%;">@Output</textarea>
      </div>
    </MudTabPanel>
  </MudTabs>
</div>

    MudBlazor Snippet