We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Angular Bootstrap UI Modal behind Ribbon

When using the Bootstrap Ui modal dialog, the dialog appears behind the ribbon.
I've attached a file with an image showing this issue.


Attachment: modalbehindribbon_5019ceb8.zip

1 Reply

KN Kavitha Narayanan Syncfusion Team January 15, 2016 10:41 AM UTC

Hi Antonio,

Thanks for contacting Syncfusion support.

Query: When using the Bootstrap UI modal dialog, the dialog appears behind the ribbon.

We had achieved your requirement using Z-index property in the following code were we set Z-index as ‘0’ while opening the Bootstrap dialog.

<input type="button" value="click to open Bootstrapdialog" onclick="clickthis(this)">

function clickthis(e)


                $('.e-active-content').css("z-index","0");//set z-index value here

                BootstrapDialog.alert('BootstrapDialog'); //BootstrapDialog used here


Please refer to the sample and screenshot:

Sample: http://www.syncfusion.com/downloads/support/forum/121661/ze/sample719001309.zip

Kavitha N.

Live Chat Icon For mobile
Up arrow icon