Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Gridview width changes at runtime

Posted on 2009-04-07
5
Medium Priority
?
1,769 Views
Last Modified: 2012-05-06
I have created a gridview and have set the gridview width to 650 as seen in the html below. I can see (when debugging) that before the table is filled (the gridview is databound) the width of the table is 650. After the table is filled it looks as though the table adjusts to the width of the data in the cells and expands to fill that.

Not sure what I've done here, I've messed around with some word wrap and headers but haven't been able to fix it. What's going on here?
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="LateReplies.aspx.vb" Inherits="LateReplies" %>
 
<!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 id="Head1" runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="grdOnlineQueries" runat="server" AllowPaging="True" AllowSorting="True"
            AutoGenerateColumns="False" CellPadding="4" DataSourceID="AccessDataSource1"
            ForeColor="#333333" GridLines="None" PageSize="50" style="z-index: 100; left: 10px; position: absolute; top: 25px" Width="650px" UseAccessibleHeader="False">
            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <Columns>
                <asp:BoundField DataField="Query Number" HeaderText="Query Number" SortExpression="Query Number" />
                <asp:BoundField DataField="Response" HeaderText="Response" SortExpression="Response" />
                <asp:BoundField DataField="Date/Time" HeaderText="Date/Time" SortExpression="Date/Time" />
                <asp:CheckBoxField DataField="Mail Sent" HeaderText="Mail Sent" SortExpression="Mail Sent" />
                <asp:BoundField DataField="Variance (Local)" HeaderText="Variance (Local)" SortExpression="Variance (Local)" />
                <asp:BoundField DataField="Comment" HeaderText="Comment" SortExpression="Comment" />
                <asp:BoundField DataField="Status" HeaderText="Status" SortExpression="Status" />
            </Columns>
            <RowStyle BackColor="#F7F6F3" ForeColor="#333333" Wrap="False" />
            <EditRowStyle BackColor="#999999" />
            <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
            <HeaderStyle BackColor="#5D7B9D" CssClass="StyleSheet" Font-Bold="True" ForeColor="White" Wrap="False" />
            <AlternatingRowStyle BackColor="White" CssClass="StyleSheet" ForeColor="#284775" />
        </asp:GridView>
        &nbsp;
    
    </div>
        <asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="C:\CTA Test.mdb"
            EnableCaching="True" SelectCommand="SELECT [Online Queries].[Query Number], [Online Queries].Response, [Online Queries].[Date/Time], [Online Queries].[Mail Sent], [Online Queries].[Variance(Local)] AS [Variance (Local)], LEFT ([Online Queries].Comment, 50) AS Comment, [Query Status].Status FROM ([Online Queries] INNER JOIN [Query Status] ON [Online Queries].[Query Number] = [Query Status].[Query Number]) WHERE ([Query Status].Status = 'Open') ORDER BY [Online Queries].[Query Number] DESC, [Online Queries].[Date/Time] DESC">
        </asp:AccessDataSource>
        &nbsp;
        <asp:Label ID="lblEmailAddress" runat="server" BorderStyle="Inset" BorderWidth="2px"
            Font-Size="Smaller" Height="104px" Style="z-index: 101; left: 711px; position: absolute;
            top: 88px" Text="Please view the table showing the list of open queries for which there has not been a response within 3 days. Then select the users below to whom you wish to send a reminder. Finally click the 'Auto Send' button to send the mails."
            Width="242px"></asp:Label>
        <asp:Button ID="btnAutoSend" runat="server" Style="z-index: 102; left: 852px; position: absolute;
            top: 29px" Text="Auto Send" Width="81px" ToolTip="Please ensure you select email addresses below" />
        <asp:Button ID="btnBack" runat="server" Style="z-index: 103;
            left: 752px; position: absolute; top: 29px" Text="Main" Width="81px" ToolTip="Return to main page" />
        <asp:Label ID="lblUpdated" runat="server" BackColor="White" BorderColor="White" Enabled="False"
            EnableViewState="False" ForeColor="Red" Style="z-index: 104; left: 764px; color: red;
            position: absolute; top: 62px" Text="All emails have been sent" Visible="False"
            Width="161px"></asp:Label>
        &nbsp;
        <asp:ListBox ID="lstEmailAddress" runat="server" Height="1446px" Style="z-index: 105;
            left: 711px; position: absolute; top: 201px" Width="245px"></asp:ListBox>
        &nbsp;
    </form>
</body>
</html>

Open in new window

0
Comment
Question by:AidenA
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 29

Expert Comment

by:David H.H.Lee
ID: 24094087
Hi AidenA,
Try remove the GridView's property as defined and specify each of asp:BoundField's ItemStyle-Width property accordingly. That should did the trick to avoid messy display for the returned result.
eg:  
<asp:BoundField DataField="Query Number" HeaderText="Query Number" SortExpression="Query Number" ItemStyle-Width="100px"/>
               



0
 
LVL 29

Expert Comment

by:David H.H.Lee
ID: 24094095
Hi AidenA,
Another approach is fixing it via CSS customization - table-layout:fixed.
Check this for further details:
http://msdn.microsoft.com/en-us/library/ms531161.aspx

0
 

Accepted Solution

by:
AidenA earned 0 total points
ID: 24095264
Hi, ok i think i see what the problem is.

I had one word which was 50 characters long (just for testing purposes). I guess the way ASP works, it can't split that and put it into another line... the only thing it can do is make the table width larger (or column width for that particular entry) to accomodate that particular word.

I guess it's an unlikely situation to occur but is there anything that can be done about it (obviously when I split the word up the table width is set to the correct size and the words simply go into new lines)
0
 
LVL 29

Assisted Solution

by:David H.H.Lee
David H.H.Lee earned 2000 total points
ID: 24104722
Hi AidenA,
Ok,here is one the common practice. I'll suggest you to truncate the returned text if the maximum length that exceed the characters length that allowed since you already specify all the gridview column's width. Those complete original text can be displayed under tooltips property.

0
 

Author Comment

by:AidenA
ID: 24105403
ok thanks. I'm not sure what I'm going to do with it right now, i might not use the gridview after all. But, that explains the problem and a possible solution anyway so that is useful if i continue with it. I think the problem could be solved as you suggest but i probably won't go to the trouble of it since i think it is quite unlikely for that situaion to occur.

thanks for your help! Aiden
0

Featured Post

Plesk WordPress Toolkit

Plesk's WordPress Toolkit allows server administrators, resellers and customers to manage their WordPress instances, enabling a variety of development workflows for WordPress admins of all skill levels, from beginners to pros.

See why 2/3 of Plesk servers use it.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

618 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question