Display issues with MetaBox (CSS issue) on taxonomy pages (with suggested FIX)

Support MB Term Meta Display issues with MetaBox (CSS issue) on taxonomy pages (with suggested FIX)Resolved

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #13139
    DraganDragan
    Participant

    I'm having display (CSS) issues with your form on admin page for category taxonomy.

    I narrowed it down to poor css in the plugin itself:

    The element with class rwmb-tab-panel has an inline style for display: block;
    And I can see that it had display: table; which is now commented out as seen on the screenshot below:
    Inspect element screenshot

    The problem is that you are putting children divs which have display: table-row; in that display: block; parent and, because they don't have an actual parent with display: table;, their width isn't rendered properly and no CSS for width will apply to them (such as 100%, 75%, 100vw).
    Children divs inspect element

    On top of that, you have .rwmb-input width set to width: auto;, look at what it does to the image upload field for example:
    Screenshot - rwmb-input width auto

    I have changed the:

    .rwmb-field to { display: flex; }
    Screenshot rwmb-field display flex
    // which solves the field width

    and:

    #edittag .rwmb-label ~ .rwmb-input to { width: 75% }
    Screenshot rwmb-input width 75
    // which restores the (I suppose) normal display functionality

    one more fix would be to change the #edittag to:

    #edittag {
    max-width: none;
    }

    which would get that beautiful fullscreen edit width (instead of the 800px max-width) but this is WordPress core so it's not up to you guys.

    I'll keep using my fix but I hope you guys will update MetaBox and fix this yourselves.

    #13158
    Anh TranAnh Tran
    Keymaster

    Hi Dragan,

    Thanks a lot for your feedback and your suggested fix. I really appreciate that.

    The latest version of Tabs had some updates for User profile and Settings page. Perhaps that break the code for the Term page. I'll check that again with my team mate and update the plugin asap.

    #13357
    Anh TranAnh Tran
    Keymaster

    Hi Dragan, the fix is merged into the latest version. Thanks for your help!

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