Help with PanelBar styling

7 posts, 0 answers
  1. Luke Kasper
    Luke Kasper avatar
    18 posts
    Member since:
    Mar 2010

    Posted 19 Oct 2010 Link to this post

    All,

    I'm having an issue with my PanelBar header links or whatever they're called.  I have two panel items. The background for the text in the panel should be Yellow for my active panel and Blue for my inactive panel.  I've attached a screenshot of what I'm getting.  I'm getting a white space above the correct background for each of these.  Is there a css setting I'm missing or have incorrect somewhere?  I've modified as many items in the .rpExpanded, .rpExpandable and .rpLink classes that I could think of, but I can't seem to figure it out. 

    Any help would be greatly appreciated.
  2. Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts

    Posted 25 Oct 2010 Link to this post

    Hi Luke Kasper,

    Could you, please, post the current state of the implementation for this requirement?
    I will look in the css and will try to resolve this for you!

    Hope that soon we will solve it!


    Regards,
    Nikolay Tsenkov
    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. UI for ASP.NET Ajax is Ready for VS 2017
  4. Luke Kasper
    Luke Kasper avatar
    18 posts
    Member since:
    Mar 2010

    Posted 26 Oct 2010 Link to this post

    Actually, I am trying to use the default PanelBar.css file that comes in the downloadable .zip file.  I can repost it here if you need me to.


    Edit: I was using a customized .css file; I thought I had it switched.  I'm going to see if I can post the customized .css file.
  5. Luke Kasper
    Luke Kasper avatar
    18 posts
    Member since:
    Mar 2010

    Posted 26 Oct 2010 Link to this post

    Here's the .css we're using.  Comparing it to the default one, I see there are a lot of differences.  Do you think the problem could be in the class naming scheme?

    .RadPanelBar_CustomBasic
    {
        background: #FFFFFF;
    }
      
    .RadPanelBar_CustomBasic .rpLink
    {
        border: 1px solid #000000;
        overflow-x: hidden;
    }
      
    .RadPanelBar_CustomBasic .rpText
    {
        margin-right: 7px;
        overflow-x: hidden;
    }
      
    .RadPanelBar_CustomBasic .rpExpandable .rpText
    {
        background: transparent url('../../../Images/expand_blue.jpg') no-repeat;
        background-position:580px center;
        background-color: #003084;
        color: #FFFFFF;
        width:590px;
    }
      
    .RadPanelBar_CustomBasic .rpExpanded .rpText
    {
        background: url('');
        background-color: #FFFACD;
        color: #000000;
        width:590px;
        cursor:default;
    }
      
    .RadPanelBar_CustomBasic .rpGroup .rpExpanded .rpText,
    .RadPanelBar_CustomBasic .rpGroup .rpExpandable .rpText
    {
        background-position: right 5px;
    }
      
    .RadPanelBar_CustomBasic .rpGroup
    {
        overflow-x: hidden;
        overflow-y: auto;
    }
      
    .RadPanelBar_CustomBasic .rpGroup .rpLink,
    .RadPanelBar_CustomBasic .rpGroup .rpLast .rpLink
    {
        border-bottom-color: #626262;
    }
      
    .RadPanelBar_CustomBasic .rpLevel1 .rpLink .rpFirst
    {
        border-top: 1px solid #bfbfbf;
    }
      
    .RadPanelBar_CustomBasic .rpLevel1 .rpLink .rpItem .rpFirst
    {
        border-top: 1px solid #626262;
    }
      
    .RadPanelBar .rpLast .rpLevel1
    {
        border-bottom: 0;
    }
      
    .RadPanelBar_CustomBasic .rpLevel1 .rpLast .rpLink
    {
        border-bottom-width: 0;
    }
      
    .RadPanelBar_CustomBasic .rpLevel1 .rpGroup .rpLast .rpLink,
    .RadPanelBar_CustomBasic .rpLevel1 .rpLast .rpGroup .rpLink
    {
        border-bottom-width: 1px;
    }
      
    .RadPanelBar_CustomBasic .rpRootGroup .rpLink,
    .RadPanelBar_CustomBasic .rpRootGroup .rpTemplate
    {
        font: bold 10px Verdana;
        color: #000000;
    }
      
    .RadPanelBar_CustomBasic .rpTemplate
    {
        width:598px;
        border: 1px #000000;
        border-style: none dashed dashed dashed;
    }
      
    .RadPanelBar_CustomBasic .rpRootGroup .rpText
    {
        padding: 6px 7px 6px 3px;
    }
      
    .RadPanelBar_CustomBasic .rpGroup .rpLink,
    .RadPanelBar_CustomBasic .rpGroup .rpTemplate
    {
        font-size: 11px;
    }
      
    .RadPanelBar_CustomBasic .rpGroup .rpText
    {
        padding: 1px 7px 0 0;
    }
      
    .RadPanelBar_CustomBasic .rpLevel1 .rpText
    {
        padding-left: 10px;
    }
      
    .RadPanelBar_CustomBasic .rpLevel2 .rpText
    {
        padding-left: 20px;
    }
      
    .RadPanelBar_CustomBasic .rpLevel3 .rpText
    {
        padding-left: 30px;
    }
      
    .RadPanelBar_CustomBasic .rpDisabled .rpText
    {
        cursor: default;
        color: #bbb;
    }
      
    .RadPanelBar_CustomBasic .rpRootGroup .rpDisabled:hover
    {
        cursor: default;
        text-decoration: none;
    }
      
    .RadPanelBar_CustomBasic .rpGroup .rpDisabled:hover
    {
        cursor: default;
        text-decoration: none;
    }
  6. Luke Kasper
    Luke Kasper avatar
    18 posts
    Member since:
    Mar 2010

    Posted 26 Oct 2010 Link to this post

    Another thing to note:
    The above .css file seems to render perfectly in Firefox.  Unfortunately, our site is not used in Firefox and I need it to render correctly in IE7.
  7. Luke Kasper
    Luke Kasper avatar
    18 posts
    Member since:
    Mar 2010

    Posted 28 Oct 2010 Link to this post

    Through much trial and error, I figured it out.  I was missing a css declaration.  Here's the code that I added to the above file to fix it:

    .RadPanelBar_CustomBasic .rpExpandable .rpOut .rpExpandHandle
    {
        height:0px;
        margin: 0 0 0 0;
    }


    Essentially, the area that was showing up that I didn't want to show up was the .rpExpandHandle stuff.  I just made the height 0 and did the same w/the margins.

    That's the fix that worked for me!
  8. Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 29 Oct 2010 Link to this post

    Hello Luke,

    If you don't want the .rpExpandHandle to show, you just need to set display: none. No need to shrink the height or remove the margins.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017