div table wrapper is overlap other content after resize and blocking that content

nutchy_m

Hi , I've a issue on wrapper of data table blocking a content on page after resizing a browser to some point.

In image above show that a wrapper area is overlapping textbox and button content and blocking it for any action (can't clicking on it).

I didn't this is bug or not. What should I do for fix this issue

Thank you

colin

Hi @nutchy_m ,

We're happy to take a look, but it would help, as per the forum rules, if you could link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

nutchy_m

Hi, colin

Thank you for your quick reply.

I just use many library on my project but I can provide you a code and javascript of page and master site for you

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="BudgetApprove.aspx.cs" Inherits="APSpirtis.Summary" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <script>

        $(document).ready(function () {

            var currentmenu = document.getElementById("BudgetApproveID")
            currentmenu.className = "active";

            var currentlink = document.getElementById("link5")
            currentlink.removeAttribute("href");

        });

    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <asp:ScriptManager ID="ScriptManagerMainPage" runat="server"></asp:ScriptManager>
    <!-- SlimScroll -->
    <script src="../../bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
    <%--//Title--%>
    <section class="content-header">
        <h1>Budget Approve / Reject
            <small>(beta)</small>
        </h1>
        <%-- File Select --%>
        <div style="margin-top: 35px;">
            <div style="margin-bottom: 10px;">
                <asp:Label ID="LabelDescript" runat="server" Text="กรุณาเลือกภาคการตลาดและเดือน ที่ท่านต้องการอนุมัติใบของบจัด"></asp:Label>
            </div>
            <div class="form-group has-feedback col-sm-3">
                <asp:DropDownList ID="RegionDd3" ClientIDMode="Static" runat="server" CssClass="form-control" Style="text-indent: 30%">
                    <asp:ListItem Value="0000" Text="---โปรดเลือกภาค---" Selected="True" />
                    <asp:ListItem Value="R000" Text="สำนักงานใหญ่ (แสงโสม)" Selected="false" />
                    <asp:ListItem Value="R001" Text="ภาคการตลาดที่ 1" Selected="false" />
                    <asp:ListItem Value="R002" Text="ภาคการตลาดที่ 2" Selected="false" />
                    <asp:ListItem Value="R003" Text="ภาคการตลาดที่ 3" Selected="false" />
                    <asp:ListItem Value="R004" Text="ภาคการตลาดที่ 4" Selected="false" />
                </asp:DropDownList>
                <span class="fa fa-globe form-control-feedback" style="padding-right: 15px;"></span>
            </div>

            <div class="form-group has-feedback col-sm-2">
                <asp:TextBox ID="ViewDate" ClientIDMode="Static" Style="text-align: center" CssClass="form-control" runat="server" AutoPostBack="false" autocomplete="off" BackColor="White" placeholder="เลือกเดือน"></asp:TextBox>
                <cc1:CalendarExtender ID="CalendarExtender1" BehaviorID="calendar1" runat="server" Enabled="True" Format="MM/yyyy" TargetControlID="ViewDate" OnClientHiding="onCalendarHidden" OnClientShowing="onCalendarShown" ClientIDMode="Static" />
                <span class="fa fa-calendar form-control-feedback" style="padding-right: 25px;"></span>
            </div>

            <div class="form-group has-feedback col-sm-2">
                <asp:Button ID="ShowBtn" ClientIDMode="Static" runat="server" Text="Show Data" CssClass="btn btn-primary btn-block btn-flat" OnClientClick="return checknotchoose();" OnClick="ShowBtn_Click" />
            </div>
            <div class="col-sm-12" style="margin-top:15px;">
                <div class="form-group has-feedback col-sm-2" style="padding-top:6px;padding-left:30px;">
                    <asp:Label ID="CurrentApprover" ClientIDMode="Static" runat="server" Text="ผู้ที่ต้องทำการอนุมัติ : " Visible="false"></asp:Label>
                </div>

                <div class="form-group has-feedback col-sm-5">
                    <asp:TextBox ID="TextApprover" ClientIDMode="Static" Style="text-align: center" CssClass="form-control" runat="server" ReadOnly="true" BackColor="White" Visible="false"></asp:TextBox>
                </div>
            </div>

            <%-- Table section--%>
            <div>
                <div id="divTable" runat="server" class="box-body col-lg-12" visible="false">
<asp:Literal ID="DatatableToHtmlTable" runat="server"></asp:Literal>
                </div>
            </div>

            <div class="form-group has-feedback col-sm-6" style="padding-left: 30%; padding-right: 5%;">
                <asp:Button ID="ApproveBtn" runat="server" Text="Approve" CssClass="btn btn-success btn-block btn-flat" Visible="false" OnClick="ApproveBtn_Click" />
            </div>

            <div class="form-group has-feedback col-sm-6" style="padding-left: 5%; padding-right: 30%;">
                <asp:Button ID="RejectBtn" runat="server" Text="Reject" CssClass="btn btn-danger btn-block btn-flat" Visible="false" OnClick="RejectBtn_Click" />
            </div>
        </div>

        <script>

                <%-- datatable.net JS --%>
            $(document).ready(function () {

                $('#exampledt').DataTable({
                    'autoWidth': true,
                    'scrollY': '50vh',
                    'scrollCollapse': true,
                    'paging': false,
                    'scrollX': true,
                    'responsive': false,
                    'ordering': false
                });

                $('#exampledt').css('display', 'table');
                $('#exampledt').DataTable().responsive.recalc();

            });

               
            function onCalendarShown() {

                var cal = $find("calendar1");
                //Setting the default mode to month
                cal._switchMode("months", true);

                //Iterate every month Item and attach click event to it
                if (cal._monthsBody) {
                    for (var i = 0; i < cal._monthsBody.rows.length; i++) {
                        var row = cal._monthsBody.rows[i];
                        for (var j = 0; j < row.cells.length; j++) {
                            Sys.UI.DomEvent.addHandler(row.cells[j].firstChild, "click", call);
                        }
                    }
                }
            }

            function onCalendarHidden() {
                var cal = $find("calendar1");
                //Iterate every month Item and remove click event from it
                if (cal._monthsBody) {
                    for (var i = 0; i < cal._monthsBody.rows.length; i++) {
                        var row = cal._monthsBody.rows[i];
                        for (var j = 0; j < row.cells.length; j++) {
                            Sys.UI.DomEvent.removeHandler(row.cells[j].firstChild, "click", call);
                        }
                    }
                }

            }

            function call(eventElement) {
                var target = eventElement.target;
                switch (target.mode) {
                    case "month":
                        var cal = $find("calendar1");
                        cal._visibleDate = target.date;
                        cal.set_selectedDate(target.date);
                        cal.hide();

                        cal._switchMonth(target.date);
                        cal._blur.post(true);
                        cal.raiseDateSelectionChanged();
                        break;
                }
            }

   
            function checknotchoose() {
                var Regionpick = $('#RegionDd3').prop('selectedIndex');
                var Datepick = $('#ViewDate').val();

                if (Regionpick != 0 & Datepick != "") {
                    return true;
                }
                else if (Regionpick == 0 || Regionpick < 0) {
                    alert('กรุณาเลือกภาคการตลาดที่ต้องการอนุมัติเอกสาร');
                    $('#RegionDd3').trigger('click');
                    return false;
                }
                else if (Datepick == "") {
                    alert('กรุณาเลือกเดือนที่ต้องการอนุมัติเอกสาร');
                    $('#ViewDate').focus();
                    return false;
                }
            }


                    function CallAlert(typeAlert) {
                        var MessageAlert;
                        switch (typeAlert) {
                            case 0:
                                MessageAlert = 'จากตัวลือกที่ท่านเลือก\nไม่พบรายการงบจัดใดๆ';
                                alert(MessageAlert);
                                break;
                            case 1:
                                MessageAlert = 'ท่านต้องการที่จะอนุมัติเอกสารงบจัดของ\nภาคการตลาดที่::' + <%=ViewState["RegionSelect"]%> +'\nเดือนที่::' + <%=ViewState["DateSelect"]%>+'ใช่หรือไม่ ?';
                                confrim(MessageAlert);
                                break;
                            case 2:
                                MessageAlert = 'ท่านจะ "ไม่อนุมัติ" เอกสารงบจัดของ\nภาคการตลาดที่::' + <%=ViewState["RegionSelect"]%> +'\nเดือนที่::' + <%=ViewState["DateSelect"]%>+'ใช่หรือไม่ ?';
                                confrim(MessageAlert);
                                break;
                            case 3:
                                MessageAlert = '';
                                alert(MessageAlert);
                                break;
                        }

                    }



        </script>
    </section>


</asp:Content>

above is code of a page

and the one below is code of master page

colin

Hi @nutchy_m ,

This will be a styling issue, so while the code is useful, as I mentioned above, it would really help if you could link to a running test case or link to the page showing the fault.

Cheers,

Colin