Custom Fields
Re-Envisioned
Support MB Views CSS not working for views

  • Creator
    Topic
  • #32697
    Resolved Kara
    Participant

    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;
    }
Viewing 10 replies - 1 through 10 (of 10 total)
  • Author
    Replies
  • #32703
    Long Nguyen
    Moderator

    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.

    #32724
    Kara
    Participant

    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.

    #32739
    Long Nguyen
    Moderator

    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.

    #32776
    Kara
    Participant

    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?

    #32798
    Long Nguyen
    Moderator

    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.

    #32803
    Kara
    Participant

    Thanks, Long! As always, appreciate your help 🙂

    #32812
    Viktor
    Participant

    Thanks for acknowledging it and providing the previous version. I was also surprised by this bug.

    #32866
    Tim Thomas
    Participant

    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

    #33216
    Timo Wessels
    Participant

    Same with me, having same issues that the CSS Classes are not shown. Thanks for fixing it soon =)

    #33228
    Long Nguyen
    Moderator

    Hi,

    This issue has been fixed in the new version 1.9.3.

    Cheers,

Viewing 10 replies - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.