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 673 karma points
    Sep 02, 2015 @ 02:58
    Saied
    0

    Nested Partial is not using css from Master Layout?

    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.

  • Alex Skrypnyk 5393 posts 19956 karma points MVP 3x 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

  • Saied 349 posts 673 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")">
    
  • Alex Skrypnyk 5393 posts 19956 karma points MVP 3x 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.

  • Saied 349 posts 673 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.

  • Alex Skrypnyk 5393 posts 19956 karma points MVP 3x 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.

  • Saied 349 posts 673 karma points
    Sep 04, 2015 @ 13:56
    Saied
    0

    Yes, Thanks for pointing me in the right direction.

Please Sign in or register to post replies

Write your reply to:

Draft