Popup validator hidden

Radzen.Blazor Components
1

I have a RequiredValidator that is set to popup. When it pops, it is underneath an edit box below it. Is this normal? I followed the documentation and set the edit box to "display: block" and the validator to "position: absolute" and it's showing up behind the edit box below it. You can barely see the red triangle, and the body is completely under the next text edit box. Why is this?

image
image807×260 15 KB

Here's the razor:

<div class="row align-items-center" style="margin-bottom: 1rem">
   <div class="col-3" style="padding-left: 0px; padding-right: 0px">
      <RadzenLabel Component="lanGWTextBox" style="text-align: right; width: 100%" Text="LAN GW IP Address">
            </RadzenLabel>
   </div>
   <div style="padding-left: 15px; padding-right: 15px">
      <RadzenTextBox style="display: block; width: 135px" @bind-Value="@(networkSettings.lanGW)" Name="LanGWTextBox" Change="@LanGwTextBoxChange"></RadzenTextBox>
      <RadzenRequiredValidator Component="LanGWTextBox" Popup="true" style="position: absolute" Text="Cannot be empty!">
      </RadzenRequiredValidator>
   </div>
</div>
<div class="row align-items-center" style="margin-bottom: 1rem">
   <div class="align-items-center d-flex  col-3" style="padding-left: 0px; padding-right: 0px">
      <RadzenLabel Component="ntpServerTextBox" style="text-align: right; width: 100%" Text="NTP Server IP Addresses">
      </RadzenLabel>
   </div>
   <div class="col-6">
      <RadzenTextBox style="display: block; width: 100%" @bind-Value="@(networkSettings.timeServers)" Name="NtpServerTextBox" Change="@NtpServerTextBoxChange">
      </RadzenTextBox>
   </div>
   <RadzenIcon Icon="help_outline" MouseEnter="@Icon0MouseEnter" MouseLeave="@Icon0MouseLeave">
   </RadzenIcon>
</div>
2

The div below that is on top of the validator. Do you want the validator to appear on top of other controls?

If yes set the position of both <div class="row"> to relative and the z-index of the first to some value e.g. 1.

<div class="row align-items-center" style="margin-bottom: 1rem; position: relative; z-index:1">
</div>
<div class="row align-items-center" style="margin-bottom: 1rem; position: relative">
</div>

This would lead to:

image
image1124×252 13.5 KB

Otherwise increase the bottom margin so there is enough room for the validator to appear.

<div class="row align-items-center" style="margin-bottom: 48px;">
</div>

image
image894×348 13 KB

3

Ah, z-index! Yes, this works! So if I had a series of fields, in a series of rows....for the popup to appear on top no matter what...I would have to assign a ever increasing order of z-index to ensure the box from above is always on top of the row below it? As I recall, the default z-index order is the later html elements have a higher index than the previous, which is backwards from what I would need.

Thank you for the help!

PS: Is the z-index adjustable from the Radzen property/style panel aside from using an attribute?

4

It is indeed backwards. And to add insult to injury z-index does not work by default - it needs position to be set too.

Yes, you can set style to a Row component via custom attribute:

image
image702×590 20.4 KB

5

I ended up using the CSS :has selector to conditionally add extra space for the popup when an input in the row is invalid.

form .row:has(input.invalid) { margin-bottom: 46px; }

Hope this helps anyone else that doesn't want the overlapping from z-index or increased row spacing when not invalid.

1 Like
6

Thanks for the tip @John_Miller! We should also mention that the :has() pseudo-class is still not supported by default in all major browsers (Firefox), so before using it, make sure your target browser supports it: