locked
Header fill on GridView RRS feed

  • Question

  • User-444581312 posted

    I have the following grid which appears in a div taking up 33% of the screen, everything is fine apart from the header width not filling the remaining width like the data field does. 

     <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                            <ContentTemplate>
                                <asp:GridView ID="gvRetrieverState"  runat="server" CssClass="overview_grid" AutoGenerateColumns="False" GridLines="none" HeaderStyle-CssClass="FixedHeader" ItemStyle-CssClass="value_col" OnRowDataBound="gvRetrieverState_RowDataBound" Width="100%">
                                    <RowStyle HorizontalAlign="Center" />
                                    <AlternatingRowStyle HorizontalAlign="Center" />
                                    <Columns>
                                        <asp:BoundField HeaderText="Time" DataField="Time" HeaderStyle-Width="100px" ItemStyle-Width="100px"/>
                                        <asp:BoundField HeaderText="Direction" DataField="Direction" HeaderStyle-Width="75px" ItemStyle-Width="75px"/>
                                        <asp:BoundField HeaderText="Comand/Reply" DataField="Command"  />
                                    </Columns>
                                </asp:GridView>
    
                            </ContentTemplate>
                            <Triggers>

    Thursday, November 10, 2016 3:49 PM

Answers

  • User-271186128 posted

    Hi Darren Rockett.

    Based on Cathy's code and your CSS style, I try to create a sample using the following code, you can refer to it:

        <style type="text/css">
            .overview_grid {
                background-color: springgreen;
                margin-bottom: 2em;
                text-align: left;
                width: 100%;
            }
    
                .overview_grid .FixedHeader {
                    background-color: aquamarine;
                    /*;*/
                    text-align:center;
                }
    
            .overview_grid th  {
                font-size: 8pt;
                border-bottom: solid 2px #8694c1;
                padding: 5px;
            }
    
            .overview_grid td  {
                border-bottom: solid 2px #D8DBEA;
                padding: 5px;
                text-align: left;
            }
    
            .overview_grid .value_col {
                background-color: antiquewhite;
                text-align: left;
            }
    
            .overview_grid .value_col_selected  {
                background: #efefef;
                text-align: left;
            }
    
            .overview_grid .FixedHeader th  {
                text-align: left;
            }
    
            .overview_grid th  {
                text-align: left;
            }
    
            .overview_grid .hidden_col  {
                visibility: hidden;
            }
        </style>
    
            <div style="width:33%; float:left">
                <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <asp:GridView ID="gvRetrieverState" runat="server" CssClass="overview_grid" AutoGenerateColumns="False"
                            HeaderStyle-CssClass="FixedHeader" ItemStyle-CssClass="value_col" Width="100%">
                            <RowStyle HorizontalAlign="Center" />
                            <AlternatingRowStyle HorizontalAlign="Center" />
                            <Columns>
                                <asp:BoundField HeaderText="Time" DataField="ID" HeaderStyle-Width="100px" ItemStyle-Width="100px" />
                                <asp:BoundField HeaderText="Direction" DataField="Name" HeaderStyle-Width="75px" ItemStyle-Width="75px" />
                                <asp:BoundField HeaderText="Comand/Reply" DataField="Description" />
                            </Columns>
                        </asp:GridView>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
            <div style="background-color:aliceblue; width:67%; height:200px; float:right">
                Content Area
            </div>

    The output screenshot:

    In my sample, I remove the position attribute from the FixedHeader, and add two divs.

    If still not working, I suggest you could use F12 developer tools to check the CSS style.

    Best regards,
    Dillion

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 15, 2016 9:21 AM

All replies

  • User-707554951 posted

    Hi Darren Rockett.

    I try your code on my side to find your problem,

      <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                            <ContentTemplate>
                                <asp:GridView ID="gvRetrieverState"  runat="server" CssClass="overview_grid" AutoGenerateColumns="False"  HeaderStyle-CssClass="FixedHeader" ItemStyle-CssClass="value_col" Width="100%">
                                    <RowStyle HorizontalAlign="Center" />
                                    <AlternatingRowStyle HorizontalAlign="Center" />
                                    <Columns>
                                        <asp:BoundField HeaderText="Time" DataField="ID" HeaderStyle-Width="100px" ItemStyle-Width="100px"/>
                                        <asp:BoundField HeaderText="Direction" DataField="Name" HeaderStyle-Width="75px" ItemStyle-Width="75px"/>
                                        <asp:BoundField HeaderText="Comand/Reply" DataField="Description"  />
                                    </Columns>
                                </asp:GridView>
                            </ContentTemplate>
                            </asp:UpdatePanel>
     protected void Page_Load(object sender, EventArgs e)
            {
                if (!Page.IsPostBack)
                {
                    DataTable dt = new DataTable();
                    dt.Columns.AddRange(new DataColumn[]
                        {
    new DataColumn("ID",typeof(int)),
    new DataColumn("Name",typeof(string )),
    new DataColumn("Small",typeof(string ) ),
    new DataColumn("Lager",typeof(string )),
    new DataColumn("Description",typeof(string)),
        });
                    dt.Rows.Add(1, "Hydrangeas", "../Small/Hydrangeas1.jpg", "../Large/Hydrangeas2.jpg", "Works as a scientist in USA");
                    dt.Rows.Add(2, "Jellyfish1", "../Small/Jellyfish1.jpg", "../Large/Jellyfish2.jpg", "Wild life photographer in Russia");
    
                    gvRetrieverState.DataSource = dt;
                    gvRetrieverState.DataBind();
                }
            }

    However, I didn’t find your problem due to lack of some CssClass.
    So, I get the following Output:

    everything is fine apart from the header width not filling the remaining width like the data field does. 

    everything is fine apart from the header width not filling the remaining width like the data field does. 

    So, would your please provide us with your CssClass so that we could restore your problem or give more detailed description about your problem or image for your problem ?

    Best regards

    Cathy

    Friday, November 11, 2016 7:53 AM
  • User-444581312 posted

    Hi Cathy.

    body {
    	color#546498;
    	font-family"Verdana"Genevasans-serif;
    	font-size8pt;
    	margin0;
    	padding0;
    }
     
     
    title {
    	font-family"Verdana"Genevasans-serif;
    	font-size18px;
    	margin0 0 10px 0;
    }
     
    h1 {
    	font-family"Verdana"Genevasans-serif;
    	font-size16px;
    	margin0 0 10px 0;
    }
     
    h2 {
    	font-family"Verdana"Genevasans-serif;
    	font-size12px;
    	margin0 0 10px 0;
    }
     
    h3 {
    	font-family"Verdana"Genevasans-serif;
    	font-size10px;
    	margin0 0 10px 0;
    }
     
    a {
    	font-familyVerdana;
    	color#546498;
    }
     
    	a:hover {
    		font-familyVerdana;
    		colorgray;
    	}
     
    .full_browser {
    	width95%;
    	heightauto;
    	padding10px;
    }
     
     
    .center_browser {
    	margin0px auto;
    	width1044px;
    	heightauto;
    	padding10px;
    	border2px solid #acb4d1;
    	overflowauto;
    	border-radius15px;
    }
     
     
    .full_browser_border {
    	floatleft;
    	Width100%;
    	heightauto;
    	padding10px;
    	border2px solid #acb4d1;
    	border-radius15px;
    	background-colorwhite;
    }
     
    .left_divide {
    	floatleft;
    	width510px;
    	overflowauto;
    	background-colorwhite;
    	margin0px 0px 0px 0px;
    }
     
    .right_divide {
    	floatright;
    	width500px;
    	border2px solid #acb4d1;
    	margin0px 0px 0px 10px;
    	border-radius15px;
    	padding10px;
    	background#efefef;
    }
     
    .center_divide {
    	width100%;
    	overflowauto;
    	background-colorwhite;
    	margin0px 0px 0px 0px;
    }
     
    .center_divide_details_fixed_width {
    	margin0px auto;
    	width1044px;
    	padding10px;
    	background#efefef;
    	border2px solid #acb4d1;
    	overflowauto;
    	border-radius15px;
    }
     
    .center_divide_details {
    	margin-top10px;
    	widthauto;
    	height100%;
    	padding10px;
    	background#efefef;
    	border2px solid #acb4d1;
    	overflowauto;
    	border-radius15px;
    }
     
    .border_colour_back {
    	padding10px;
    	background#efefef;
    	border2px solid #acb4d1;
    	overflowauto;
    	border-radius15px;
    }
     
    .border_colour_white {
    	padding10px;
    	background#ffffff;
    	border2px solid #acb4d1;
    	overflowauto;
    	border-radius15px;
    }
     
    .config_error {
    	widthauto;
    	text-aligncenter;
    	margin0px auto;
    	font-familyVerdana;
    	font-size8pt;
    }
     
    .config_right_error {
    	floatright;
    	width480px;
    	margin0px 0px 0px 10px;
    	font-familyVerdana;
    	font-size8pt;
    }
     
     
     
    .overview_grid {
    	margin-bottom2em;
    	text-alignleft;
    	width100%;
    }
     
    	.overview_grid th {
    		font-size8pt;
    		border-bottomsolid 2px #8694c1;
    		padding5px;
    	}
     
    	.overview_grid td {
    		border-bottomsolid 2px #D8DBEA;
    		padding5px;
    		text-alignleft;
    	}
     
    	.overview_grid .value_col {
    		colorBlack;
    		text-alignleft;
    	}
     
    	.overview_grid .value_col_selected {
    		background#efefef;
    		text-alignleft;
    	}
     
    	.overview_grid .FixedHeader {
    		positionabsolute;
    		background-colorwhite;
    	}
     
    		.overview_grid .FixedHeader th {
    			text-alignleft;
    		}
     
    	.overview_grid th {
    		text-alignleft;
    	}
     
    	.overview_grid .hidden_col {
    		visibilityhidden;
    	}
     
     
    .mimic_grid {
    	margin-bottom2em;
    	text-alignleft;
    	width100%;
    }
     
    	.mimic_grid th {
    		font-weight300;
    		font-size6pt;
    		border-bottomsolid 2px #8694c1;
    		padding1px;
    	}
     
    	.mimic_grid td {
    		border-bottomsolid 2px #D8DBEA;
    		padding1px;
    		text-alignleft;
    	}
     
    	.mimic_grid .footer {
    		text-aligncenter;
    		font-weight300;
    		font-size6pt;
    	}
     
    .info_table {
    	border-collapseseparate;
    	border-spacing10px;
    }
     
    .button_group_table {
    	floatright;
    	border-collapseseparate;
    	border-spacing10px;
    }
     
    .button_group_table_centre {
    	margin0px auto;
    	border-collapseseparate;
    	border-spacing10px;
    }
     
    .ConfigurationPopup {
    	bordersolid 5px #acb4d1;
    	padding10px 10px 10px 10px;
    	width430px;
    	background#ffffff;
    }
     
    .TextBoxTitle {
    	width245px;
    	color#546498;
    	font-familyVerdana;
    	font-size12px;
    }
     
     
    .error_label {
    	colorRed;
    	height20px;
    	font-size10px;
    }
     
    .modalBackground {
    	background-colorgrey;
    	opacity0.1;
    }
     
    .LSEPrompt {
    	height20px;
    	font-familyVerdana;
    	font-size8pt;
    }
     
    .DropDownList {
    	width250px;
    	color#546498;
    	font-familyVerdana;
    	font-size8pt;
    }
     
     
    .DropDownListH1 {
    	width250px;
    	color#546498;
    	displayblock;
    	font-size16pt;
    	font-weightbold;
    }
     
     
    .LSEPrompt {
    	height13px;
    	width250px;
    	font-familyVerdana;
    	font-size8pt;
    }
     
    .calandar .ajax__calendar_container {
    	background#f9f9f9;
    	color#546498;
    	font-weightbold;
    	z-index1;
    }
     
    .calandar .ajax__calendar_title {
    	colorGreen;
    }
     
    .calandar .ajax__calendar_dayname {
    	colorBlack;
    	font-weightbold;
    	font-variantsmall-caps;
    }
     
    .calandar .ajax__calendar_active {
    	colorGreen;
    }
     
    .calandar .ajax__calendar_hover {
    	colorGreen;
    }
     
    .calandar .ajax__calendar_other {
    	colorGray;
    }
     
    #banner {
    	background-color#8694c1;
    	height30px;
    }
     
    #tabs {
    	background-color#8694c1;
    	font-size11pt;
    	Height21px;
    }
     
    	#tabs ul {
    		list-stylenone;
    		margin0 0 0 0;
    		padding0;
    		floatleft;
    		width1200px;
    	}
     
    	#tabs li {
    		border1px solid #acb4d1;
    		border-bottom-width0px;
    		floatleft;
    		font-weightbold;
    		margin0 0 0 0.1em;
    		width200px;
    		font-size11pt;
    	}
     
    	#tabs a:hover {
    		backgroundurl('Images/MenuHover.png') repeat-x;
    		color#546498;
    	}
     
    	#tabs img {
    		clearleft;
    		floatright;
    		positionabsolute;
    	}
     
    .tab_selected {
    	backgroundurl('Images/MenuSelect.png') repeat-x;
    	colorwhite;
    	font-weightnormal;
    	displayblock;
    	padding0 1em;
    	border-color#acb4d1;
    	text-aligncenter;
    	text-decorationnone;
    }
     
    .tab_unselected {
    	backgroundurl('Images/MenuBack.png') repeat-x;
    	colorwhite/*White;*/
    	font-weightnormal;
    	displayblock;
    	padding0 1em;
    	text-aligncenter;
    	text-decorationnone;
    }
     
    #subtabs {
    	background-color#efefef;
    	border1px solid #acb4d1;
    	clearboth;
    	color#546498;
    	font-size10pt;
    	height18px;
    }
     
    	#subtabs ul {
    		floatleft;
    		list-stylenone;
    		margin0;
    		padding0;
    	}
     
    	#subtabs li {
    		displayinline;
    		margin0px;
    	}
     
    	#subtabs a {
    		color#546498;
    		padding0 1em;
    		text-aligncenter;
    		text-decorationnone;
    	}
     
    		#subtabs a:hover {
    			text-decorationunderline;
    		}
     
    	#subtabs #subtab_selected a {
    		font-weightbold;
    	}
     
    #login {
    	font-size10pt;
    	text-alignright;
    	background-color#8694c1;
    }
     
    	#login span {
    		colorWhite;
    	}
     
    	#login a {
    		background-colorTransparent;
    		padding0 5px 0 5px;
    		margin0;
    	}
     
    		#login a:hover {
    			text-decorationnone;
    			background-color#546498;
    			colorWhite;
    		}
     
     
    .HideButton {
    	Displaynone;
    }
     
     
    .login {
    	padding10px;
    	margin200px auto;
    	text-aligncenter;
    	width330px;
    	border-top1px #7482B7 solid;
    	border-bottom1px #7482B7 solid;
    	border-left1px #7482B7 solid;
    	border-right1px #7482B7 solid;
    	background-color#efefef;
    }
     
    .input_box {
    	color#546498;
    	borderSolid 2px #B7BDD9;
    }
     
    .btn_small {
    	color#546498;
    	font-familyVerdana;
    	font-size7pt;
    	width90px;
    	height20px;
    }
     
    .btn_large {
    	color#546498;
    	font-family"Verdana"Genevasans-serif;
    	font-size12pt;
    	font-weightbold;
    	width195px;
    }
     
    .Red {
    	backgroundurl('Images/MenuSelect.png') repeat-x;
    	colorwhite;
    }
     
    .RadioButtonList {
    	font-family"Verdana"Genevasans-serif;
    	color#546498;
    	font-size10pt;
    	font-weightbold;
    	floatright;
    }
     
    	.RadioButtonList label {
    		margin-right50px;
    	}
    
    Friday, November 11, 2016 8:49 AM
  • User-271186128 posted

    Hi Darren Rockett.

    Based on Cathy's code and your CSS style, I try to create a sample using the following code, you can refer to it:

        <style type="text/css">
            .overview_grid {
                background-color: springgreen;
                margin-bottom: 2em;
                text-align: left;
                width: 100%;
            }
    
                .overview_grid .FixedHeader {
                    background-color: aquamarine;
                    /*;*/
                    text-align:center;
                }
    
            .overview_grid th  {
                font-size: 8pt;
                border-bottom: solid 2px #8694c1;
                padding: 5px;
            }
    
            .overview_grid td  {
                border-bottom: solid 2px #D8DBEA;
                padding: 5px;
                text-align: left;
            }
    
            .overview_grid .value_col {
                background-color: antiquewhite;
                text-align: left;
            }
    
            .overview_grid .value_col_selected  {
                background: #efefef;
                text-align: left;
            }
    
            .overview_grid .FixedHeader th  {
                text-align: left;
            }
    
            .overview_grid th  {
                text-align: left;
            }
    
            .overview_grid .hidden_col  {
                visibility: hidden;
            }
        </style>
    
            <div style="width:33%; float:left">
                <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <asp:GridView ID="gvRetrieverState" runat="server" CssClass="overview_grid" AutoGenerateColumns="False"
                            HeaderStyle-CssClass="FixedHeader" ItemStyle-CssClass="value_col" Width="100%">
                            <RowStyle HorizontalAlign="Center" />
                            <AlternatingRowStyle HorizontalAlign="Center" />
                            <Columns>
                                <asp:BoundField HeaderText="Time" DataField="ID" HeaderStyle-Width="100px" ItemStyle-Width="100px" />
                                <asp:BoundField HeaderText="Direction" DataField="Name" HeaderStyle-Width="75px" ItemStyle-Width="75px" />
                                <asp:BoundField HeaderText="Comand/Reply" DataField="Description" />
                            </Columns>
                        </asp:GridView>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
            <div style="background-color:aliceblue; width:67%; height:200px; float:right">
                Content Area
            </div>

    The output screenshot:

    In my sample, I remove the position attribute from the FixedHeader, and add two divs.

    If still not working, I suggest you could use F12 developer tools to check the CSS style.

    Best regards,
    Dillion

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 15, 2016 9:21 AM