Support Forum
I updated MetaBox this morning (using AIO), and the CSS for MB Views is not working. This is true for all of my MB Views - below is an example. They were all working perfectly before updating.
The only other plugin I updated this morning was WooCommerce to v 6.0.
Any ideas?
--
One of my MB Views - they are all rendered via shortcode. The html is all correct but no CSS is applied:
Here's the HTML:
{% set relationship = attribute( relationships, 'course-products-to-instructors-woo' ) %}
{% for post in relationship.to %}
<div class="row">
<div class="column1">
<img src="{{ post.thumbnail.thumbnail.url }}" width="150px" height="150px" />
</div>
<div class="column2">
<h2>
{{ post.title }}</h2>
</div>
</div>
<p>
{{ post.excerpt }}</p>
<a href="{{ post.url }}" target="blank" rel="noopener"> <span style="font-size:0.8rem;">See full profile →</span></a>
{% endfor %}
And the related CSS:
.row {
display: flex;
align-items: center;
justify-content: center;
}
.column1 {
flex: 50%;
}
.column2{
padding-left:0.5rem;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
.h3-instructor{
color:#21272A; font-size:2rem !important;
}
Hi,
Where did you implement the CSS code? If it is added in the tab CSS of the View, I see it still works as well.
Or it is possible that your CSS code has been overridden by the theme or another plugin style.
Yes - it's in the CSS tab of the View.
It worked perfectly before updating the MB AIO plugin. I see in the changelog from 12/15 this update:
1.15.3 - 2021-12-15
MB VIEWS
Output CSS in header if possible to make HTML validated
Is it possible this update is causing the issue?
I did update to WooCommerce 6.0 at the same time, but deactivating WooCommerce doesn't fix the CSS issue.
I'd be happy to roll back the version of AIO but my local copy is 1.13.7 - is there somewhere to download previous versions?
You can view the output here: https://www.itspu.com/shop/service-agreements-for-smb-consultants/ under the "Instructor" tab. I don't see any of the CSS in the inspector.
Note this is a dev site.
Hi,
You are right, the CSS code is not rendered on the frontend if you use the type: Shortcode. I will inform the development team to check this case and fix it in the next update.
Great - thanks, Long!
Do you have an ETA for this fix, or in the meantime, is there a place I can download AIO 1.15.2 until it's available?
Hi,
I do not have ETA for this fix, hopefully, it will be available soon. And here is the link to download version 1.15.2
(removed)
I will remove it after 2 days.
Thanks, Long! As always, appreciate your help 🙂
Thanks for acknowledging it and providing the previous version. I was also surprised by this bug.
Hi,
Possibly same issue. just updated metabox and 1 (out of 2) views the CSS is simply not being output. The other view is still working fine strangely.
There was a warning (missing rbrace) in the css not rendering for the line
grid-template-columns: repeat(auto-fit, minmax(279px, 1fr));
but it was working previously. As other view CSS was still outputting I thought could be due to having the warning on it that you now block the css, but commenting out the line seems this is not the case.
For now rather than roll-back I've simply prefixed all css in the view with a container class and have added it as a new css file being pulled into the child theme.
Thanks,
Tim
Same with me, having same issues that the CSS Classes are not shown. Thanks for fixing it soon =)
Hi,
This issue has been fixed in the new version 1.9.3.
Cheers,
If it helps anyone else... I often *think* have this problem until I realize that I forgot to change the View Type - https://docs.metabox.io/extensions/mb-views/#type
Often, I'll be trying to insert a Shortcode view into a page and the CSS will not render and then I'll realize I never selected "Shortcode" ... and that makes all the difference 🙂