asked on

asp/css question

I'm new to asp so here is what I'm trying to do.

I have a master page that loads a child page.
On the child page I have this structure:

<div id="pageContainer">
<div id="orgDropDown">
<asp:DropDownList id="ddlProvider" runat="server" AutoPostBack="True"> </asp:DropDownList>
</div>

<asp:TabContainer id="tabcontainer" runat="server>
<asp:TabPanel runat="server" HeaderText="Master" ID="tpMaster" ScrollBars="Vertical"
<ContentTemplate></ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
</div> 

In my code I'm dynamically creating a table and assigning it to the tabpanel. All is good so far except I can't get the scrollbars for the tab panel to show.

I tried using css :

#tpMaster
{
      width:97%;
      height: 490px;
      background-color:Aqua;
      overflow:auto;
}

But this does nothing. It doesn't even change the background color of the panel. It is just white.

I'm loading the stylesheet in the page_prerender code:
If Not IsNothing(Me.Header) Then
Dim hl As New HtmlLink()
hl.Href = "~/Styles/HL7Parser.css"
hl.ID = "MyLink"
hl.Attributes.Add("type", "text/css")
hl.Attributes.Add("rel", "stylesheet")
Me.Header.Controls.Add(hl)
End If

I'm building the table and loading it in the ddlProvider_SelectedIndexChanged section.

So I guess the style is being applied before the table it built. Is this the problem? How do you make the style get applied to the table?

Thanks.

Alfredo Luis Torres Serrano

f you want to automatically add a scrollbar, if the control inside a TabPanel (kept in a ASP.NET Ajax TabContainer), is greater than the width of the TabPanel, then just add a ‘Panel’ control (<asp:Panel>) inside the Tab, set the ScrollBars="Vertical" property and drop the control inside the ‘Panel’.

<cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1">
<ContentTemplate>
<asp:Panel runat="server" ID="Panel1" ScrollBars="Vertical">
<asp:TextBox ID="TextBox1" runat="server" Width="300px" Height="30px"></asp:TextBox><br />
</asp:Panel>
</ContentTemplate>
</cc1:TabPanel>

ASKER CERTIFIED SOLUTION

Member_2_4913559

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

rutledgj

ASKER

Actually, when I looked at the source both class and id were changed. I'll add a div and use it.

Member_2_4913559

The CSS class should not have been changed by asp.net??!!

Interesting... what did it change it to?

rutledgj

ASKER

Not really sure what I'm seeing. Here is the code and source.

<div id="pageContainer">

<div id="orgDropDown">
<asp:DropDownList id="ddlProvider" runat="server" AutoPostBack="True"></asp:DropDownList>
</div>


<asp:TabContainer ID="tabcontainer" runat="server" ActiveTabIndex="0">
<asp:TabPanel runat="server" HeaderText="Master" CssClass="tpnlMaster" ID="tpMaster" ScrollBars="Vertical">
<ContentTemplate>

</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel runat="server" HeaderText="Auxilliary" ID="tpAuxilliary">
<ContentTemplate>

</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel runat="server" HeaderText="Insurance" ID="tpInsurance">
<ContentTemplate>

</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel runat="server" HeaderText="Scheduling" ID="tpScheduling">
<ContentTemplate>

</ContentTemplate>
</asp:TabPanel>

</asp:TabContainer>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>


</div> 

View Source:

(see attached)
viewsource.aspx