Z-Index Bootstrap Modal <object> layering problem [Answered]RSS

7 replies

Last post Feb 03, 2017 04:20 PM by adamturner34

‹ Previous Thread|Next Thread ›

Shortcuts

- Reply
adamturner34
Contributor

2853 Points

1372 Posts

Z-Index Bootstrap Modal <object> layering problem

Feb 01, 2017 05:51 PM|adamturner34|LINK

Hello all,

I have an object element that's sitting on top of everything. My dropdown menu's hide behind it. My bootstrap modal's hide behind it.

I've spent more than 2 days now scouring the internet changing z-indexes and positions with no luck.

Is there an easy fix to just place the <object> behind everything?

Appreciated any feedback,

Adam Turner
- Reply
mgebhard
All-Star

37211 Points

15032 Posts
Re: Z-Index Bootstrap Modal <object> layering problem

Feb 01, 2017 06:07 PM|mgebhard|LINK
It's helpful if you post source code and describe the steps you've tried so far. According to MDN z-index is not a property of the object element.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object

According to flash blogs/forums add the following param and set the z-index of the elements you want on top of the object.
```
<param name="wmode" value="transparent">
```
https://css-tricks.com/snippets/html/keep-flash-behind-other-elements/
- Reply
bruce (sqlwo...
All-Star

50854 Points

12095 Posts

Re: Z-Index Bootstrap Modal <object> layering problem

Feb 01, 2017 10:39 PM|bruce (sqlwork.com)|LINK

generally an <object> tag creates a window in front the browser window, so no html can be in front (flash has some workarounds). in this case you need to create a new window infront of the object. you can just use an <iframe> to do this. so when you display a dropdown, you create, size and position and iframe in the correct spot, then render the dropdown or modal html and css in the iframe. delegate events back up to the parent frame.

hint: in the old days, in IE a <select> was its own window and the same technique was required. you can still find these examples.

another less elegant technique is to hide the object when the dropdown or modal are required.

bruce (sqlwork.com)
- Reply
Eric Du
Contributor

6680 Points

2715 Posts
Re: Z-Index Bootstrap Modal <object> layering problem

Feb 02, 2017 07:17 AM|Eric Du|LINK
Hi adamturner34,

According to your description, as far as I know, if you want to fixed the element at the bottom of the screen, please set the element position value to absolute. Also add !important.

code:
```
.image
{position:absolute;
z-index:-1 !important;
}
```
Also I hope you could post all code you have done for us to test, this will better help you solve the problem.

Best Regards,

Eric Du
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

adamturner34

Contributor

2853 Points

1372 Posts

Re: Z-Index Bootstrap Modal <object> layering problem

Feb 02, 2017 02:47 PM|adamturner34|LINK

I don't know how much this will help but here is all of the code:

I have a Master Page that houses the menu which hides behind the WinFormsDocumentView in the content below. The bootstrap modal popups also hide behind the WinFormsDocumentView. Is there a way to just tell the browser to put everything on top the WinFormsDocumentView without a complete redesign of the page?

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPMIN.master.cs" Inherits="MasterPMIN" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link href="Content/font-awesome.min.css" rel="stylesheet" />
    <script src="packages/jQuery.3.1.1/Content/Scripts/jquery-3.1.1.min.js"></script>
    <script src="packages/bootstrap.3.3.7/content/Scripts/bootstrap.min.js"></script>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <script src="js/UseWebServices.js"></script>
    <link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css">
    <script src="js/jquery.dataTables.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            function onSuccess(result, textStatus, sXMLHttpRequest) {
                populateMenu(sXMLHttpRequest.responseText);
            }
            function onError(sXMLHttpRequest, textStatus, errorThrown) { alert("Exception occured while getting XML Data. " + errorThrown); };
            function onComplete(result, textStatus) { };
            getXML(onSuccess, onError, onComplete);

            $('.navbar-lower').affix({
                offset: { top: 50 }
            });

            //GetQueueStatus();
        });

        function DisableBackSpace() {
            if (window.event.keyCode == 8) {
                window.event.keyCode = 0;
                event.returnValue = false;
            }
        }

        function populateMenu(data) {
            var ID;
            var ONCLICK;
            var TEXT;
            var htmlMenu = '';
            var MODAL = '';
      
            $(data).find('MAIN').find('MAIN_MENU_ITEM').each(function () {
                if ($(this).find('SUB').find('SUB_MENU_ITEM').length > 0) {
                    htmlMenu += "<li class='dropdown'>";
                    htmlMenu += '<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">' + $(this).find('TEXT').first().text()
                    htmlMenu += '<span class="caret"></span></a>';
                    htmlMenu += '<ul class="dropdown-menu">';

                    $(this).find('SUB').find('SUB_MENU_ITEM').each(function () {
                        ID = $(this).find('ID').first().text();
                        htmlMenu += '<li id = "' + ID + '">';
                        ONCLICK = $(this).find('ONCLICK').first().text();
                        htmlMenu += '<a onclick = "' + ONCLICK + '" ' + MODAL + '>'
                        TEXT = $(this).find('TEXT').first().text();
                        htmlMenu += TEXT + "</a></li>";
                    })
                    htmlMenu += '</ul></li>'
                }

                else {
                    ID = $(this).find('ID').first().text();
                    htmlMenu += '<li id = "' + ID + '">';
                    
                    ONCLICK = $(this).find('ONCLICK').first().text();
                    MODAL = $(this).find('MODAL').first().text();

                    if (MODAL.length > 0) {
                        htmlMenu += '<a href="#" onclick = "' + ONCLICK + '" ' + MODAL + '>';
                    }
                    else {
                        htmlMenu += '<a href = "' + ONCLICK + '">';
                    }
                    
                    TEXT = $(this).find('TEXT').first().text();
                    htmlMenu += TEXT + "</a></li>";
                }
            });
            $('#MenuCell').append(htmlMenu);
        }

        function getXML(onSuccess, onError, onComplete) {
            $.ajax({
                type: 'GET',
                url: 'XML/PMPROCESSING.xml',
                dataType: 'xml',
                success: function (data, textStatus, sXMLHttpRequest) {
                    onSuccess(data, textStatus, sXMLHttpRequest);
                },
                error: function (sXMLHttpRequest, textStatus, errorThrown) {
                    onError(sXMLHttpRequest, textStatus, errorThrown);
                },
                complete: function (sXMLHttpRequest, textStatus) {
                    onComplete(sXMLHttpRequest, textStatus);
                }
            });
        }
        function UserKeyPressed() {
            if (window.event.keyCode == 13) {
                if ($('#CatRoleModal').hasClass('in')) {
                    $('#btnCategoryOK').click();
                }
                if ($('#QueueResultModal').hasClass('in')) {
                    $('#btnResultsOK').click();
                }
            }
        }

        function GetQueueStatus() {
            function onSuccess(result, textStatus, sXMLHttpRequest) {
                ShowResult(result.responseText);
            }
            function onError(sXMLHttpRequest, textStatus, errorThrown) { alert("Exception occured while getting queue status. " + errorThrown); };
            function onComplete(result, textStatus) { };

            CallAjaxWebService("asmx/MWW.asmx", "wsGetWebEnvironmentConfiguration", { "ApplicationID": "SYSADM", "SessionToken": "xxx" }, onSuccess, onError, onComplete);
        }

        function ShowResult(result) {
            var xml = result.value[2];
            alert(xml);
            $('WORKFLOW_FILTERS', xml).each(function () {
                var value = $(this).attr('NAME');
                var label = $(this).attr('DESCRIPTION');
                $('#ddlMasterQueue').append("<option value='" + value + "'>" + label + "</option>");
            });
        }
    </script>

    <style>
        body {
            margin-top: 50px;
        }

        .divide-nav {
            padding-top: 10px;
            height: 50px;
        }

        .divide-text {
            padding: 15px 0;
        }

        .affix {
            top: 50px;
            width: 100%;
        }

        .filler {
            min-height: 2000px;
        }

        .navbar-form {
            padding-left: 0;
        }

        .navbar.navbar-default .collapse.in {
            display: block !important;
        }

        .container-full {
            margin: 0 auto;
            width: 100%;
        }

        label {
            font-weight: normal !important;
        }

        .navbar {
            /*background-image: url("../images/main_nav_blue_fill.gif");  
            background-image: url("../images/main_nav_blue_rt_cap.gif");*/
            /*images/main_nav_blue_rt_cap.gif*/
        }
    </style>
    <title></title>

    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body onkeyup="UserKeyPressed()";>
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container container-full">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">DAWPM Processing</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul id="MenuCell" class="nav navbar-nav">
                </ul>
            </div>
        </div>
    </nav>
    <div class="divide-nav">
        <div class="container container-full">
            <fieldset>
                <div class='row'>
                    <div class='col-sm-4 text-left'>
                        <div class='form-group'>
                            <form class="form-inline">
                                <label for="ddlMasterQueue" class="control-label">Selection</label>
                                <select class="form-control" id="ddlMasterQueue">
                                    <option value="BDD_PNDQUE">BDD Pend Queue</option>
                                    <option value="BDD_INQUE">BDD In Queue</option>
                                </select>
                                <button type="submit" class="btn btn-primary"><i class="fa fa-search"></i>   Search</button>
                                <button type="submit" class="btn btn-primary"><i class="fa fa-folder-open"></i>   Open</button>
                                <input type="checkbox" class="custom-control-input">
                                <button type="submit" class="btn btn-primary"><i class="fa fa-times"></i>   Close</button>
                            </form>
                        </div>
                    </div>
                    <div class='col-sm-4 text-center'>
                        <div class='form-group'>
                            <form class="form-inline">
                                <label for="contents" class="control-label">Contents</label>
                                <select class="form-control" id="contents">
                                    <option selected>Choose...</option>
                                    <option value="1">One</option>
                                    <option value="2">Two</option>
                                    <option value="3">Three</option>
                                </select>
                                <button type="button" class="btn btn-default">
                                    <span class="glyphicon glyphicon-triangle-left"></span>
                                </button>
                                <button type="button" class="btn btn-default">
                                    <span class="glyphicon glyphicon-triangle-right"></span>
                                </button>
                            </form>
                        </div>
                    </div>
                    <div class='col-sm-4 text-right'>
                        <div class='form-group'>
                            <form class="form-inline">
                                <button type="submit" class="btn btn-primary"><i class="fa fa-trash"></i>   <u>D</u>elete</button>
                                <button type="submit" class="btn btn-primary"><i class="fa fa-reply"></i>   <u>R</u>eject</button>
                                <button type="submit" class="btn btn-primary"><i class="fa fa-pause"></i>   <u>P</u>end</button>
                                <button type="submit" class="btn btn-primary"><i class="fa fa-hand-paper-o"></i>   <u>H</u>old</button>
                                <button type="submit" class="btn btn-primary"><i class="fa fa-arrow-right"></i>   <u>F</u>orward</button>
                            </form>
                        </div>
                    </div>
                </div>
            </fieldset>

        </div>
    </div>


    <asp:ContentPlaceHolder ID="body" runat="server">
    </asp:ContentPlaceHolder>

</body>
</html>

Here is the content:

<%@ Page Title="" Language="C#" AutoEventWireup="true" MasterPageFile="~/MasterPMIN.master" CodeFile="MWWPMProcessing.aspx.cs" Inherits="MWWPMProcessing" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server" onload="onPageLoad();" onunload="clearViewer();">
    <script>
        var mSessionId = '<%=Server.UrlEncode(Request.QueryString["SESSION_TOKEN"])%>';
        var mUserId = '<%=_curUserId %>';

        $(document).ready(function () {
        });

        function CategoryRolePopupData() {
            function onSuccess(data, textStatus, sXMLHttpRequest) {
                var xml = sXMLHttpRequest.responseText;
                $('#hdnCategoryXml').val(xml);
                LoadCategoryDDL();
                $('#ddlCategory').focus();
            }

            function onComplete(result, textStatus) {

            }

            function onError(sXMLHttpRequest, textStatus, errorThrown) {
                alert("Exception occured while retrieving retrieving categories. " + errorThrown);
                window.close();
            }
            if ($('#hdnCategoryXml').val().length == 0) {
                CallAjaxWebService("asmx/PMPROCESSING.asmx", "GetCategoryRoleData", { "profileName": mUserId }, onSuccess, onError, onComplete);
            }
        }

        function LoadCategoryDDL() {
            var xml = $('#hdnCategoryXml').val();
            $('#ddlCategory').empty();
            $('CATEGORY', xml).each(function () {
                var value = $(this).attr('NAME');
                var label = $(this).attr('NAME');
                $('#ddlCategory').append("<option value='" + value + "'>" + label + "</option>");
            });
            selCat_OnChange();
            
        }

        function selCat_OnChange() {
            $('#ddlRole').empty();
            var catName = $('#ddlCategory').val();
            var xml = $('#hdnCategoryXml').val();

            var catXML = $('CATEGORY[NAME="' + catName + '"]', xml);
            $(catXML).each(function () {
                $('DAWPM_ROLE', this).each(function () {
                    var value = $(this).attr('XREF_ID');
                    var label = $(this).attr('NAME');
                    $('#ddlRole').append("<option value='" + value + "'>" + label + "</option>");
                });
            });
        }

        function ShowQueueResults() {
            $('#CatRoleModal').modal('hide');
            $('#QueueResultModal').modal('show');
        }

        function GetQueueResults() {
            function onSuccess(data, textStatus, sXMLHttpRequest) {
                var xml = sXMLHttpRequest.responseText;
                BuildQueueTable(xml);
            }

            function onComplete(result, textStatus) {
            }

            function onError(sXMLHttpRequest, textStatus, errorThrown) {
                alert("Exception occured while retrieving retrieving queue results. " + textStatus);
                window.close();
            }

            var xmlFilter = "<FILTER><LOCATION>BDD_INQUE</LOCATION>" +
                "<PROPERTYSET NAME=\"SEARCH_CRITERIA\">" +
                "<PROPERTIES>" +
                "<PROPERTY NAME=\"STATUS\">~~STATUS=0 OR (STATUS=1 AND VS_USER='SYSADM')</PROPERTY>" +
                "<PROPERTY NAME=\"CATEGORY\">" + $('#ddlCategory option:selected').text() + "</PROPERTY>" +
                "<PROPERTY NAME=\"DAWPM_ROLE\">" + $('#ddlRole option:selected').text() + "</PROPERTY><PROPERTY NAME=\"RANK\" SORT_ORDER=\"0\"></PROPERTY>" +
                "</PROPERTIES>" +
                "</PROPERTYSET><LIMIT>0</LIMIT><SKIP></SKIP></FILTER>";
            
            CallAjaxWebService("asmx/PMPROCESSING.asmx", "jqSearchWorklist", { "p_ApplicationId": "PMPROCESSING", "p_SessionToken": mSessionId, "p_Filter": xmlFilter }, onSuccess, onError, onComplete);
        }

        function BuildQueueTable(xml) {
            var tbl = '<table id=\'tblQueueResults\' class=\'dawpmTable\'>';
            tbl += '<thead><tr>';
            $('TITLE', xml).each(function () {
                tbl += '<td>';
                tbl += $(this).text();
                tbl += '</td>';
            });

            tbl += '</tr></thead>';
            tbl += '<tbody>';
            
            $('RECORD', xml).each(function () {
                tbl += '<tr rowid = ' + $(this).attr('ROWID') + '>';
                $('FIELD', this).each(function () {
                    tbl += '<td>';
                    tbl += $(this).text();
                    tbl += '</td>';
                });
                tbl += '</tr>';
            });
            
            tbl += '</tbody>';
            tbl += '</table>';
            
            $('#divQResults').html(tbl);
            $('#tblQueueResults').dataTable({
                "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
                scrollY: 550,
                scrollX: 1000,
            });

            $('.dataTables_length').addClass('form-group form-inline').css({ 'padding-left': '15px' });
            $('.dataTables_filter').addClass('form-group form-inline').css({ 'padding-right': '15px' });
            $('input[type=search]').addClass('form-control');
            $('select').addClass('form-control');
            $('label').addClass('control-label');
        }

    </script>
    <style>
        @media (min-width: 768px) {
            .modal-xl {
                width: 90%;
               max-height: 95%;
            }
        }
    </style>
     <style>
        .dawpmTable {
            font-family: "Helvetica Neu", Arial, Helvetica, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }
        .dawpmTable td, .dawpmTable th, .dawpmTable thead {
            border: 1px solid #ddd;
            padding: 8px;
        }

        .dawpmTable tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        .dawpmTable tbody tr:hover {
            background-color: #ddd;
        }

        tr:not(:first-child):hover {
            background-color: #ddd;
        }

        .dawpmTable th, .dawpmTable thead {          
            background-color: #428bca;
            color: white;
            white-space: nowrap;
        }
        .modal.fade {
            z-index: 10000000 !important;
        }
         .modal {
             position:absolute;
         }
         #WinFormsDocumentView {
             position:relative;
             z-index: -1 !important;
         }
    </style>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="body" runat="Server">
    <div class="container container-full">
        <div class="row">
            <div class="col-md-8">
                <div class="well" style="position:relative;z-index: 9999;">
                    
                    <object id="WinFormsDocumentView" name="WinFormsDocumentView" height="100%" width="100%"
                        classid="ViewStar.Windows.Forms.DocumentView.dll#ViewStar.Windows.Forms.DocumentView" viewastext>
                        <param name="BackColor" value="DarkGray" >
                        <param name="ServiceToken" value="" >
                        <param name="ServiceUrl" value="" >
                        <param name="UserName" value="" >
                        <param name="CurrentCulture" value="">
                    </object>
                                          
                </div>
            </div>
            <div class="col-md-4">
                <div class="well">
                    <div class="panel panel-primary">
                        <div class="panel-heading">Attributes</div>
                        <div class="panel-body">Panel Content</div>
                    </div>
                    <div class="panel panel-primary">
                        <div class="panel-heading">Memo</div>
                        <div class="panel-body">Panel Content</div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- Category/Role Modal -->
    <div class="modal fade" id="CatRoleModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header" style="background-color: #428bca; color: white;">

                    <button style="color: white;" type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i class="fa fa-close"></i>
                    </button>
                    <h4 class="modal-title">Category and Role</h4>
                </div>
                <div class="modal-body">
                    <div class="form-horizontal">
                        <fieldset>
                            <div class="form-group">
                                <label class="col-md-4 control-label" for="selectbasic">Select Category</label>
                                <div class="col-md-6">
                                    <select id="ddlCategory" name="selectbasic" class="form-control" onchange="selCat_OnChange();">
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-4 control-label" for="selectbasic">Select Role</label>
                                <div class="col-md-6">
                                    <select id="ddlRole" name="selectbasic" class="form-control">
                                    </select>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary" id="btnCategoryOK" onclick="ShowQueueResults(); GetQueueResults();"><i class="fa fa-thumbs-o-up"></i>&nbsp;Ok</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i>&nbsp;Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Queue Results Modal -->
    <div class="modal fade" id="QueueResultModal" data-backdrop="static">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header" style="padding-bottom: 0px;">
                    <div class="container container-full">
                        <fieldset>
                            <div class='row'>
                                <div class='col-sm-6 text-left'>
                                    <div class='form-group'>
                                        <form class="form-inline">
                                            <label for="ddlQueue" class="control-label">
                                                <h4>Selection</h4>
                                            </label>
                                            <select class="form-control" id="ddlQueue">
                                                <option value="BDD_PNDQUE">BDD Pend Queue</option>
                                                <option value="BDD_INQUE">BDD In Queue</option>
                                            </select>
                                        </form>
                                    </div>
                                </div>
                                <div class='col-sm-6 text-right'>
                                    <div class='form-group'>
                                        <form class="form-inline">
                                            <button type="submit" class="btn btn-primary"><i class="fa fa-arrow-right"></i>&nbsp;<u>F</u>orward</button>
                                            <button type="submit" class="btn btn-primary"><i class="fa fa-gears"></i>&nbsp;<u>P</u>references</button>
                                            <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i>&nbsp;Close</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </fieldset>

                    </div>
                </div>
                <div class="modal-body" style="padding-bottom: 0px;">
                    <div class="form-horizontal">
                        <div class="well" id="divQResults">
                            <span>No Records to Display</span>                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" id="hdnCategoryXml" name="hdnCategoryXml" />
</asp:Content>

- Reply
adamturner34
Contributor

2853 Points

1372 Posts

Re: Z-Index Bootstrap Modal <object> layering problem

Feb 02, 2017 03:31 PM|adamturner34|LINK

Another catch is that it has to be IE11 compatible and optimistically cross-browser compatible.
- Reply
bruce (sqlwo...
All-Star

50854 Points

12095 Posts

Re: Z-Index Bootstrap Modal <object> layering problem

Feb 02, 2017 09:24 PM|bruce (sqlwork.com)|LINK

adamturner34

Another catch is that it has to be IE11 compatible and optimistically cross-browser compatible.

in that case, you need to replace the <object> with a html/javascript solution.

note: IE Edge will not support your object tag. to get to work with IE11 you will need to update the client registry settings:

https://technet.microsoft.com/en-us/itpro/internet-explorer/ie11-deploy-guide/net-framework-problems-with-ie11

bruce (sqlwork.com)