Radzen DatePicker and Blazored Modal

[Maasaki]

Hi guys,

I am using blazor server side, and for create modal(dialog) i am using the blazored modal, but when i am try to use datepicker inside the modal. It opens but the datepicker be unclickable, it opens the ui-datepicker, but i cant select any date or write anything

When i use datepicker outside the modal, its work fine.

[korchev]

Hi @Maasaki,

We are not familiar with the Blazored modal implementation. All we know is that the datepicker works as expected in the Radzen Blazor Dialog.

[Maasaki]

I tried to use the radzen dialog, but I was unable to make the save buttons work correctly (Save or Cancel)

[Dino_Novak]

I am experiencing similar behavior, with most of Radzen controls in disabled state and Dropdowns not populating. in "Radzen.Blazor" Version="2.1.23" all worked OK

I am creating a modal dialog in following way

    if (showDialog1)
    {
        <div class="modal modal-backdrop" style="display:block" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">@modalTitle</h5>
                        <button type="button" class="close" @onclick="closeModal">
                            <span aria-hidden="true">X</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form>
                        <!-- dialog content with controls -->
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-block btn-success" @onclick="@(() => SaveCertificate())" data-dismiss="modal">Save</button>
                    </div>
                </div>
            </div>
        </div>
    }

[Dino_Novak]

Ok,
managed to drill down more on the issue. Looks like when modal is done in such a way, when control is clicked it is opened in background (behind modal), so it cant be clicked.
Here is example of datepicker

[Dino_Novak]

iz looks like z-index issue,
fixing it in css

/* RADZEN MODAL FIXES*/
.ui-datepicker {
    z-index: 2000 !important;
}

.ui-dropdown-panel {
    z-index: 2000 !important;
}