If checkbox field has many options, page jumps down on check

[GoVegan]

When an attribute checkbox field has many options (i.e. 40+) and a checkbox after around the 15th item gets checked, the page jumps down. One has to scroll back to be able to check another box with the same behaviour.

I may have found the problem:

.hp-field input[type="checkbox"]  {
	position: absolute;
}

Because of this, these hidden checkboxes are not contained inside the scrollable field, but put below the field as well. If there is ’enough’ space left below (because of other content), this jumping is the only unwanted behaviour. If there is not enough space a huge white space is created and the top of the page disappears.

The jumping part occurs in the Add Listing and Update Listing pages as well as in the filter section, the layout issues only on mentioned pages.

Adding custom CSS to set the position to relative solved the problem for me. But I am not sure if this is the best solution, so any feedback is welcome

This subject was mentioned earlier in this topic.

I’m using ListingHive btw.

Thank you!

EDIT:
The same goes for radio buttons.
And also, the ’hidden’ checkboxes/buttons are live, clickable elements on the page. Humans won’t see them because of opacity 0, but the visibility:hidden is overridden by the !important tag:

.hp-field input[type=checkbox],
.hp-field input[type=radio] {
  margin-right:.5rem;
  cursor:pointer;
  visibility:visible!important
}

.hp-field input[type=checkbox],
.hp-field input[type=radio] {
  opacity:0;
  position:absolute;
  margin:0;
  visibility:hidden
}

This means that with position:absolute users can click a checkbox or radio button by accident while clicking another field below the scrollable one.

Setting the opacity to 1 while having a scrollable field in the Add/Update Listing page will help you replicate this issue.

[andrii]

Hi,

We checked this issue from our side, and it seems okay. Please provide more details regarding this issue (e.g., your actions step by step with screenshots, etc.). This will help us to reproduce and resolve the issue faster.

[GoVegan]

Steps to reproduce:

1. Create an attribute with multiple checkboxes (or radio buttons).
2. Add many options (25 at least).
3. Go to Add Listing page and check one option in the lower region of the scrollable field, i.e. the last one
4. The page jumps down and adds a white space below the form.
5. With Inspector, click on one of the options and set opacity to 1 (this is only to help you see what just happened).

.hp-field input[type=checkbox],
.hp-field input[type=radio] {
  opacity:0;
  position:absolute;
  margin:0;
  visibility:hidden
}

6. The original checkboxes should now appear, even outside the scrollable field.

7. With Inspector, set position to relative (in same selector as above). Now the overflow of checkboxes should disappear and be contained within the scrollable field itself.

[andrii]

Hi,

Thanks for reporting this, the bug is confirmed and we’ll fix it as soon as possible.