AutoQuery Popup Position

1

Hi Guys,

I have a page with a Header bar in Blazor using Mudblazor. When I do a new entry using AutoQuery then the popup is underneath the header bar.

Is there a way to control the position of the AutoQuery popup ?

image
image767Ă—948 17.6 KB

2

The easiest way would be to use some custom css to target the dialog to use a higher z-index than whatever’s over the top of it now, e.g:

[role=dialog] {
 z-index: 100 !important;
}

Otherwise you can override the Form component AutoQueryGrid uses with <CreateForm> and <EditForm> elements, here are a few Admin pages in blazordiffusion.com that make use of it:

And here are the AutoForm Components that AutoQueryGrid uses by default:

<AutoCreateForm @ref="AutoCreateForm" Model="Model" ApiType="Apis!.Create" Done="OnNewDone" Save="OnNewSave" />

<AutoEditForm @ref="AutoEditForm" Model="Model" Edit="EditModel" ApiType="Apis!.Patch ?? Apis!.Update" DeleteApiType="Apis!.Delete" Done="OnEditDone" Save="OnEditSave" Delete="OnEditSave" />

All ServiceStack.Blazor components should also class="..." attribute you can use to add your own classes.

3

Thanks @myth.

I’m using the standard booking app as an example. Therefor the popups are all the implied ones. My questions is therefor applicable to all the implied popups. I do not have seperate AutoCreateforms. I agree with using the razor.css z-index but would the razor.css still be applicable to these implied popups if I make sense.

<AutoQueryGrid Model="Booking" 
               Apis="Apis.AutoQuery<QueryBookings,CreateBooking,UpdateBooking,DeleteBooking>()"
               AllowSelection="true" AllowFiltering="true"
               HeaderSelected="OnSelectedHeader" RowSelected="OnSelectedRow">

    <Columns>
        .......
    </Columns>
</AutoQueryGrid>
4

I’m referring to the AutoQueryGrid’s built in dialogs, they can’t be modified, only overridden with <CreateForm> and <EditForm> elements where you can replace it to use your own.

5

Thanks @myth, got it;))

I would like to use the implied popups. I think my only option will be then to hide the header bar whenever the popup shows. Any event that’s available in AutoQueryGrid before a popup occurs ?

6

Did the custom [role=dialog] css class not work?

There’s no event, but the URL changes to include a ?new or ?edit QueryString param for Create/Edit Forms, so you should be able to handle when NavigationManager changes and check its QueryString.

7

No it’s not working for me.

8

@Johan try with quotes, this works for me:

[role="dialog"] {
   z-index: 100 !important;
}
9

Hi @layoric

Thanks. I tried everything can’t seem to get it working. I added a link to a minimal repo. Would be great if you can have a look as I must say integrating SS with tailwind into Mudblazor is no easy task at all and Mudblazor is the biggest open source UI for Blazor. I ran the sample on Opera browser as Chrome gave me all sorts of issues with signin in and this is almost a standard SS template.

Mudblazor_Tailwind.zip

10

@Johan It looks like MudBlazor has a z-index range of the toolbar of 1300-1400. You can tell this by looking at the CSS in your web developer tools.

image
image1823Ă—486 46.2 KB

You can click or hover on CSS variables to show their value set:

image
image1841Ă—634 66 KB

We can see a series of zindex variables, each with 100 between them, so you can control your custom elements between those numbers.

image
image1822Ă—428 46.8 KB

In this case, if we change the style to 1350, the dialog will show above the appbar.

<style>
 [role="dialog"] {
    z-index: 1350 !important;
 }
</style>

You can place the above in the same place as your example. Something also good to keep in mind with CSS is the order of imports can also impact which style wins, !important being a last resort. In this case, we don’t need the !important:

<style>
 [role="dialog"] {
    z-index: 1350;
 }
</style>

image
image1853Ă—579 28.8 KB

Hope that helps!

11

Thanks @layoric.

I have used a value of 10,000 in the Blazor.razor.css file and still when I use this with 10000 or 1350 it does not work.

image
image1468Ă—299 20.3 KB

when I apply the style in _Layout.cshtml
< link href=“MudblazorTailwind.styles.css” rel=“stylesheet” />

Looking at my debug window you can see that the css file gets included in the download but the style is not getting applied.

If I however use it in the style tag of the razor view then it does work. My bad I should have checked the style tag also for correct value.

No idea why the css isolation in Blazor does not work in this instance with SS when you use Bookings.razor.css.

Anyway you’re a star. Thanks for the help !!

1 Like