[CLOSED] ext:panel width expands past 100% with asp:gridview

  1. #1

    [CLOSED] ext:panel width expands past 100% with asp:gridview

    I have a simple ext:panel that is collapsed on load.

    There is an asp:gridview inside the panel with the width set to 700px. When the panel loads, the panel is 100% of the width of the page. When the panel opens the width of the panel expands to 110% of the page width even though the gridview takes up less than half of the page width.

    This worked correctly in v1 but doesn't work correctly in v3.

    <ext:Panel runat="server" Title="Schedule" ID="pnlSched" Collapsible="true" TitleCollapse="true" >                          
      <Content>
        <asp:GridView ID="gvSchedule" runat="server" AutoGenerateColumns="False" RowStyle-Wrap="False" RowStyle-Height="20px" Width="700px" CssClass="gridview" AllowPaging="false" AllowSorting="False" HorizontalAlign="Left" EnableTheming="False" GridLines="Horizontal">
          <Columns>
            <asp:BoundField DataField="COURSENAME" HeaderText="Course Name">
              <HeaderStyle HorizontalAlign="Center" Wrap="False" />
              <ItemStyle HorizontalAlign="Left" Wrap="False" Width="200px" />
            </asp:BoundField>
            <asp:BoundField DataField="COURSEID" HeaderText="Course ID">
              <HeaderStyle HorizontalAlign="Center" Wrap="False" />
               <ItemStyle HorizontalAlign="Center" Wrap="False" Width="50px" />
            </asp:BoundField>
            <asp:BoundField DataField="SECTION" HeaderText="Section">
              <HeaderStyle HorizontalAlign="Center" Wrap="False" />
              <ItemStyle HorizontalAlign="Center" Wrap="False" Width="50px" />
            </asp:BoundField>
            <asp:BoundField DataField="PERIOD" HeaderText="Period">
              <HeaderStyle HorizontalAlign="Center" Wrap="False" />
              <ItemStyle HorizontalAlign="Center" Wrap="False" Width="50px" />
             </asp:BoundField>
             <asp:BoundField DataField="ROOMNUMBER" HeaderText="Room #">
               <HeaderStyle HorizontalAlign="Center" Wrap="False" />
               <ItemStyle HorizontalAlign="Center" Wrap="False" Width="60px" />
             </asp:BoundField>
             <asp:BoundField DataField="Teacher" HeaderText="Teacher">
               <HeaderStyle HorizontalAlign="Center" Wrap="False" />
               <ItemStyle HorizontalAlign="Left" Wrap="False" Width="200px" />
              </asp:BoundField>
            </Columns>
            <HeaderStyle BackColor="#4b6c9e" Font-Size="X-Small" ForeColor="White" HorizontalAlign="Center" VerticalAlign="Middle" />
            <AlternatingRowStyle ForeColor="Black" BackColor="GhostWhite" Font-Bold="False" />
            <FooterStyle BackColor="#4b6c9e" />
            <RowStyle Font-Bold="False" Wrap="False" />
            <EmptyDataTemplate>
              <div>
                <table width="100%" border="0">
                  <tr align="left">
                      <td align="left" valign="top" class="Alert">&nbsp;&nbsp;No Courses to Display.</td>
                  </tr>
                </table>
              </div>
            </EmptyDataTemplate>
          </asp:GridView>                                
       </Content>
    </ext:Panel>
    Last edited by fabricio.murta; Mar 22, 2016 at 11:22 PM. Reason: no user feedback for 7+ days
  2. #2
    Hello @jmilton!

    I try to run your example here but all I get is the outer panel (Schedule) and no contents on it at all. Can you provide a working sample so we can reproduce the issue here and provide you with proper advice on how to proceed with it?
    Fabrício Murta
    Developer & Support Expert
  3. #3
    My gridview has a sqldata source. do you want to fill the gridview with dummy data?
  4. #4
    Hello @jmilton!

    I believe that would be enough! Usually providing a sample with dummy data is sufficient to reproduce & fix an issue, specially a layout issue where the contents may depend of some data -- as with the ASP:GridView. In general terms, as long as we can reproduce your issue by our side, it should do.
    Fabrício Murta
    Developer & Support Expert
  5. #5
    The problem appears when the height of the page causes the scrollbar to appear. The panels expand past the scrollbar.

    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    
    public partial class dummy : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
          DataSet ds = new DataSet();
    
    
          DataTable dt = new DataTable();
          dt.Columns.Add("COURSENAME");
          dt.Columns.Add("COURSEID");
          dt.Columns.Add("SECTION");
          dt.Columns.Add("PERIOD");
          dt.Columns.Add("ROOMNUMBER");
          dt.Columns.Add("Teacher");
         
          dt.Rows.Add(new object[] { "Course 1", "101", "01", "1", "R35", "Mrs. Jones"});
          dt.Rows.Add(new object[] { "Course 2", "102", "02", "1", "R35", "Mrs. Peters" });
          dt.Rows.Add(new object[] { "Course 3", "103", "03", "1", "R35", "Mr. King" });
          dt.Rows.Add(new object[] { "Course 4", "104", "04", "1", "R35", "Mrs. Jacobs" });
          dt.Rows.Add(new object[] { "Course 5", "105", "05", "1", "R35", "Mrs. Smith" });
    
    
          ds.Tables.Add(dt);
    
    
          gvSchedule.DataSourceID = null;
          gvSchedule.DataSource = ds.Tables[0].DefaultView;
          gvSchedule.DataBind();
        }
    }
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="dummy.aspx.cs" Inherits="dummy" %>
    
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>    
    </head>
    <body>
      <ext:ResourceManager runat="server" />
        <form id="form1" runat="server">
        <div>
    
    
          <table class="workspace" border="0" cellpadding="0" cellspacing="0" width="100%">
            <tr>
              <td valign="top">
                <table border="0" width="100%" id="tblStudentForm" cellpadding="2" cellspacing="2">
                  <tr>
                    <td align="left" class="gridview">
                      <ext:Panel runat="server" Title="Panel1" ID="Panel1" Collapsible="true" TitleCollapse="true" Height="200px">
                        <Content>
                      </Content>
                      </ext:Panel>
                    </td>
                  </tr>              
                  
                  <tr>
                    <td align="left" class="gridview">
                      <ext:Panel runat="server" Title="Schedule" ID="pnlSched" Collapsible="true" TitleCollapse="true">
                        <Content>
                          <asp:GridView ID="gvSchedule" runat="server" AutoGenerateColumns="False" RowStyle-Wrap="False" RowStyle-Height="20px" Width="700px"
                            CssClass="gridview" AllowPaging="false" AllowSorting="False" HorizontalAlign="Left" EnableTheming="False" GridLines="Horizontal">
                            <Columns>
                              <asp:BoundField DataField="COURSENAME" HeaderText="Course Name">
                                <HeaderStyle HorizontalAlign="Center" Wrap="False" />
                                <ItemStyle HorizontalAlign="Left" Wrap="False" Width="200px" />
                              </asp:BoundField>
                              <asp:BoundField DataField="COURSEID" HeaderText="Course ID">
                                <HeaderStyle HorizontalAlign="Center" Wrap="False" />
                                <ItemStyle HorizontalAlign="Center" Wrap="False" Width="50px" />
                              </asp:BoundField>
                              <asp:BoundField DataField="SECTION" HeaderText="Section">
                                <HeaderStyle HorizontalAlign="Center" Wrap="False" />
                                <ItemStyle HorizontalAlign="Center" Wrap="False" Width="50px" />
                              </asp:BoundField>
                              <asp:BoundField DataField="PERIOD" HeaderText="Period">
                                <HeaderStyle HorizontalAlign="Center" Wrap="False" />
                                <ItemStyle HorizontalAlign="Center" Wrap="False" Width="50px" />
                              </asp:BoundField>
                              <asp:BoundField DataField="ROOMNUMBER" HeaderText="Room #">
                                <HeaderStyle HorizontalAlign="Center" Wrap="False" />
                                <ItemStyle HorizontalAlign="Center" Wrap="False" Width="60px" />
                              </asp:BoundField>
                              <asp:BoundField DataField="Teacher" HeaderText="Teacher">
                                <HeaderStyle HorizontalAlign="Center" Wrap="False" />
                                <ItemStyle HorizontalAlign="Left" Wrap="False" Width="200px" />
                              </asp:BoundField>
                            </Columns>
                            <HeaderStyle BackColor="#4b6c9e" Font-Size="X-Small" ForeColor="White" HorizontalAlign="Center" VerticalAlign="Middle" />
                            <AlternatingRowStyle ForeColor="Black" BackColor="GhostWhite" Font-Bold="False" />
                            <FooterStyle BackColor="#4b6c9e" />
                            <RowStyle Font-Bold="False" Wrap="False" />
                            <EmptyDataTemplate>
                              <div>
                                <table width="100%" border="0">
                                  <tr align="left">
                                    <td align="left" valign="top" class="Alert">&nbsp;&nbsp;No Courses to Display.</td>
                                  </tr>
                                </table>
                              </div>
                            </EmptyDataTemplate>
                          </asp:GridView>
                        </Content>
                      </ext:Panel>
                    </td>
                  </tr>
    
    
                  <tr>
                    <td align="left" class="gridview">
                      <ext:Panel runat="server" Title="Panel3" ID="Panel3" Collapsible="true" TitleCollapse="true" Height="200px">
                        <Content>
                      </Content>
                      </ext:Panel>
                    </td>
                  </tr>  
    
    
                  <tr>
                    <td align="left" class="gridview">
                      <ext:Panel runat="server" Title="Panel4" ID="Panel4" Collapsible="true" TitleCollapse="true" Height="200px">
                        <Content>
                      </Content>
                      </ext:Panel>
                    </td>
                  </tr>  
    
    
                  <tr>
                    <td align="left" class="gridview">
                      <ext:Panel runat="server" Title="Panel5" ID="Panel5" Collapsible="true" TitleCollapse="true" Height="200px">
                        <Content>
                      </Content>
                      </ext:Panel>
                    </td>
                  </tr>  
                </table>
              </td>
            </tr>
          </table>
        </div>
        </form>
    </body>
    </html>
  6. #6
    Hello @jmilton!

    You example runs nicely here, but I couldn't see any of the panels expanding past 100%, overflowing outside or any strange behavior.

    Here's what I see:
    Click image for larger version. 

Name:	01-panels_no_scroolbar.png 
Views:	50 
Size:	20.7 KB 
ID:	24472 (without scrollbars)

    Click image for larger version. 

Name:	02-panels_scrollbar.png 
Views:	38 
Size:	22.9 KB 
ID:	24473 (with scrollbars)
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Panel with CollapseDirection left not expands on title area click
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 04, 2014, 11:40 AM
  2. [CLOSED] Combobox expands after the store reload
    By deejayns in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jan 24, 2012, 7:26 AM
  3. [CLOSED] Grid Panel : Column width (Auto width)
    By legaldiscovery in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Sep 24, 2011, 8:31 PM
  4. Replies: 2
    Last Post: May 12, 2011, 9:26 AM
  5. [CLOSED] Gridpanel gridview Forcefit and column width
    By ljankowski in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 12, 2010, 4:56 PM

Posting Permissions