Bootstrap modals inside a RadWizardStep on an iPad

[Ken]

Hi Telerik!

I have a radWizard I'm using, and one of the wizardSteps has a user control which uses several Bootstrap modals.

Everything works wonderfully on PC, Android, etc - except iPad. When the page is loaded on an iPad, the wizard changes to rendermode="mobile", that all works fine.

However, when I launch any Bootstrap modal whose code is within a wizardStep, the screen is disabled and the content is shown only within the radstep content container (see photo).

Again, this only happens on iPad - works fine on everything else.

My code is structured like this:

Page pseudocode:

<radWizard>
    <radStep>
        content
    </radStep>

    <radStep>
        <myUserControl>
        </myUserControl>
    <radStep>

    <radStep>
        content
    </radStep>
<radWizard>




myUserControl pseudocode:


<myUserControl>
    <button>Show Bootstrap Modal</button>

    <div id='bootstrapModal' class='modal'>
        My modal content
    </div>

</myUserControl>

 

iPad iOS version: 10.1

Thank you!

 

[Ken]

I also just noticed that my Cancel button is unresponsive in the same wizard too (Next/Previous work fine).

[Veselin Tsvetanov]

Hello Chris,

You may find it useful to consult the following forum thread that discusses possible issues, when using Bootstrap modals. Please note, that the Telerik ASP.NET AJAX suite and Bootstrap Modals integration has not been tested and it is not officially supported.

One more thing. I would suggest you to test the same scenario, but without Bootstrap Modals. If you still encounter the same issues, I would recommend you to prepare and sent us an isolated runnable sample, so we will be able to troubleshoot the problem locally.

Regards,
Veselin Tsvetanov
Telerik by Progress