+1-888-365-2779
Try Now
More in this section

Forums / Designing with Sitefinity / RadPanelBar Css Bug and how to fix...

RadPanelBar Css Bug and how to fix...

5 posts, 0 answered
  1. Hugues
    Hugues avatar
    5 posts
    Registered:
    08 Dec 2008
    11 Jan 2009
    Link to this post
    Hi,

    I'm new to Sitefinity so please bare with me. I created a "Services" page which is a page group containing other single pages and one other page group called "Workshops" who's single pages use the NewSilver Theme and inner template. The problem I'm having is that when I click on the Workshops item to expand it's sub items, the items overlap the edge of the container and it ends up being a bit ugly. Inspecting the resulting html code I can see that the problem is within the <ul> element whose class is "group level1". The width should not be set to 100%, but 90% instead. How can I override the style for that element?

    <div class="slide" style="overflow: visible; display: block; z-index: 13; height: auto;">
    <ul class="group level1" style="display: block; z-index: 13; width: 100%; top: 0px;">
    <li class="item first">
    </li>
    <li class="item last">
    </li>
    </ul>
    </div>

    Thanks in advance!

    Hugues


  2. Hugues
    Hugues avatar
    5 posts
    Registered:
    08 Dec 2008
    11 Jan 2009
    Link to this post
    In case you would like steps to reproduce:
    1) Create a page group containing another page group. Use the inner template with the NewSilver theme for all pages.
    2) Click the top page group in order to expand it and see the next page group. Expand the second page group and notice that the items extend beyond the edge of the web site on the right hand side.

  3. Pepi
    Pepi avatar
    981 posts
    Registered:
    08 Dec 2016
    12 Jan 2009
    Link to this post
    Hi Hugues,

    Please, open ~/App_Themes/NewSilver/Panelbar/style.css file and edit it according to the instructions below:
    1. Add the following CSS declaration:

    .RadPanelbar_SitefinityCompanyRadPanelbar .slide { 
        widthauto !important; 

    2. Modify .RadPanelbar_SitefinityCompanyRadPanelbar ul like this:

    .RadPanelbar_SitefinityCompanyRadPanelbar ul { 
        margin: 0 0 0 21px !important; 
        padding: 0; 
        list-style-typenone
        border-top1px solid #d7d7d7
        font-size: 1.2em; 
        widthauto !important; 

    Do let us know if this helps.

    All the best,
    Pepi
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  4. Hugues
    Hugues avatar
    5 posts
    Registered:
    08 Dec 2008
    12 Jan 2009
    Link to this post
    Thanks Pepi!

    It worked like a charm and I learned a bit in the process...

    Have a great day!

    Hugues
  5. Hugues
    Hugues avatar
    5 posts
    Registered:
    08 Dec 2008
    12 Jan 2009
    Link to this post
    Thanks Pepi!

    It worked like a charm and I learned a bit in the process...

    Have a great day!

    Hugues
Register for webinar
5 posts, 0 answered