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?

Était-ce utile?

La 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;
}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top