Div with gridview not displaying horizontal scrollbarRSS

• • Reply
  vmhatup

  Member

  37 Points

  559 Posts

  Div with gridview not displaying horizontal scrollbar

  Apr 15, 2017 02:21 PM|vmhatup|LINK

  I have three divs: two have a set width, and the third div contains a gridview that can change in size. In other words, the gridview can have any amount of columns, but each column must be 200px wide.

  In this example, the gridview has 7 columns at 200px width each. My screen is 1366x768, and 460px (300px+160px) is already taken up by two divs. The remaining space cannot display the 1400px gridview (7 cols x 200px). So it moves the third div to the bottom.

  I need to display GridViewClicks next to the first two divs, and show a horizontal scrollbar once the gridview width is greater than the available space. Each gridview column needs to be 200px each.

  I've tried tons of CSS properties, but none of them have worked. It either shrinks the columns or it repositions the div below the other two.

  Any help is appreciated. I've posted a complete example showing the issue; you just need to copy/paste.

      <form id="form1" runat="server">
      <div>
          <div style="width: 300px; height: 300px; background-color: green; display:inline-block;"">
              <asp:Button ID="Button1" runat="server" Width="278px" Text="Button" />
          </div>
          <div style="width: 160px; height: 160px; background-color: blue; display:inline-block;">
              <asp:Button ID="Button2" runat="server" Width="140px" Text="Button" />
          </div>
          <div style="background-color: red; display: inline-block;vertical-align: top; overflow-x: auto;">
                  <asp:GridView ID="GridViewClicks" runat="server" onrowdatabound="GridViewClicks_RowDataBound">
                  </asp:GridView>
          </div>
  
      </div>
      </form>
  

  And this is the codebehind. As you can see, the datatable has 7 columns so the gridview has 7 columns, each with a width of 200px each:

      public partial class ToErase : System.Web.UI.Page
      {
          protected void Page_Load(object sender, EventArgs e)
          {
              DataTable table = new DataTable();
              table.Columns.Add("CustID", typeof(string));
              table.Columns.Add("CustLName", typeof(string));
              table.Columns.Add("CustFName", typeof(string));
              // If I comment out the next columns, it works great
              // since there's enough space for three 200px columns
              table.Columns.Add("Purchases", typeof(string));
              table.Columns.Add("Sales", typeof(string));
              table.Columns.Add("More", typeof(string));
              table.Columns.Add("EvenMore", typeof(string));
              DataRow row;
  
              for (int i = 0; i < 10; i++)
              {
                  row = table.NewRow();
                  row["CustID"] = "item " + i.ToString();
                  row["CustLName"] = "item " + i.ToString();
                  row["CustFName"] = "item " + i.ToString();
                  row["Purchases"] = "item " + i.ToString();
                  row["Sales"] = "item " + i.ToString();
                  row["More"] = "item " + i.ToString();
                  row["EvenMore"] = "item " + i.ToString();
                  table.Rows.Add(row);
              }
  
              GridViewClicks.DataSource = table;
              GridViewClicks.DataBind();
  
          }
          protected void GridViewClicks_RowDataBound(object sender, GridViewRowEventArgs e)
          {
              if (e.Row.RowType == DataControlRowType.DataRow)
              {
                  DataRowView drv = e.Row.DataItem as DataRowView;
  
                  for (int i = 0; i < drv.Row.ItemArray.Length; i++)
                  {
                          e.Row.Cells[i].Width = 200;
                          e.Row.Cells[i].Height = 80;
                  }
              }
          }
      }
  

  
  
  

• • Reply
  Cathy Zou

  Star

  8650 Points

  2882 Posts

  Re: Div with gridview not displaying horizontal scrollbar

  Apr 17, 2017 06:23 AM|Cathy Zou|LINK

  Hi vmhatup,

  For your problem, I suggest you could use the following code:

   <form id="form1" runat="server">
      <div>
          <div style="width: 300px; height: 300px; background-color: green; display:inline-block;">
              <asp:Button ID="Button1" runat="server" Width="278px" Text="Button" />
          </div>
          <div style="width: 160px; height: 160px; background-color: blue; display:inline-block;">
              <asp:Button ID="Button2" runat="server" Width="140px" Text="Button" />
          </div>
          <div style="width:906px;background-color: red; vertical-align: top;display:inline-block; overflow-x:auto; " >
                  <asp:GridView ID="GridViewClicks" runat="server" Width="1400px" onrowdatabound="GridViewClicks_RowDataBound" OnRowCreated="GridViewClicks_RowCreated">
                  </asp:GridView>
          </div>
  
      </div>
      </form>

  Codebehind not change:

  Output screenshot asbelow:

   

  Best regards

  Cathy

  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.
  
• • Reply
  vmhatup

  Member

  37 Points

  559 Posts

  Re: Div with gridview not displaying horizontal scrollbar

  Apr 17, 2017 01:14 PM|vmhatup|LINK

  The issue is that you're setting a width for the gridview and the surrounding div. I don't want to set widths for either of these since I don't know what resolution the users have.