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

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

nutchy_mnutchy_m Posts: 3Questions: 0Answers: 0

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

Replies

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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_mnutchy_m Posts: 3Questions: 0Answers: 0

    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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

This discussion has been closed.