Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

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


  • Saied 349 posts 674 karma points
    Sep 02, 2015 @ 02:58
    Saied
    0

    Nested Partial is not using css from Master Layout?

    UI Questions
    Umbraco 7

    I have a Products.cshtml that was created in the backoffice. I created a partial called ProductsFilter.cshtml in Visual Studio and it is in Products.cshtml like so:

    @{
    Html.RenderPartial("ProductFilter",new ProductFilterModel());
 }

    I noticed most of Products.cshtml gets css styles applied to it correctly from the Master Layout, but the Partial does not. When I html source of the rendered page, I can see the stylesheet link at the top, so it is really confusing as to why it is not getting the styes.

    Copy Link
  • Alex Skrypnyk 6132 posts 23951 karma points MVP 7x admin c-trib
    Sep 02, 2015 @ 07:44
    Alex Skrypnyk
    0

    Hi Saied,

    Did you try to look via chrome dev tool or firebug network panel? Does your page download css file successfully ? Maybe problem with relative path to css files ?

    Thanks, Alex

    Copy Link
  • Saied 349 posts 674 karma points
    Sep 02, 2015 @ 13:48
    Saied
    0

    Alex,

    When I view chrome developer tools, it is loading everything correctly including the stylesheet. In the html souce code, the css link is at top like this:

    <link rel="stylesheet" href="/css/compiled-styles.css">

    If the elements are on the /products page, everything gets styled properly, but the partial does not. Here is the folder structure of my views and partials:

    /Views/Products.cshtml
/Views/Partials/ProductFilter.cshtml

    My css is located at /css/compiled-styles.css

    In my razor view for Products.cshtml, doing this, which I thought would solve the problem, but it is not:

    <link rel="stylesheet" href="@Url.Content("~/css/compiled-styles.css")">
    Copy Link
  • Alex Skrypnyk 6132 posts 23951 karma points MVP 7x admin c-trib
    Sep 03, 2015 @ 10:42
    Alex Skrypnyk
    0

    Hm, interesting.

    It should be browser's problem, if everything ok with source code of the page.

    Copy Link
  • Saied 349 posts 674 karma points
    Sep 04, 2015 @ 13:33
    Saied
    100

    I actually found the solution and it was very easy, but difficult to spot. The culprit was a - character. Instead of the having a class vehicle-filter-group on a form, it should have been vehicle-filter group. Notice no - between filter and group.

    So the moral of the story is to always quadruple check your css even if it looks right. The smallest things always cause the biggest headaches.

    Copy Link
  • Alex Skrypnyk 6132 posts 23951 karma points MVP 7x admin c-trib
    Sep 04, 2015 @ 13:35
    Alex Skrypnyk
    0

    Yes, Saied, css is hard to debug, so using chrome dev tools or firebug is necessarily.

    Copy Link
  • Saied 349 posts 674 karma points
    Sep 04, 2015 @ 13:56
    Saied
    0

    Yes, Thanks for pointing me in the right direction.

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft