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

Forums / Designing with Sitefinity / RadPanelBar styling

RadPanelBar styling

12 posts, 0 answered
  1. Chris Dumper
    Chris Dumper avatar
    16 posts
    Registered:
    02 Apr 2005
    26 Feb 2010
    Link to this post
    Hi I'm creating a custom skin for a RadPanelBar & am trying to understand the css. What I can't control is the white space between the menu items (see attached png). I've tried setting the padding&margin of  
    .RadPanelBar_Panel ul.rpRootGroup to 0 & the same for  .RadPanelBar_Panel .rpItem but neither made a difference. That part of the css is pasted below. I've blocked the BaseStyleSheet too. Please help. Thx ... c

     
    <telerik:RadPanelBar   
        runat="server" EnableEmbeddedSkins="false"
        runat="server" EnableEmbeddedBaseStylesheet="false"
        skin="Panel"
    </telerik:RadPanelBar>
    .RadPanelBar_Panel {
        width: 100% !important;
        float: left;
        background-color: #fff;
        /* position: relative; */
    }
      
    .RadPanelBar_Panel ul.rpRootGroup {
        margin: 0px;
        padding: 0px;
        border:0px;
        background-color: #fff;
        width: 100%;
        float: left;
        /* position: relative; */
    }
      
    .sidebar .RadPanelBar .rpSlide {
        overflow: visible;
        width: 100%;
        float: left;
    }
      
    .RadPanelBar_Panel ul li {
        background-color:Red;
        padding: 0px;
        margin: 0px;
        list-style-type: none;
        width: 100%;
        float: left;
        /* position: relative; */
    }
      
    .RadPanelBar_Panel .rpItem 
    {
        padding:0px;
        margin:0px;
    }
      
    .RadPanelBar_Panel ul li a:link, 
    .RadPanelBar_Panel ul li a:visited, 
    .RadPanelBar_Panel ul li a:hover, 
    .RadPanelBar_Panel ul li a:active 
    {
        color: #eee;
        display: block;
        /* width: auto !important;
        float: left; */
        border-top: 0px solid #2b657b;
        border-bottom: 0px solid #3e94b5;
    }
  2. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    01 Mar 2010
    Link to this post
    Hello Chris Dumper,

    Thank you for using our services.

    Could you please check your theme CSS if you have any styles for <ul> and <li> applying margin rules. In the built in Sitefinity themes we do have style rules adding top margin of 10px for example. Try adding !important for margin and padding styles to make sure they do not get overriden.
     
    Greetings,
    Radoslav Georgiev
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. Chris Dumper
    Chris Dumper avatar
    16 posts
    Registered:
    02 Apr 2005
    01 Mar 2010
    Link to this post
    Many thanks Radoslav. The !important suggestion resolved my problems. One last question. The panelbar's submenu doesn't hide when not selected. Why??? Thanks.
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    02 Mar 2010
    Link to this post
    Hello Chris Dumper,

    RadPanelBar control does not have sub menus. The control has RadPanelItems - RootItems, LevelItems, SelectedItem.

    • At the top level are the root items. These items are always visible. They are available using the Items property of the panel bar (RadPanelBar.Items).
    • Each root item may have, nested within it, a set of child items. Children of the root items are considered level 1 items. They are available using the Items property of the root item (RadPanelItem.Items)
    • Child items may have, nested within them, their own sets of child items. Children of level 1 items are considered level 2 items; children of level 2 items are considered level 3 items; and so on.
    The child items could not be collapsed in Multiple Expanded Items property is set to true or EnableEmbeddedBaseStylesheet is set to false. You may find this demo useful - PanelBar / Expand Behavior

    Best wishes,
    Ivan Dimitrov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  5. Chris Dumper
    Chris Dumper avatar
    16 posts
    Registered:
    02 Apr 2005
    02 Mar 2010
    Link to this post
    Hi Ivan sorry, the terms I was using were wrong. Below is the code & css. The menu is boring but what is wanted but the collapse never happens & I don't see why?? Thanks yet again .. c

    <telerik:RadPanelBar   
        runat="server" EnableEmbeddedSkins="false"
        runat="server" EnableEmbeddedBaseStylesheet="false"
        skin="Panel" 
        AllowCollapseAllItems="true" ExpandMode="MultipleExpandedItems"
        PreventCollapse="false">
    </telerik:RadPanelBar>

    .RadPanelBar_Panel {
        width: 100% !important;
        float: left;
        /* position: relative; */
    }
    .RadPanelBar_Panel ul {
        margin: 0;
        padding: 0;
        background-color: #fff;
        width: 100%;
        float: left;
        /* position: relative; */
    }
    .RadPanelBar_Panel ul ul.rpGroup {
        padding-bottom: 13px;
        background-color: #bd4152;
    }
    .sidebar .RadPanelBar .rpSlide {
        overflow: visible;
        width: 100%;
        float: left;
    }
    .RadPanelBar_Panel ul li.rpItem {
        margin: 5px 0px 0px 0px !important;
        padding: 0;
        background-color: #4a73a9;
        list-style-type: none;
        width: 100%;
        float: left;
        /* position: relative; */
    }
      
    .RadPanelBar_Panel ul li a:link, 
    .RadPanelBar_Panel ul li a:visited, 
    .RadPanelBar_Panel ul li a:hover, 
    .RadPanelBar_Panel ul li a:active 
    {
        color: #FFEBD7;
        display: block;
        /* width: auto !important;
        float: left; 
        border-top: 1px solid #600406;
        border-bottom: 1px solid #9f4a3e;*/
    }
    .RadPanelBar_Panel ul li a:hover
    {
        background: transparent url(rpHover.gif) no-repeat 0 50%;
    }
    .RadPanelBar_Panel ul ul li a:hover
    {
        background-image: none;
        font-weight: bold;
    }
    .RadPanelBar_Panel ul li a:link .rpText, 
    .RadPanelBar_Panel ul li a:visited .rpText, 
    .RadPanelBar_Panel ul li a:hover .rpText, 
    .RadPanelBar_Panel ul li a:active .rpText
    {
        display: block;
        padding: 5px 10px 5px 21px;
    }
    .RadPanelBar_Panel ul li a.rpSelected:link, 
    .RadPanelBar_Panel ul li a.rpSelected:visited, 
    .RadPanelBar_Panel ul li a.rpSelected:hover, 
    .RadPanelBar_Panel ul li a.rpSelected:active,
    .RadPanelBar_Panel ul li a.rpExpanded:link, 
    .RadPanelBar_Panel ul li a.rpExpanded:visited, 
    .RadPanelBar_Panel ul li a.rpExpanded:hover, 
    .RadPanelBar_Panel ul li a.rpExpanded:active 
    {
        background: #4a73a9 url(rpHover.gif) no-repeat 0 50%;
        border-top: 0;
        padding-top: 1px;
        font-weight: bold;
    }
      
      
      
    .RadPanelBar_Panel ul li.rpLast a:link, 
    .RadPanelBar_Panel ul li.rpLast a:visited, 
    .RadPanelBar_Panel ul li.rpLast a:hover, 
    .RadPanelBar_Panel ul li.rpLast a:active
    {
        border-bottom: 0;
    }
    .RadPanelBar_Panel ul li.rpLast a:link .rpText, 
    .RadPanelBar_Panel ul li.rpLast a:visited .rpText, 
    .RadPanelBar_Panel ul li.rpLast a:hover .rpText, 
    .RadPanelBar_Panel ul li.rpLast a:active .rpText
    {
        background: transparent url(rpLast.gif) no-repeat 0 100%;
    }
      
    .RadPanelBar_Panel ul li a:link .rpText, 
    .RadPanelBar_Panel ul li a:visited .rpText
    {
        display: block;
        padding: 5px 10px 5px 21px;
    }
      
    .RadPanelBar_Panel ul li a:hover .rpText,
    .RadPanelBar_Panel ul li a:active .rpText
    { background-color: #bd4152;
      color: #fff;}
      
      
    /*
    .RadPanelBar_Panel ul li a.rpSelected:link, 
    .RadPanelBar_Panel ul li a.rpSelected:visited, 
    .RadPanelBar_Panel ul li a.rpSelected:hover, 
    .RadPanelBar_Panel ul li a.rpSelected:active
    {
        background: transparent url(rpSelected-rpText.gif) no-repeat 0 0;
    }
    */
      
      
    .RadPanelBar_Panel ul li a:hover
    {
        background: transparent url(rpHover.gif) no-repeat 0 50%;
    }
    .RadPanelBar_Panel ul li a.rpSelected:link, 
    .RadPanelBar_Panel ul li a.rpSelected:visited, 
    .RadPanelBar_Panel ul li a.rpSelected:hover, 
    .RadPanelBar_Panel ul li a.rpSelected:active {
        background: #bd4152 url(rpHover.gif) no-repeat 0 50%;
        font-weight: bold;
    }
      
    .RadPanelBar_Panel ul ul {padding-bottom:10px !important; margin-bottom:0px !important;}
      
      
    .RadPanelBar_Panel ul ul li a:link, 
    .RadPanelBar_Panel ul ul li a:visited, 
    .RadPanelBar_Panel ul ul li a:hover, 
    .RadPanelBar_Panel ul ul li a:active {
        border-bottom: 0;
        border-top: 0;
        background-color: #bd4152;
        font-weight:normal !important;
    }
    .RadPanelBar_Panel ul ul li a:link .rpText, 
    .RadPanelBar_Panel ul ul li a:visited .rpText, 
    .RadPanelBar_Panel ul ul li a:hover .rpText, 
    .RadPanelBar_Panel ul ul li a:active .rpText 
    {
        padding: 2px 10px 2px 37px;
    }
    .RadPanelBar_Panel ul ul li.rpLast a:link .rpText, 
    .RadPanelBar_Panel ul ul li.rpLast a:visited .rpText, 
    .RadPanelBar_Panel ul ul li.rpLast a:hover .rpText, 
    .RadPanelBar_Panel ul ul li.rpLast a:active .rpText 
    {
        background-image: none;
    }
    .RadPanelBar_Panel ul ul li a.rpSelected:link, 
    .RadPanelBar_Panel ul ul li a.rpSelected:visited, 
    .RadPanelBar_Panel ul ul li a.rpSelected:hover, 
    .RadPanelBar_Panel ul ul li a.rpSelected:active 
    {
        background-image: none;
        background-color: transparent;
        font-weight: bold;
        padding-top: 0;
    }
    .RadPanelBar_Panel a:focus,
    .RadPanelBar_Panel a:focus .rpOut,
    .RadPanelBar_Panel a:focus .rpText 
    {
        outline: 0;
    }
  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    02 Mar 2010
    Link to this post
    Hello Chris Dumper,

    "The child items could not be collapsed in Multiple Expanded Items property is set to true or EnableEmbeddedBaseStylesheet is set to false."

    In your declaration you have set EnableEmbeddedBaseStylesheet to false. Here is the documentation reference to the Telerik ASP.NET AJAX controls - fundamentals - Disabling embedded resources

    All the best,
    Ivan Dimitrov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  7. Chris Dumper
    Chris Dumper avatar
    16 posts
    Registered:
    02 Apr 2005
    02 Mar 2010
    Link to this post
    Thanks for helping Ivan. I'm using the 'community' version & have looked everywhere (including the Telerik site) for the javascripts you referenced in your last message but can't find them. Sorry for being an idiot but please point me to where I can grab them. Thx .. c
  8. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    03 Mar 2010
    Link to this post
    Hello Chris Dumper,

    You need to download Telerik RadControls for ASP.NET AJAX from where you can get all external resources.

    Sincerely yours,
    Ivan Dimitrov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  9. Chris Dumper
    Chris Dumper avatar
    16 posts
    Registered:
    02 Apr 2005
    09 Mar 2010
    Link to this post
    Hi Ivan, sorry to be this 'thick'. The scripts are now where they need to be however the panelbar opens fully expanded. If I click on the PageGroup the panelbar collapses but immediately expands again. What am i still not seeing? Thx .. c
  10. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    10 Mar 2010
    Link to this post
    Hi Chris Dumper,

    I am not able to reproduce a problem with this control. I am sending you a sample project that you can set up and see that the RadPanelBar works correctly.

    Best wishes,
    Ivan Dimitrov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  11. Chris Dumper
    Chris Dumper avatar
    16 posts
    Registered:
    02 Apr 2005
    11 Mar 2010
    Link to this post
    Hi Dimitrov it may be bacause I misunderstood the normal behaviour of the RadPanelBar. What I was after is that the menu initially loads fully collapsed. If the user clicks a GroupPage it expands. If they click it again it collapses. That should be possible with this control, shouldn't it? Thx
  12. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    12 Mar 2010
    Link to this post
    Hello Chris Dumper,

    You could modify the Page_Load method of the built in SitePanelBar control as shown below

    protected void Page_Load(object sender, EventArgs e)
        {
            RadPanelbar1.DataBound += new EventHandler(RadPanelbar1_DataBound);
            if (!Page.IsPostBack)
            {
                ICmsUrlContext urlContext = CmsUrlContext.Current;
                if (urlContext != null)
                {
                    RadPanelbar1.DataBind();
                    string currentUrl = SiteMapDataSource1.Provider.CurrentNode.Url; 
                    foreach (RadPanelItem item in RadPanelbar1.GetAllItems())
                    {                 
                        if (item.Items.Count > 0)
                        {
                            item.NavigateUrl = "";
                            item.Expanded = false;
                        }
                            if (currentUrl.Equals(item.ResolveUrl(item.NavigateUrl), StringComparison.OrdinalIgnoreCase))
                            {
                                item.Selected = true;
                                item.Expanded = true;
                                item.ExpandParentItems();
                                break;
                            }                  
                    }
                }
            }
        }

    Here all items will be collapsed on Page_Laod. If an item has childs you will be able to expand and collapse them.


    Sincerely yours,
    Ivan Dimitrov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Register for webinar
12 posts, 0 answered