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

**URL:** <https://community.hivepress.io/t/if-checkbox-field-has-many-options-page-jumps-down-on-check/9132>\
**Category:** Bug Reports\
**Tags:** confirmed\
**Created:** [January 8, 2024, 7:07pm UTC](https://community.hivepress.io/t/if-checkbox-field-has-many-options-page-jumps-down-on-check/9132 "2024-01-08T19:07:23Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![GoVegan](https://community.hivepress.io/letter_avatar_proxy/v4/letter/g/65b543/32.png) [@GoVegan](https://community.hivepress.io/u/GoVegan)\
**Post date:** [January 8, 2024, 7:07pm UTC](https://community.hivepress.io/t/if-checkbox-field-has-many-options-page-jumps-down-on-check/9132/1 "2024-01-08T19:07:24Z")

</div>

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:

```auto
.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](https://community.hivepress.io/t/when-selecting-an-item-in-filter-that-is-collapsed-by-scrolling-the-screen-display-position-jumps-down/7370).

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:

```auto
.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.

---

<div class="post-metadata">

**Author:** ![andrii](https://community.hivepress.io/user_avatar/community.hivepress.io/andrii/32/2951_2.png) [@andrii](https://community.hivepress.io/u/andrii)\
**Post date:** [January 9, 2024, 2:16pm UTC](https://community.hivepress.io/t/if-checkbox-field-has-many-options-page-jumps-down-on-check/9132/4 "2024-01-09T14:16:19Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![GoVegan](https://community.hivepress.io/letter_avatar_proxy/v4/letter/g/65b543/32.png) [@GoVegan](https://community.hivepress.io/u/GoVegan)\
**Post date:** [January 9, 2024, 10:13pm UTC](https://community.hivepress.io/t/if-checkbox-field-has-many-options-page-jumps-down-on-check/9132/5 "2024-01-09T22:13:18Z")

</div>

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

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

```

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

 ![screenshot-hivepress](https://community.hivepress.io/uploads/default/original/2X/6/632e63507344459302e35308d94587d7f80ada9c.png)

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

---

<div class="post-metadata">

**Author:** ![andrii](https://community.hivepress.io/user_avatar/community.hivepress.io/andrii/32/2951_2.png) [@andrii](https://community.hivepress.io/u/andrii)\
**Post date:** [January 10, 2024, 8:58am UTC](https://community.hivepress.io/t/if-checkbox-field-has-many-options-page-jumps-down-on-check/9132/7 "2024-01-10T08:58:09Z")

</div>

Hi,

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

---

<div class="post-metadata">

**Author:** ![system](https://community.hivepress.io/user_avatar/community.hivepress.io/system/32/13990_2.png) [@system](https://community.hivepress.io/u/system)\
**Post date:** [February 9, 2024, 8:58am UTC](https://community.hivepress.io/t/if-checkbox-field-has-many-options-page-jumps-down-on-check/9132/8 "2024-02-09T08:58:29Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

---

<div class="post-metadata">

**Author:** ![GoVegan](https://community.hivepress.io/letter_avatar_proxy/v4/letter/g/65b543/32.png) [@GoVegan](https://community.hivepress.io/u/GoVegan)\
**Post date:** [March 8, 2024, 6:40pm UTC](https://community.hivepress.io/t/if-checkbox-field-has-many-options-page-jumps-down-on-check/9132/9 "2024-03-08T18:40:48Z")

</div>

The URL is not updated correctly when a location search is cleared: the Region key remains in the URL. I am using Google Maps.

For instance, when I first search for Amsterdam I get results as expected:

 ![img](https://community.hivepress.io/uploads/default/original/2X/7/764297edffb8890d146c42dcf76bf03b0eb7073e.png)

while this is the url (correct):

```auto
post_type=hp_listing&latitude=52.3675734&longitude=4.9041389&_region=ChIJVXealLU_xkcRja_At0z9AGY&_category=&s=&location=Amsterdam&label=

```

.  
.  
Then when I delete Amsterdam and use a seach term like chocolate (which are not present in Amsterdam, but are in other cities) I get no results:

 ![img](https://community.hivepress.io/uploads/default/original/2X/7/72cda08ea83c2a8d504da7dc3ec2028247dac7e8.png)  
.  
.  
because the url still contains the Region key (please note that latitude, longitude and location have been cleared correctly):

```auto
post_type=hp_listing&latitude=&longitude=&_region=ChIJVXealLU_xkcRja_At0z9AGY&_category=&s=chocolate&location=&label=

```

.  
.  
Removing the Region key from the URL (or if I would have searched for chocolate from the beginning) will give me the results of chocolate listings in other cities:

 ![img](https://community.hivepress.io/uploads/default/original/2X/0/0fd7fd57d0b4dde87394663d2d9ac20af6ebdd40.png)

Is this a bug or is Google Maps not installed correctly?

---

<div class="post-metadata">

**Author:** ![andrii](https://community.hivepress.io/user_avatar/community.hivepress.io/andrii/32/2951_2.png) [@andrii](https://community.hivepress.io/u/andrii)\
**Post date:** [March 11, 2024, 2:28pm UTC](https://community.hivepress.io/t/if-checkbox-field-has-many-options-page-jumps-down-on-check/9132/11 "2024-03-11T14:28:13Z")

</div>

Hi,

Thank you for your feedback, we are aware of this bug and it has been added to the RoadMap and will be fixed in the next updates.