Meta Box

"ghost pixels" due to select_advanced field in frontend submission form

Support › MB Frontend Submission › "ghost pixels" due to select_advanced field in frontend submission formResolved

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • December 19, 2021 at 6:33 PM #32747
    LeerpodiumLeerpodium
    Participant

    Hi,

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

    array(
    '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).

    https://drive.google.com/file/d/16kEd4iMLsR5tcSiQp5qHqIAbE6kdcaQU/view?usp=sharing

    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.

    Tako

    December 19, 2021 at 6:36 PM #32748
    LeerpodiumLeerpodium
    Participant

    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.

    December 20, 2021 at 11:13 AM #32759
    Long NguyenLong Nguyen
    Moderator

    Hi,

    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.

    December 20, 2021 at 3:47 PM #32765
    LeerpodiumLeerpodium
    Participant

    Hi,

    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.

    Tako

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