move rpSelected-class to parent-li

4 posts, 0 answers
  1. Jelle Spaan | RedMatters
    Jelle Spaan | RedMatters avatar
    3 posts
    Member since:
    Sep 2010

    Posted 20 Dec 2011 Link to this post

    Hi,

    I'm trying to style a RedPanelBar (as a submenu) and now I would like to select an li within this menu when it's active. Problem is that the 'rpSelected'-class is added to it's childelement (rpLink). Is there a simple solution to this? And wouldn't it be (more) obvious to add the "rpSelected" and "rpFocused" to the parent-li instead of its childelement? Because it's possible to select a lot of levels deeper into the DOM starting at some element, but you can't even select 1 level up into the DOM, just by CSS. Obviously it's not a problem when using javascript, but I don't want to use that just for styling-issues.

    I hope someone comes up with a simple solution I just overlooked. Or even better, I hope this can be changed into the basic functionality of the control... :)

    Thanks in advance!

    Menno
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 21 Dec 2011 Link to this post

    Hello Menno,

    Can you please give some more details on your scenario and clarify a bit more why you need to apply a css class to the LI element? In general changing the basic functionality of the control is not an easy and trivial task to accomplish. However, I forwarded your request to our development team so that they can look at it.  

    Greetings,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jelle Spaan | RedMatters
    Jelle Spaan | RedMatters avatar
    3 posts
    Member since:
    Sep 2010

    Posted 21 Dec 2011 Link to this post

    Hi Kate,

    basically it comes down to this. Because of the design of the submenu (with flexible background-images, hover-effects and so on) the design has been slices in a way that the active status of the menuitems is put on the <li> and the <li> has some styling on its own, together with its childnodes. For this situation it would be great to actually style down the 'ladder', instead of finding a way to target the parent (the container) of the active-link.

    In my opinion it would always be more logical to style down. I figure there are a lot more situations where the <li> itself has to be styled, based on an active-class.

    For example:
    If I would like to style the li with class "rpItem rpFirst", ONLY when it contains an anchor with the class "rpSelected" (or rpFocused), I can't select/target it by CSS. But I would need to add some JavaScript to the page to get this done. I think it would be no loss to move these classes (selected/focused) to the listitem.

    Markup now
    <li class="rpItem rpFirst">
      <a href="/title" class="rpLink  rpSelected">
        <span class="rpOut rpNavigation">
          <span class="rpExpandHandle"></span>
          <span class="rpText">Title</span>
        </span>
      </a>
    </li>

    Markup as suggested
    <li class="rpItem rpFirst rpSelected">
      <a href="/title" class="rpLink">
        <span class="rpOut rpNavigation">
          <span class="rpExpandHandle"></span>
          <span class="rpText">Title</span>
        </span>
      </a>
    </li>

    Possible CSS
    .rpItem.rpSelected {
        // some styling
    }
    .rpItem.rpSelected .rpLink {
        // some styling 
    }
  5. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    540 posts

    Posted 27 Dec 2011 Link to this post

    Hello Menno,

    Some of the things you mentioned are like this due to legacy browsers and accessibility e.g. only links can be "active" or hovered. However, your suggestions do make a point, especially in a browser landscape that is dominated by standard compliant browsers.

    As for the things you want to achieve, they are more or less doable, by using a lesser known property of the RadMenuItem -- OuterCssClass, which puts a class name on containing LI element -- and some JS.

    Let me know if you need help with that.

    On a side note, I have awarded you some Telerik points for the suggestion.

    Regards,
    Ivan Zhekov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top