CSS problem in 'default' skin

6 posts, 0 answers
  1. Marja
    Marja avatar
    70 posts
    Member since:
    Nov 2013

    Posted 14 May 2014 Link to this post

    When an option in the panelbar is too long to fit on one line, it correctly wraps to a second line.

    However, the CSS for the 'default' skin doesn't take that into account. It only highlights the 1st line. And since the text color is white, the text on the second line is not visible then (white on white).

    This issue is not present in all color schemes. WebBlue for instance is just fine.

    How can we fix this issue in the 'default' scheme?
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 14 May 2014 in reply to Marja Link to this post

    Hi Marja,

    As a workaround please try the following CSS which works fine at fine at my end.

    CSS:
    <style type="text/css">
        .rpSelected
        {
            background-color: #DAF0FC !important;
            font-weight: bold !important;
        }
        .rpSelected:hover
        {
            background-color: #DDF7FF !important;
            font-weight: bold !important;
        }
        .rpSlide .rpItem:hover
        {
            background-color: #DFF5FF !important;
        }
        .rpSlide .rpLink:hover
        {
            background-image: none !important;
        }
        .rpSlide .rpOut:hover
        {
            background-image: none !important;
        }
    </style>

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Marja
    Marja avatar
    70 posts
    Member since:
    Nov 2013

    Posted 14 May 2014 in reply to Shinu Link to this post

    Thank you, but that color is wrong and it looks strange for currently selected item. The 1st line is then the original dark grey, and the 2nd line is light blue.
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 14 May 2014 in reply to Marja Link to this post

    Hi Marja,

    Please do the following modification in the above posted code to achieve your scenario.

    CSS:
    <style type="text/css">
        .rpSelected
        {
            background-color: Gray !important;
            font-weight: bold !important;
        }
        .rpSlide .rpLink:hover
        {
            background-image: none !important;
        }
        .rpSlide .rpOut:hover
        {
            background-image: none !important;
        }
    </style>

    Thanks,
    Shinu.
  6. Marja
    Marja avatar
    70 posts
    Member since:
    Nov 2013

    Posted 15 May 2014 in reply to Shinu Link to this post

    Hi Shinu,

    Thanks, this is better but still not entirely correct.
    When selected, second and subsequent level items keep their dark-gray background image.

    I've tried adding "background-image: none !important;"  to ".rpSelected" but that doesn't help.

    Do you have any further suggestions?
  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 16 May 2014 in reply to Marja Link to this post

    Hi Marja,

    Please try the below CSS  code which works fine at my end.

    CSS:
    .RadPanelBar_Default .rpGroup a.rpLink, .RadPanelBar_Default .rpGroup a.rpLink .rpOut
    {
        background-image: none !important;
    }

    Thanks,
    Shinu.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017