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

This topic has 3 replies, 2 voices, and was last updated 3 years ago by Leerpodium.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
December 19, 2021 at 6:33 PM #32747
Leerpodium
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

Add New Note to this Reply
December 19, 2021 at 6:36 PM #32748

Leerpodium
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.

Add New Note to this Reply

December 20, 2021 at 11:13 AM #32759

Long 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.

Add New Note to this Reply

December 20, 2021 at 3:47 PM #32765

Leerpodium
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

Add New Note to this Reply
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.