Custom Fields
Support MB Frontend Submission "ghost pixels" due to select_advanced field in frontend submission form

  • Creator
  • #32747
    Resolved Leerpodium


    I have a frontend submission form including a metabox with a taxonomy field.

        'name'       => 'Taxonomy',
        'id'         => 'taxonomy',
        'type'       => 'taxonomy',
        // Taxonomy slug.
        'taxonomy'   => 'category',
        // How to show taxonomy.
        'field_type' => 'select_advanced',

    When loading the form in the frontend I get a lot of "empty" space underneath the form, which in the design of our website is causing a bit of a problem (see attached img).

    Upon further inspection I noticed that the select field has the following css attached to it's class:

    .select2-hidden-accessible {
        border: 0 !important;
        clip: rect(0 0 0 0) !important;
        height: 1px !important;
        margin: -1px !important;
        overflow: hidden !important;
        padding: 0 !important;
        position: absolute !important;
        width: 1px !important;

    It seems that the "height: 1px !important;" in combination with the "position: absolute !important;" causes "ghost pixels" that accumulate at the end of the html document. What would you recommend for me to do to solve this issue?

    Cheers and thanks in advance.


Viewing 3 replies - 1 through 3 (of 3 total)
  • Author
  • #32748

    p.s. the img I included does not load (it's a google drive link), however if you open the link directly in the browser it will load.

    Long Nguyen


    I do not see the space under the frontend submission form when using the field select_advanced. Can you please share your page URL? I will help you to check this issue.

    You can also try to deactivate all plugins except Meta Box, MB extensions and switch to the standard theme of WordPress to troubleshoot the issue.



    Thanks for the reply.

    I think the issue is caused by the particular design of our website.
    We have some columns with fixed heights and I guess due to the

    position: absolute !important;

    the pixels are placed outside of the dom element where the form is rendered.

    I have given the parent element a "position: relative;" and this seems to fix the issue.

    Cheers and thanks for the support.


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