CODEWITHSUNDEEP
c#htmlcssasp.netgridview
fdkgfosfskjdlsjdlkfsf
fdkgfosfskjdlsjdlkfsf

Reputation: 3303

Add horizontal scrollbar to div with gridview?

My webform has 3 <div>: The left div is width: 300px and the second div is width: 160px. The third div does not have a set width because it contains a gridview that can change in size. In other words, the gridview can have any amount of columns and each column must be 200px wide.

In this example, GridViewClicks has 10 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 2000px gridview (10 cols x 200px). So it moves the third div to the bottom. And even when moving the div to the bottom, it automativally shrinks the columns. If I change columnNumber to 4 then the GridViewClicks fits.

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, no column resizing can be done.

My 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="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 codebehind:

public partial class ToErase : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        DataTable table = new DataTable();
        int columnNumber = 10;
        for (int i = 0; i < columnNumber; i++)
        {
            table.Columns.Add(i.ToString(), typeof(string));
        }

        DataRow row = table.NewRow();

        for (int i = 0; i < columnNumber; i++)
        {
            row[i.ToString()] = "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;
            }
        }
    }
}

Upvotes: 1

Views: 4152

Answers (1)

mrkd1991
mrkd1991

Reputation: 388

By adding the 'max-width' property to the third div you prevent it from exceeding 800px (the width of 4 columns which fits). 

<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; max-width: 800px; display: inline-block;vertical-align: top; overflow-x: auto;">
      <asp:GridView ID="GridViewClicks" runat="server" onrowdatabound="GridViewClicks_RowDataBound">
      </asp:GridView>
    </div>

  </div>
</form>

Upvotes: 1

Related Questions