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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Angular Bootstrap UI Modal behind Ribbon

Thread ID:





121661 Jan 14,2016 10:41 AM UTC Jan 15,2016 10:41 AM UTC JavaScript 1
Tags: ejRibbon
Antonio Terron
Asked On January 14, 2016 10:41 AM UTC

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

Kavitha Narayanan [Syncfusion]
Replied On 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.


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon