How to style controls in ASP.NET AJAX TabControl

StackOverflow https://stackoverflow.com/questions/23584611

  •  19-07-2023
  •  | 
  •  

Question

I am attempting to apply styles to a GridView in an AJAX TabControl. The styles are applied in the designer, but when viewed in a browser the control is rendered without any styles. If I remove the GridView from the TabControl the styles are applied.

Here is the code:

    <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>    
   <style type="text/css">
       html
       {
           font-family:Arial;
       }
       #grid
       {
           border:none;
       }    
        #grid th
        {
            background:linear-gradient(#FAFAFA, #D8D8D8);            
            padding:5px;
            border-bottom:1px solid gray;
            border-top: 1px solid gray;    
            border-left:none;
            border-right:none;   
            font-style:normal; 
            font-weight: normal;

        }
        #grid td
        {
            padding:5px;  
            border-bottom:1px solid gray;
            border-top: 1px solid gray;    
            border-left:none;
            border-right:none;  
            width:100px;     
        }
        .select
        {
           text-decoration: none;
       }
       .select:hover
       {
           text-decoration: underline;
       }
   </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <asp:TabContainer ID="TabContainer1" runat="server">
        <asp:TabPanel ID="pnl1" runat="server" HeaderText="My Tab">           
            <ContentTemplate>
                <asp:GridView ID="grid" runat="server"
            onselectedindexchanged="grid_SelectedIndexChanged">
            <Columns>
                <asp:TemplateField>
                    <EditItemTemplate >
                        <asp:CheckBox ID="CheckBox1" runat="server" />
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:CheckBox ID="CheckBox1" runat="server" />
                    </ItemTemplate>
                    <ItemStyle Width="30px" />                    
                </asp:TemplateField>
                <asp:TemplateField ShowHeader="False">
                    <ItemTemplate>
                        <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" 
                            CommandName="Select" Text="Select"></asp:LinkButton>
                    </ItemTemplate>
                    <ControlStyle CssClass="select" />
                    <ItemStyle Width="60px" CssClass="select" />
                </asp:TemplateField>
            </Columns>
            <HeaderStyle HorizontalAlign="Left" />
            <RowStyle HorizontalAlign="Left" />                    
        </asp:GridView>
            </ContentTemplate>
        </asp:TabPanel>
        </asp:TabContainer>
    </div>      
    </form>
</body>
</html>

Why are the styles not being applied to the GridView?

Was it helpful?

Solution

The id of the GridView will no longer be just grid when inside the TabControl. So the css style of #grid will no longer work.

The id of your grid would be something like TabContainer1_pnl1_grid.

One way to get your styles to work is to assign a CssClass of grid(or whatever you want to call it) on your GridView.

<asp:GridView ID="grid" runat="server" CssClass="grid">

and change your styles to use .grid instead of #grid.

.grid
{
    border: none;
}
.grid th
{
    background: linear-gradient(#FAFAFA, #D8D8D8);
    padding: 5px;
    border-bottom: 1px solid gray;
    border-top: 1px solid gray;
    border-left: none;
    border-right: none;
    font-style: normal;
    font-weight: normal;
}
.grid td
{
    padding: 5px;
    border-bottom: 1px solid gray;
    border-top: 1px solid gray;
    border-left: none;
    border-right: none;
    width: 100px;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top