Link to home
Start Free TrialLog in
Avatar of Dovberman
DovbermanFlag for United States of America

asked on

Gridview columns too wide

I designed a gridview and set the column widths.  The column widths of bond columns are displayed as set.  The displayed widths of button columns are wider than expected.

======
<asp:BoundField DataField="PriceUpCount"  
                    HeaderText="Days Up">
                    <HeaderStyle HorizontalAlign="Left" Width="0.2in" Font-Size="10pt"
                        Font-Names="Arial" ForeColor="Blue" />
                    <ItemStyle BackColor="White" ForeColor="Black" Font-Size="10pt" Font-Names="Arial"  
                    HorizontalAlign="Right" Width="0.2in"></ItemStyle>
                </asp:BoundField>
               
                <asp:BoundField DataField="PctChange" DataFormatString="{0:F1}"
                    HeaderText="% Up">
                    <HeaderStyle HorizontalAlign="Left" Width="0.7in" Font-Size="10pt"
                        Font-Names="Arial" ForeColor="Blue" />
                    <ItemStyle BackColor="White" ForeColor="Black" Font-Size="10pt" Font-Names="Arial"  
                    HorizontalAlign="Right" Width="0.7in"></ItemStyle>
                </asp:BoundField>
         
                <asp:ButtonField HeaderText="Eval -uate" ButtonType="Link" CommandName="Evaluate"
                    Text="Eval">
                    <HeaderStyle HorizontalAlign="Left" Width="0.5in"
                    Font-Names="Arial" Font-Size="10pt" ForeColor="Blue" />
                    <ItemStyle Width="0.5in" />
                </asp:ButtonField>

What should I change?

Thanks,
WiderThanSet.jpg
ASKER CERTIFIED SOLUTION
Avatar of sammySeltzer
sammySeltzer
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Dovberman

ASKER

The gridview is not in a table cell. The div width is no the issue.

The issue is that button column widths exceeds the specified width.

<asp:GridView ID="grdWatchList" runat="server"
            Height="20px"
            Width="700px" Caption="Your Watch List Stocks. Click on 'Eval' to research using your selected research site."  
            BorderColor="Black" BorderStyle="Double" BorderWidth="1px"
            BackColor="Azure" AlternatingRowStyle-BackColor="#FFFF66"
            AlternatingRowStyle-BorderStyle="Solid" Font-Names="Arial"
            Font-Size="10pt" AutoGenerateColumns="False"
            DataKeyNames="SymbolID"  
            AllowPaging="True" PageSize="10"
            CaptionAlign="Left" ForeColor="Black"

======
                <asp:ButtonField HeaderText="Show Chart" ButtonType="Link"     CommandName="Chart" Text="Chart">
                    <HeaderStyle HorizontalAlign="Left" Width="0.4in"
                    Font-Names="Arial" Font-Size="10pt" ForeColor="Blue" />
                    <ItemStyle Width="0.4in" />
                </asp:ButtonField>    

Actual width exceeds 0.4 inches.
               
                <asp:BoundField DataField="SymbolID" HeaderText=" " 
                    InsertVisible="False" ReadOnly="True" SortExpression="SymbolID"
                    ItemStyle-BackColor="White" ItemStyle-ForeColor="White"
                    ShowHeader="False" > 
                    <HeaderStyle HorizontalAlign="Left" Width="0.2in" />
                    <ItemStyle BackColor="White" ForeColor="White" Font-Names="Arial Narrow"
                    Font-Size="6pt" HorizontalAlign="Left" Width="0.2in"></ItemStyle>
                </asp:BoundField>

Actual width is 0.2 inches.

Should I specify the width in pixels instead of in inches?
Yes, that's what I recommended.

Also, change your gridview dimension from % to pixel.

<div id="divGrid" style='position:absolute; width:800px; overflow:auto'>
<asp:GridView ID="grdWatchList" runat="server"
            Caption="Your Watch List Stocks. Click on 'Eval' to research using your selected research site."  
            BorderColor="Black" BorderStyle="Double" BorderWidth="1px"
            BackColor="Azure" AlternatingRowStyle-BackColor="#FFFF66"
            AlternatingRowStyle-BorderStyle="Solid" Font-Names="Arial"
            Font-Size="10pt" AutoGenerateColumns="False"
            DataKeyNames="SymbolID"  
            AllowPaging="True" PageSize="10"
            CaptionAlign="Left" ForeColor="Black"

and rest

change pixel width as needed.
Thanks,

I will try that tomorrow.
Where is % in the gridview description?

asp:GridView ID="grdWatchList" runat="server"
            Height="20px"
            Width="700px" Caption="Your Watch List Stocks. Click on 'Eval' to research using your selected research site."  
            BorderColor="Black" BorderStyle="Double" BorderWidth="1px"
            BackColor="Azure" AlternatingRowStyle-BackColor="#FFFF66"
            AlternatingRowStyle-BorderStyle="Solid" Font-Names="Arial"
            Font-Size="10pt" AutoGenerateColumns="False"
            DataKeyNames="SymbolID"  
            AllowPaging="True" PageSize="10"
            CaptionAlign="Left" ForeColor="Black"
Did you try the code I recommended?

<div id="divGrid" style='position:absolute; width:800px; overflow:auto'>
your gridview withouth the width/height dimension.
That did not help. I appreciate your effort.
I appreciate your efforts.
can you post the entire gridview markup that you are using here?
<asp:Label ID="lblLegend" runat="server" Font-Bold="False" Width="300px"></asp:Label>
      <br /><br />
 
     <asp:GridView ID="grdWatchList" runat="server"
            Height="20px"
            Width="400px" Caption="Your Watch List Stocks. Click on 'Eval' to research using your selected research site."  
            BorderColor="Black" BorderStyle="Double" BorderWidth="1px"
            BackColor="Azure" AlternatingRowStyle-BackColor="#FFFF66"
            AlternatingRowStyle-BorderStyle="Solid" Font-Names="Arial"
            Font-Size="10pt" AutoGenerateColumns="False"
            DataKeyNames="SymbolID"  
            AllowPaging="True" PageSize="10"
            CaptionAlign="Left" ForeColor="Black"
           
            OnSelectedIndexChanged="grdWatchList_SelectedIndexChanged"
            OnPageIndexChanged="grdWatchList_PageIndexChanged"
            OnRowDataBound="grdWatchList_OnRowDataBound"
            OnPageIndexChanging = "grdWatchList_PageIndexChanging"
            OnRowCommand = "grdWatchList_ActOnItem"
            >
         
            <Columns>
                   
                <asp:ButtonField HeaderText="Show Chart" ButtonType="Link" CommandName="Chart" Text="Chart"
                    HeaderStyle-Width="36px">
                    <HeaderStyle HorizontalAlign="Left" Width="36px"
                    Font-Names="Arial" Font-Size="10pt" ForeColor="Blue"  />
                    <ItemStyle Width="36px" />
                </asp:ButtonField>
               
                <asp:BoundField DataField="SymbolID" HeaderText=" " 
                    InsertVisible="False" ReadOnly="True" SortExpression="SymbolID"
                    ItemStyle-BackColor="White" ItemStyle-ForeColor="White"
                    ShowHeader="False" > 
                    <HeaderStyle HorizontalAlign="Left" Width="0.2in" />
                    <ItemStyle BackColor="White" ForeColor="White" Font-Names="Arial Narrow"
                    Font-Size="6pt" HorizontalAlign="Left" Width="0.2in"></ItemStyle>
                </asp:BoundField>
                             
                <asp:BoundField DataField="SymbolName" HeaderText="Ticker Name"
                    SortExpression="SymbolName" ShowHeader="True">
                   
                    <HeaderStyle HorizontalAlign="Left" Width="0.5in" Font-Names="Arial"
                    Font-Size="10pt" ForeColor="Blue" />
                    <ItemStyle BackColor="White" ForeColor="Black" Font-Names="Arial"
                    Font-Size="10pt" HorizontalAlign="Left" Width="0.5in"></ItemStyle>
                </asp:BoundField>
               
                <asp:BoundField DataField="SecName" HeaderText="Issue Name"
                    SortExpression="SecName" ShowHeader="True" HeaderStyle-Width="100px">
                   
                    <HeaderStyle HorizontalAlign="Left" Width="100px" Font-Names="Arial"
                     Font-Size="10pt" ForeColor="Blue" />
                    <ItemStyle BackColor="White" ForeColor="Black" Font-Names="Arial"
                     Font-Size="10pt" HorizontalAlign="Left" Width="100px" />
                </asp:BoundField>
               
                <asp:BoundField DataField="MarketID" HeaderText=""
                    ReadOnly="True" ShowHeader="False">
                   
                    <HeaderStyle HorizontalAlign="Left" Width="0.2in" Font-Names="Arial"
                     Font-Size="10pt" ForeColor="Blue" />
                    <ItemStyle BackColor="White" ForeColor="White" Font-Names="Arial"  
                    Font-Size="10pt" HorizontalAlign="Left" Width="0.2in"></ItemStyle>
                </asp:BoundField>
               
                <asp:BoundField DataField="MarketName" HeaderText="Market"
                    InsertVisible="False" ReadOnly="True" SortExpression="MarketName"
                    Visible="True" >
                   
                    <HeaderStyle HorizontalAlign="Left" Width="0.6in" Font-Names="Arial"
                     Font-Size="10pt" ForeColor="Blue" />
                    <ItemStyle BackColor="White" ForeColor="Black" Font-Names="Arial"  
                    Font-Size="10pt" HorizontalAlign="Left" Width="0.6in"></ItemStyle>
                </asp:BoundField>
                       
                <asp:BoundField DataField="PickDate" HeaderText="Pick Date"
                    InsertVisible="False" ReadOnly="True" SortExpression="PickDate"
                    DataFormatString="{0:MM/dd/yy}" Visible="True" >
                   
                    <HeaderStyle HorizontalAlign="Left" Width="0.4in" Font-Names="Arial"
                     Font-Size="10pt" ForeColor="Blue" />
                    <ItemStyle BackColor="White" ForeColor="Black" Font-Names="Arial"  
                    Font-Size="10pt" HorizontalAlign="Right" Width="0.4in"></ItemStyle>
                </asp:BoundField>
                               
                <asp:BoundField DataField="DaysOnList" HeaderText="Days On List"
                    InsertVisible="False" ReadOnly="True" SortExpression="DaysOnList"
                    ShowHeader="True" > 
                      <HeaderStyle HorizontalAlign="Left" Width="0.5in" Font-Size="10pt"  
                          Font-Names="Arial" ForeColor="Blue"  />
                      <ItemStyle BackColor="White" ForeColor="Black" Font-Size="10pt" Font-Names="Arial"  
                    HorizontalAlign="Right" Width="0.5in"></ItemStyle>
                </asp:BoundField>
               
                <asp:BoundField DataField="BasePrice" DataFormatString="{0:F2}" HeaderText="Base Price">
                     
                     <HeaderStyle HorizontalAlign="Left" Width="0.4in" Font-Names="Arial"
                     Font-Size="10pt" ForeColor="Blue" />
                     <ItemStyle BackColor="White" ForeColor="Black" Font-Names="Arial"  
                    Font-Size="10pt" HorizontalAlign="Right" Width="0.4in"></ItemStyle>
                </asp:BoundField>
                     
                <asp:BoundField DataField="PickPrice" DataFormatString="{0:F2}"
                    HeaderText="Pick Price">
                   
                    <HeaderStyle HorizontalAlign="Left" Width="0.4in" Font-Size="10pt" Font-Names="Arial"
                    ForeColor="Blue" />
                    <ItemStyle BackColor="White" ForeColor="Black" Font-Size="10pt" Font-Names="Arial"  
                    HorizontalAlign="Right" Width="0.4in"></ItemStyle>
                </asp:BoundField>
               
                <asp:BoundField DataField="CurrentPrice" DataFormatString="{0:F2}"
                    HeaderText="Price Today">
                    <HeaderStyle HorizontalAlign="Left" Width="0.4in" Font-Size="10pt"
                        Font-Names="Arial" ForeColor="Blue" />
                    <ItemStyle BackColor="White" ForeColor="Black" Font-Size="10pt" Font-Names="Arial"  
                    HorizontalAlign="Right" Width="0.4in"></ItemStyle>
                </asp:BoundField>
               
                <asp:BoundField DataField="PriceChange" DataFormatString="{0:F2}"
                    HeaderText="Change">
                    <HeaderStyle HorizontalAlign="Left" Width="0.5in" Font-Size="10pt"
                        Font-Names="Arial" ForeColor="Blue" />
                    <ItemStyle BackColor="White" ForeColor="Black" Font-Size="10pt" Font-Names="Arial"  
                    HorizontalAlign="Right" Width="0.5in"></ItemStyle>
                </asp:BoundField>
               
                <asp:BoundField DataField="PriceUpCount"  
                    HeaderText="Days Up">
                    <HeaderStyle HorizontalAlign="Left" Width="0.2in" Font-Size="10pt"
                        Font-Names="Arial" ForeColor="Blue" />
                    <ItemStyle BackColor="White" ForeColor="Black" Font-Size="10pt" Font-Names="Arial"  
                    HorizontalAlign="Right" Width="0.2in"></ItemStyle>
                </asp:BoundField>
               
                <asp:BoundField DataField="PctChange" DataFormatString="{0:F1}"
                    HeaderText="% Up">
                    <HeaderStyle HorizontalAlign="Left" Width="0.7in" Font-Size="10pt"
                        Font-Names="Arial" ForeColor="Blue" />
                    <ItemStyle BackColor="White" ForeColor="Black" Font-Size="10pt" Font-Names="Arial"  
                    HorizontalAlign="Right" Width="0.7in"></ItemStyle>
                </asp:BoundField>
         
                <asp:ButtonField HeaderText="Eval -uate" ButtonType="Link" CommandName="Evaluate"
                    Text="Eval">
                    <HeaderStyle HorizontalAlign="Left" Width="36px"
                    Font-Names="Arial" Font-Size="10pt" ForeColor="Blue" />
                    <ItemStyle Width="36px" />
                </asp:ButtonField>
               
                <asp:BoundField DataField="WatchListID" HeaderText=" " 
                    InsertVisible="False" ReadOnly="True"
                    ItemStyle-BackColor="White" ItemStyle-ForeColor="White"
                    ShowHeader="False" > 
                    <HeaderStyle HorizontalAlign="Left" Width="0.2in" />
                    <ItemStyle BackColor="White" ForeColor="White" Font-Names="Arial Narrow"
                    Font-Size="6pt" HorizontalAlign="Left" Width="0.2in"></ItemStyle>
                </asp:BoundField>
             
                <asp:ButtonField HeaderText="Remove Item" ButtonType="Link" CommandName="Remove" Text="Remove"
                    HeaderStyle-Width="36px" ItemStyle-Width="36px">
                    <HeaderStyle HorizontalAlign="Left" Width="36px" Font-Size="10pt"
                        Font-Names="Arial" ForeColor="Blue" />
                    <ItemStyle BackColor="White" ForeColor="Black" Font-Size="10pt" Font-Names="Arial"  
                    HorizontalAlign="Right" Width="36px"></ItemStyle>
                </asp:ButtonField>
         
                <asp:ButtonField  HeaderText="Select"
                    ButtonType="Button" CommandName="Select" Text="Select"
                    HeaderStyle-Width="36px" ItemStyle-Width="36px">
                   <HeaderStyle HorizontalAlign="Left" Width="36px" Font-Size="10pt"
                        Font-Names="Arial" ForeColor="Blue" />
                    <ItemStyle BackColor="White" ForeColor="Black" Font-Size="10pt" Font-Names="Arial"  
                    HorizontalAlign="Right" Width="36px"></ItemStyle>
                </asp:ButtonField>
                 
                <asp:BoundField DataField="Score" HeaderText="Score"
                    SortExpression="Score" ReadOnly="True" InsertVisible="False"
                     ShowHeader="False" Visible="False">
                     <HeaderStyle HorizontalAlign="Left" Width="0.2in" />
                    <ItemStyle HorizontalAlign="Right" Width="0.2in" />
                </asp:BoundField>
             
            </Columns>
           
            <SelectedRowStyle BackColor="#66FF33" />
            <HeaderStyle BackColor="#FFFF99" Font-Bold="True" ForeColor="Blue"
                HorizontalAlign="Left" />
            <AlternatingRowStyle BackColor="#FFFF66" BorderStyle="Solid">
            </AlternatingRowStyle>
        </asp:GridView>
        <br />

    <asp:SqlDataSource ID="dscWatchListChart1" runat="server"
         ConnectionString="<%$ ConnectionStrings:StockSelectSQLConnectionString %>"
         SelectCommand= "SELECT QuoteDate AS BDate, ClosePrice AS Price
            FROM StockHist
              WHERE SymbolID=0 AND QuoteDate &gt;= DATEADD(day,-65,GETDATE())
              AND QuoteDate &lt;= GETDATE()
            ORDER BY QuoteDate " 
         ProviderName ="System.Data.SqlClient"
         SelectCommandType="Text" > 
    </asp:SqlDataSource>
I should have mentioned that controls display differently in Windows 8.

For instance, CheckLists display the check box and text on the same row in Windows 7.

In Windows 8, the check box is on one row, and the text is a row below the check box.
Can extract some small sample data to access db for testing?
You can conduct a simple test using the AdventureWorks database.

Try this.

Create a new aspx page.

Create a simple gridview using a table from the AdventureWorks database.

Replace the SQLDataSource Select Command with the simple SQL Statement as seen below.

<asp:SqlDataSource ID="dscWatchListChart1" runat="server"
         ConnectionString="<%$ ConnectionStrings:StockSelectSQLConnectionString %>"
         SelectCommand= "SELECT QuoteDate AS BDate, ClosePrice AS Price
            FROM StockHist
              WHERE SymbolID=0 AND QuoteDate &gt;= DATEADD(day,-65,GETDATE())
              AND QuoteDate &lt;= GETDATE()
            ORDER BY QuoteDate " 
         ProviderName ="System.Data.SqlClient"
         SelectCommandType="Text" > 
    </asp:SqlDataSource>

SelectCommand = " SELECT TOP 10 ProductID, SUBSTRING(ProductNumber,1,7) AS ProdNO FROM Production.Product" ;

Set the ProductID, and ProdNO column widths to 0.50 inches.

Add a Select button and set the width to 0.50 inches.

Open the page and notice the actual displayed column widths.

Compare the results in Windows 7 to Windows 8.