[Resolved] Nested Views CSS

[Author]

Posts

[Puntorosso]

I have nested 2 Views to show Woocommerce products of a restaurant, grouped by categories.
The "menu-products" View collects the name, price and description of the product.

<div class="first-line-menu">
  <div class="product-title">[wpv-post-title]</div><div class="product-price">[wpv-woo-product-price]</div>
</div>
<div class="second-line-menu">
    <div class="product-description">[wpv-post-body view_template="None"]</div>
</div>

The parent view, simply shows the [wpv-taxonomy-title] + the child "menu-products".

<div class="view-category">[wpv-taxonomy-title]</div>
<div class="view-products">[wpv-view name="menu-products"]</div>

Everything works perfectly, but I have trouble with the CSS styling.

The "view-category" css has a white text with black background)and the "view-product" css have black text with white background.

.view-category {
  background-color:#000000;
  color:#ffffff;
  font-size:22px;
  padding:5px 25px;
}

.view-productw {
  background-color:#ffffff;
  color:#000000;
  padding: 0px 30px;
}

But in the front end only the font color change, the background is everywhere black.

hidden link

Do I miss something?

Thanks

[Luo Yang]

Hello,

It is a custom CSS codes issue, please provide the live problem URL, I need to test it in my Chrome browser, thanks

[Puntorosso]

hidden link

[Luo Yang]

In the codes you mentioned above, the CSS codes is using class name "view-productw", but the HTML div tag is using another CSS class name "view-products", please try to edit your CSS codes, change the class name "view-productw" to "view-products", and test again.

[Puntorosso]

Good catch!
Sadly, the same problem 🙁

[Luo Yang]

Please check the URL you mentioned above, the HTML div tags "view-products" display in height 0, see screenshot div-height.JPG
It conducts the problem. there should be some broken DIV/CSS in your website

You can add a line in your CSS codes, for example:

.view-products {
...
    min-height: 60rem; 
}

[Puntorosso]

Mmhh, I was checking again the complete css I have added (which is not really much anyway).
I don't see anything suspicious, and there's no "height" values added anywhere.

I have also tried by disabling all plugins and use a standard theme, without any css added.

Adding a min-height is not really a solution, as the view loop has of course a dynamical height.

Any other idea?

[Luo Yang]

Please try to modify your CSS codes as below:

.view-products {
 ...
    overflow: auto;
}

And test again.

It works fine in my Chrome browser, see screenshot overflow.JPG

[Puntorosso]

That did it! Thanks a lot for your help and patience.