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

Css – How to make TitleContent fixed/sticky position

I have this dialog in MudBlazor that has a vertical overflow because it is larger than the max-height. I would like to keep this max-height, the only thing I was wondering if possible is if the title content can stay visible when scrolling through the dialog like a fixed/sticky header would in a table. I am fairly new to blazor and have had no luck with my research.

<MudDialog>
    <TitleContent>
        <MudText Style="float:left"><b>dummy code</b></MudText>
        <MudText Style="float:right"><b>dummy code</b></MudText>
    </TitleContent>
    <DialogContent>
    </DialogContent>
<MudDialog>

I tried wrapping a div around it to use CSS but no luck. I also tried putting it in the style itself of the MudText. Is this even possible due to it being a dialog?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found what I was looking for. Turns out I can put classTitle in the MudDialog like this,

    <MudDialog TitleClass="nameOfClass"></MudDialog>

    and this is how I can style it in CSS. I did not know this is how it works in MudBlazor glad I learned though!


  2. 0

    Use MudPaper in the DialogContent:

    <MudDialog>
    <TitleContent>
        <MudText Style="float:left"><b>dummy code</b></MudText>
        <MudText Style="float:right"><b>dummy code</b></MudText>
    </TitleContent>
    <DialogContent>
        <MudPaper Class="d-flex flex-column overflow-x-auto" Height="100vh">
           Your Content
        </MudPaper>
    </DialogContent>
<MudDialog>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search