Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Ian 3 posts 73 karma points notactivated
    Jun 08, 2023 @ 11:07
    Ian
    0

    How to tell where a partial view is in the hierarchy and conditionally apply styles

    I have a TextBlock partial that renders some rich text.

    A TextBlock can appear in one of two places in the page hierarchy.

    1: Page Level, so the hierarchy would be

    Page<-BlockList<-BlockListItem<-TextBlock

    1. Inside a more complicated nested component structure like

    Page <-BlockList<-Accordion<-TextBlock

    The task at hand is to conditionally add a CSS class to the TextBlock when the TextBlock is at Page Level not at the other level.

    I believe that the Ancestor() or AncestorsOrSelf() methods might let me test the immediate parent nodes or get at the -2 node assuming that's the page level node, but I just can't seem to call these methods in the debugger.

    In the TextBlock partial when I debug,

    Model is of type BlockListItem

    I've imported Umbraco.Cms.Core.Models.PublishedContent at the top of the partial assuming that's where Ancestor or AncestorsOrSelf come from.

    When I tried to access Model.Ancestor() or Model.Content.Ancestor() in the debugger, I got the error "IPublishedElement does not contain definition for Ancestor and the best extension method overload requires a receive of type IPublishedContent.

    Some I'm guessing I need a cast maybe or I just can't do this from a partial.

  • Huw Reddick 1929 posts 6697 karma points MVP 2x c-trib
    Jun 08, 2023 @ 12:15
    Huw Reddick
    1

    you should be able to do this purely with css selectors no need to involve code.

  • Nik 1617 posts 7263 karma points MVP 7x c-trib
    Jun 08, 2023 @ 14:40
    Nik
    0

    Hi Ian,

    Unfortunately it would be quite a challenge to handle it in the manner you are after. This is because BlockList items have no knowledge of their parent/ancestors as they aren't part of a "tree" persay.

    However, as Huw mentions, this would be better handled purely in CSS.

    For example, your pages could have a "Page" class added to the body, Then all your Rich Text Blocks could have "Text-Block" as a class. Accordion blocks could then have a "Accordion-Block" class.

    using this you could use the CSS principles to apply styles to the different text-blocks without the need to add additional classes.

Please Sign in or register to post replies

Write your reply to:

Draft