locked
Want my Gridview to fit all screen resolutions RRS feed

  • Question

  • User-911157248 posted

    From what I understand, asp renders my gridview page(with all the nice data a user has asked for) replete with markup tables and  am I correct that tables do not work with a css stylesheet?

    If so, do I need to go with the css friendly adapter? Does this imply a gridview adapter?

     

    Tuesday, March 25, 2008 3:33 PM

All replies

  • User1186257875 posted

    asp renders my gridview page(with all the nice data a user has asked for) replete with markup tables

    Yes that is true!

    I correct that tables do not work with a css stylesheet

    Thats false!  CSS will work with any element!

    Set the CssClass on the gridview:

    <asp:GridView CssClass="MyClass" ...

    then in your CSS class then add:

    table.MyClass {
    width:100%;
    }

    Tuesday, March 25, 2008 6:57 PM
  • User-911157248 posted

    That didn't seem to have any effect as far as having higher resolution and having the gridview expand to fill the entire screen. It only fills about 1/2 way across.

    <asp:GridView ID="GridView1" runat="server" CssClass="stylesheet1.css" AllowSorting="True" AutoGenerateColumns="False" DataSourceID="VDataSourceG" Font-Names="Comic sans" Font-Size="10" CellPadding="4" BackColor="White" BorderColor="#CC9966" BorderStyle="None" BorderWidth="1px" DataKeyNames="lmca_nbr" ShowFooter="True" Width="542px" Height="166px">

    <FooterStyle Wrap="False" BackColor="#FFFFCC" ForeColor="#330099" />

    <RowStyle Wrap="False" BackColor="White" ForeColor="#330099" />

    <Columns>

    <asp:HyperLinkField DataNavigateUrlFields="lmca_nbr" DataNavigateUrlFormatString="Details1.aspx?lmca_nbr={0}"

    DataTextField="lmca_nbr" Text="Details" />

    <asp:BoundField DataField="OFFICE" HeaderText="OFFICE" SortExpression="OFFICE" />

    <asp:BoundField DataField="CUST_NAME" HeaderText="CUST_NAME" SortExpression="CUST_NAME" >

    <ItemStyle Wrap="False" />

    </asp:BoundField>

    <asp:BoundField DataField="NOUN" HeaderText="NOUN" SortExpression="NOUN" >

    <ItemStyle Wrap="False" />

    <HeaderStyle CssClass="FixedTableLayout" Wrap="False" />

    <FooterStyle Wrap="False" />

    </asp:BoundField>

    <asp:BoundField DataField="PRICE" HeaderText="PRICE" SortExpression="PRICE" />

    <asp:BoundField DataField="STATUS" HeaderText="STATUS" SortExpression="STATUS" />

    <asp:BoundField DataField="Jon" HeaderText="JON" SortExpression="JON" />

    <asp:BoundField DataField="method" HeaderText="Purch Method" >

    <ItemStyle Wrap="False" />

    </asp:BoundField>

    </Columns>

     

    <PagerStyle Wrap="False" BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />

    <SelectedRowStyle Wrap="False" BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />

    <HeaderStyle Wrap="False" BackColor="DarkGoldenrod" Font-Bold="True" ForeColor="#FFFFCC" />

    <EditRowStyle Wrap="False" />

    <AlternatingRowStyle Wrap="False" />

    <EmptyDataRowStyle Wrap="False" />

    </asp:GridView>

    Wednesday, March 26, 2008 9:04 AM
  • User-1066334067 posted

    You've hardwired the width into your GridView which might explain why the stylesheet isn't having any effect:

    <asp:GridView ID="GridView1" runat="server" CssClass="stylesheet1.css" AllowSorting="True" AutoGenerateColumns="False" DataSourceID="VDataSourceG" Font-Names="Comic sans" Font-Size="10" CellPadding="4" BackColor="White" BorderColor="#CC9966" BorderStyle="None" BorderWidth="1px" DataKeyNames="lmca_nbr" ShowFooter="True" Width="542px" Height="166px">

     

    Wednesday, March 26, 2008 9:16 AM
  • User-911157248 posted

    I've modified it to remove the width and height, but same results :(

    <asp:GridView ID="GridView1" runat="server" CssClass="stylesheet1.css" AllowSorting="True" AutoGenerateColumns="False" DataSourceID="VDataSourceG" Font-Names="Comic sans" Font-Size="10" CellPadding="4" BackColor="White" BorderColor="#CC9966" BorderStyle="None" BorderWidth="1px" DataKeyNames="lmca_nbr" ShowFooter="True" >

    Wednesday, March 26, 2008 9:32 AM
  • User719677678 posted

    Add this to your head-section (between <head> and </head>): <link rel="stylesheet" type="text/css" href="stylesheet1.css" />
    And modify your CssClass to the name of your css class which you have defined in your stylesheet
    Eg:
    stylesheet1.css:
    .mytable { width: 100%; }

    And then in your .aspx-file:
    <asp:GridView ID="GridView1" runat="server" CssClass="mytable" AllowSorting="True" AutoGenerateColumns="False" DataSourceID="VDataSourceG" Font-Names="Comic sans" Font-Size="10" CellPadding="4" BackColor="White" BorderColor="#CC9966" BorderStyle="None" BorderWidth="1px" DataKeyNames="lmca_nbr" ShowFooter="True" >

    Wednesday, March 26, 2008 9:41 AM
  • User-911157248 posted

    aha, that worked, thanks.

    What about the css friendly adapters that are in vogue? Would your method supercede them or is that some other issue?

     

    Wednesday, March 26, 2008 10:13 AM
  • User1186257875 posted

    Sorry i obviously didnt explain myself very well!  The problem lies here: 

    <asp:GridView ID="GridView1" runat="server" CssClass="stylesheet1.css"

    1.  I see you have an external CSS sheet which is good!  Add this as a link on the page (if your using asp.net themes this is done for you):

    <link href="stylesheet1.css" type="text/css" rel="stylesheet" />

    2.  Add a new class to the stylesheet like so:

    table.MyClass {
    width:100%;
    }

    3.  Add the name of the class ("MyClass" in the above example) to your gridview:

    <asp:GridView ID="GridView1" runat="server" CssClass="MyClass"

    and that should be it :)

     

    Wednesday, March 26, 2008 1:55 PM
  • User-911157248 posted

    So does a gridview get rendered as a typical table?

    I have a detailsview that I want in a particular layout as well, do I follow the same rules?

    And, what about CSS friendly adapters, would those apply in this kind a of a situation?

    Thanks for the advice!

     

    Wednesday, March 26, 2008 3:25 PM
  • User1186257875 posted

    Yes follow the same thing for the details view!  You can view the output by creating one and then viewing the source in the browser!

    You dont really need to use adapters unless you want to change the output that is rendered for some reason!

     

    Wednesday, March 26, 2008 5:55 PM
  • User443786182 posted

    HI David!

    I have the same issue, but I want my grid view to fit into any browser, including mine, no matter the size of the browser. If a user decides to resize his/her browser, the grid view has to fit into that browser. Do I implement the same technique? Cuz I've done it, but it seems like it's not working.

    Thursday, June 5, 2008 11:21 AM
  • User1186257875 posted

    Yes it will work in any browser.  Why is it not working? Its rather hard to diagnose without seeing what your doing!

    Friday, June 6, 2008 7:22 PM
  • User443786182 posted

    Here's the code: 

    <body>

    <form id="form1" runat="server">

    <div>

    <asp:Panel ID="Panel1" runat="server" BorderStyle="Double" Height="552px" Style="z-index: 100;

    left: 11px; ; top: 21px" Width="977px" ScrollBars="Auto">

    <asp:LinkButton ID="lbtnGoToModify" runat="server" Height="27px" Style="z-index: 100;

    left: 49px; ; top: 76px" Width="300px">Go to the Modify Page</asp:LinkButton>

    &nbsp; &nbsp;&nbsp;

    <asp:DropDownList ID="ddlRSM" runat="server" Style="z-index: 100; left: 439px;

    ; top: 82px" DataSourceID="SqlDataSource1" DataTextField="RSM" DataValueField="RSMID" AutoPostBack="True" Width="185px" CssClass="PageResize">

    </asp:DropDownList>

    <asp:LinkButton ID="lbtnMainPage" runat="server" Style="z-index: 101; left: 48px;

    ; top: 30px" Width="277px" Height="24px">Return to Main Page</asp:LinkButton>

    <asp:Button ID="btnClose" runat="server" Style="z-index: 102; left: 721px; ;

    top: 77px" Text="Close Application" OnClientClick="javaScript:window.close(); return false;"/>

    &nbsp; &nbsp;&nbsp;<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TestWinRateConnectionString %>"

    SelectCommand="SELECT * FROM [RSM]"></asp:SqlDataSource>

    &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;<br />

    &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;

     

    &nbsp;&nbsp;&nbsp;

    &nbsp; &nbsp; &nbsp;&nbsp;<br />

     

    &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;

    <asp:GridView ID="gvWinRate" runat="server" BackColor="#CCCCCC"

    BorderColor="#999999" BorderStyle="Solid" BorderWidth="3px" CellPadding="4" Style="z-index: 103; left: 19px;

    ; top: 118px" HorizontalAlign="Center" CellSpacing="2" ForeColor="Black" Width="929px" CssClass="size">

    <FooterStyle BackColor="#CCCCCC" />

    <RowStyle BackColor="White" />

    <SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />

    <PagerStyle BackColor="#CCCCCC" ForeColor="Black" HorizontalAlign="Left" />

    <HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />

    </asp:GridView>

    &nbsp;&nbsp;&nbsp;

    </asp:Panel>

    </div>

    </form>

    </body>

    Monday, June 9, 2008 9:44 AM
  • User1186257875 posted

    CssClass="stylesheet1.css"
     

    Well that wouldnt work Stylesheet1.css is not a css class it is a CSS file.  You need to place the name of the CLASS in there (one that starts with a "." in that external .css file).  Like so:

    CssClass="MyWideGridView"

    Then inside Stylesheet1.css :

    .MyWideGridView{
    width:100%;
    }

    Dont forget to attach the stylesheet as well :

    <LINK rel="stylesheet" href="Stylesheet1.css" mce_href="Stylesheet1.css" type="text/css">

    This should be within the <head> section of your HTML page

     

    Thursday, June 12, 2008 4:41 AM