Ribbon blocking Bootstrap Modal

[Nate Greene]

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]

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-index: 1;   // set z-index value here   

        }    

   

    </style>   

  

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

  

Sample:  http://www.syncfusion.com/downloads/support/forum/127748/ze/RibbonSample-351117003  

 

  

Regards,   

Buvana S