• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2429
  • Last Modified:

Gridview column autofit

I have a gridview defined inside a div. But the column width is not autofit which results in some title string going to the second line or even the third line, or some cell values take multiple lines. I would like every row takes only one line.

How can I make column width auto fit?

<div id="Member" style="overflow:auto; left:20px; width:100%; height:200px">  
 <asp:LinkButton ID="lnkNewMem" runat="server" Text="Add Member" OnClientClick="return CheckNull();" />&nbsp;
 <asp:LinkButton ID="LinkRefresh" runat="server" Text="Refresh List" OnClick="ReloadMember" />
 <asp:GridView ID="MyGridView" runat="server"
  AllowSorting="True" AlternatingRowStyle-BackColor="#FFFFFF"
  AutoGenerateColumns="false" BorderStyle="Solid" ForeColor="#5078B3"          
  PageSize="4" RowStyle-CssClass="rowheight"  
  OnRowDataBound="MGridView_RowDataBound">
  ... ...
  ... ...
</asp:GridView>
</div>  

column-autofit.JPG
0
minglelinch
Asked:
minglelinch
  • 6
  • 4
  • 2
  • +1
1 Solution
 
ddayx10Commented:
Well the issue has to do with this I would imagine:
<div id="Member" style="overflow:auto; left:20px; width:100%; height:200px">

Moreover it would have to do with the width of this <div>'s parent or whatever that parent inherits from.

Since the width of the <div>'s parent is smaller than the table's contents it is bunching the items together.

You could add these properties to your gridview:
HeaderStyle-Wrap="false" RowStyle-Wrap="false"

This should force all rows (header and otherwise) to remain on one line, then your overflow should cause scrollbars to appear for the verticle(I always spell that wrong) extension of the grid/table.
0
 
mr_nadgerCommented:
have you got a header or item width set in the gridview, either in the gridview's properties, or an overriding CSS file?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
mr_nadgerCommented:
or the wrap option turned on somewhere? (forgot to write that before hitting submit)
0
 
minglelinchAuthor Commented:
Thanks for all the comments. I don't have any CSS width setting. In C# DataBound, I have line like
MGridView.HeaderRow.Cells[9].Width = new Unit(140, UnitType.Pixel); the setting here is much wider than it appears. I don't have the wrap option turned on anywhere.

ddayx10:
I have added HeaderStyle-Wrap="false" RowStyle-Wrap="false" to the gridview, but it still does not help. It still shows two lines on the header.

There's no parent <div> of the gridview. The parent level is
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

I changed "overflow:scroll" instead of auto, it still works the same way.
<div id="Member" style="overflow:scroll; left:20px; width:100%; height:200px">

If I display much less columns that makes scroll unecessary, the title shows in one line which is what I want. How can I make it work for more columns, more help please?
0
 
mr_nadgerCommented:
can you post your code please?
0
 
minglelinchAuthor Commented:
Thanks. Attached the file. The problem occurs on MGridView.


GridView-Width.aspx
0
 
mr_nadgerCommented:
can't see anything obvious, do you have any CSS referenced in the master page?
0
 
minglelinchAuthor Commented:
Attached the master one. CSS included but not really used.

Actually the other two gridview are working fine, only the MGridView has the problem.
0
 
minglelinchAuthor Commented:
Sorry clicked a wrong button. The file is attached here. Thanks.
MstrPage.aspx
0
 
minglelinchAuthor Commented:
I added HeaderStyle-Wrap="false" at asp:BoundField level the GridView, it worked.

Thank you all.
0
 
ddayx10Commented:
Just for clarification and future:

<div id="Member" style="overflow:auto; left:20px; width:100%; height:200px">

This does have a parent, it may only be the body but that width set above this is key to how the 100% width is interpreted. Looking at this parent would have given you some clue as to what the 100% actually was and control over how it operated.

Inheritance of width, especially when using percentages makes things tricky. One has to know what is happening in the heirarchy to make a decision about how to resolve this type of issue.

0
 
minglelinchAuthor Commented:
Thank you for the answer.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 6
  • 4
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now