We help IT Professionals succeed at work.

asp/css question

rutledgj
rutledgj asked
on
649 Views
Last Modified: 2012-06-22
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> <!--Pagecontainer-->


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.
Comment
Watch Question

Alfredo Luis Torres SerranoASP .Net Developer

Commented:
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>
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

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

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

Interesting... what did it change it to?

Author

Commented:
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>
       
         
            <!--div id="tabpanelcontainer"-->
                <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-->
           
           

     
     </div> <!--Pagecontainer-->










View Source:

(see attached)
viewsource.aspx

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.