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.
Unfortunately, activation email could not send to your email. Please try again.

Ribbon blocking Bootstrap Modal

Thread ID:

Created:

Updated:

Platform:

Replies:

127748 Dec 6,2016 10:38 AM Dec 8,2016 07:21 AM ASP.NET MVC 1
loading
Tags: Ribbon
nate greene
Asked On December 6, 2016 10:38 AM

Hey Guys,

I have been using the Ribbon components but have run into some issues with it blocking modals that exist in the layout page(see screenshot). I tried to change the z-index of the modal and it didnt work. but when I call the PivotGrib condition format popup it renders properly in front of the Ribbon as far as I can tell this only effects the Modals. How can I fix this?
Ribbon code from View
 @(Html.EJ().Ribbon("defaultRibbon")
     .Width("100%")
     .RibbonTabs(tab =>
     {
         tab.Id("save").Text("SAVE/LOAD").TabGroups(tabgrp =>
         {
             tabgrp.Text("Save Report / Load Report").AlignType(RibbonAlignType.Rows).Content(cnt =>
             {
                 cnt.ContentGroups(cntgrp =>
                 {
                     cntgrp.Id("saveReport").Text("Save").ButtonSettings(new Syncfusion.JavaScript.Models.ButtonProperties()
                     {
                         ContentType = ContentType.TextOnly,
                         Click = "saveReportModalClick"
                     }).Add();
                     cntgrp.Id("loadReport").Text("Load").ButtonSettings(new Syncfusion.JavaScript.Models.ButtonProperties()
                     {
                         ContentType = ContentType.TextOnly,
                         Click = "loadReportModalClick"
                     }).Add();
                 }).ContentDefaults(df => df.Type(RibbonButtonType.Button).Width("50px").Height("70px")).Add();
             }).Add();
         }).Add();
         tab.Id("format").Text("FORMAT").TabGroups(tabgrp =>
         {
             tabgrp.Text("Conditional Formatting").AlignType(RibbonAlignType.Rows).Content(cnt =>
             {
                 cnt.ContentGroups(cntgrp =>
                 {
                     cntgrp.Id("applyFormat").Text("Apply").ButtonSettings(new Syncfusion.JavaScript.Models.ButtonProperties()
                     {
                         ContentType = ContentType.TextOnly,
                         Click = "ApplyChanges"
                     }).Add();
                     cntgrp.Id("resetFormat").Text("Reset").ButtonSettings(new Syncfusion.JavaScript.Models.ButtonProperties()
                     {
                         ContentType = ContentType.TextOnly,
                         Click = "Reset"
                     }).Add();
                 }).ContentDefaults(df => df.Type(RibbonButtonType.Button).Width("50px").Height("70px")).Add();
             }).Add();
         }).Add();
         tab.Id("export").Text("EXPORT").TabGroups(tabgrp =>
         {
             tabgrp.Text("Export").AlignType(RibbonAlignType.Rows).Content(cnt =>
             {
                 cnt.ContentGroups(cntgrp =>
                 {
                     cntgrp.Id("excelExport").Text("Excel").ButtonSettings(new Syncfusion.JavaScript.Models.ButtonProperties()
                     {
                         ContentType = ContentType.TextOnly,
                         Click = "exportExcelBtnClick"
                     }).Add();
                     cntgrp.Id("wordExport").Text("Word").ButtonSettings(new Syncfusion.JavaScript.Models.ButtonProperties()
                     {
                         ContentType = ContentType.TextOnly,
                         Click = "exportWordBtnClick"
                     }).Add();
                     cntgrp.Id("pdfExport").Text("Pdf").ButtonSettings(new Syncfusion.JavaScript.Models.ButtonProperties()
                     {
                         ContentType = ContentType.TextOnly,
                         Click = "exportPdfBtnClick"
                     }).Add();
                 }).ContentDefaults(df => df.Type(RibbonButtonType.Button).Width("50px").Height("70px")).Add();
             }).Add();
         }).Add();
         tab.Id("filter").Text("FILTER").TabGroups(tabgrp =>
         {
             tabgrp.Text("Select Filters").AlignType(RibbonAlignType.Rows).Content(cnt =>
             {
                 cnt.ContentGroups(cntgrp =>
                 {
                     cntgrp.Id("filterData").Text("Filter By").ButtonSettings(new Syncfusion.JavaScript.Models.ButtonProperties()
                     {
                         ContentType = ContentType.TextOnly,
                         Click = "fieldListModalClick"
                     }).Add();
                 }).ContentDefaults(df => df.Type(RibbonButtonType.Button).Width("70px").Height("70px")).Add();
             }).Add();
         }).Add();
     })
        )
Modal From Layout
 <div class="modal fade bootstrap-modal" id="loadReportModal" tabindex="-1" role="dialog" aria-labelledby="loadReportModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="loadReportModalLabel">Select a Report</h4>
                </div>
                <div class="modal-body">
                    <div>
                        <label>LoadReport:  </label>
                        <input id="loadreport" type="text" />
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Any help will be greatly appreciated.

Thanks,

Nate

Attachment: ribbonOverModal_f2878f02.zip

Buvana Sathasivam [Syncfusion]
Replied On December 8, 2016 07:21 AM

Hi Nate,   
  
Thanks for using Syncfusion product.   
  
We have achieved your requirement using ‘Z-index’ property in the following code.  We have set ‘Z-index’ as ‘1’while opening the Bootstrap dialog. Also, prepared a simple sample with Ribbon and bootstrap dialog.  Please check the following code and sample.   
  
   
// created button to open bootstrap dialog   
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#loadReportModal">   
     Click to Open Bootstrap dialog   
</button>   
   
   
<div class="modal fade bootstrap-modal" id="loadReportModal" tabindex="-1"role="dialog" aria-labelledby="loadReportModalLabel" aria-hidden="true">   
        <div class="modal-dialog">   
            <div class="modal-content">   
                <div class="modal-header">   
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>   
                    <h4 class="modal-title" id="loadReportModalLabel">Select a Report</h4>   
                </div>   
                <div class="modal-body">   
                    <div>   
                        <label>LoadReport:  </label>   
                        <input id="loadreport" type="text" />   
                    </div>   
                </div>   
                <div class="modal-footer">   
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>   
                </div>   
            </div>   
        </div>   
    </div>   
   
    <script>   
         $('#loadReportModal').on('show.bs.modal'function () {   
             $('.e-active-content').css("z-index""1");//set z-index value here   
         })   
    </script>   
  
Note:    show.bs.modal – This event fires immediately when the show instance method is called.  If caused by a click, then the clicked element is available as the relatedTarget property of the event.   


  
Or else we can specify ‘z-index’ as ‘1’ which is set to ribbon active content and ribbon backstage page.  Please refer the following code.   
  
<style>   
     .e-ribbon .e-active-content.e-ribbon .e-ribbonbackstagepage   
            z-index1;   // set z-index value here   
        }    
   
    </style>   


  
In below sample, we can use ‘z-index’ as ‘1’ while opening the bootstrap dialog.   
  
 
  
Regards,   
Buvana S   
  


CONFIRMATION

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.

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.

;