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

[weefra]

how can I fix it?
on the mobile phone it is partially displayed correctly

[umoekagodman]

Lolz😂

I was baffled myself when I first noticed it, and I’m still searching for a solution.

The worst of it is that, the longer the multi checkbox items, the farther the jump down the form😁

[weefra]

I think it’s bad that the developer offers something and has no solution.

[andrii]

Hi,

Yes, we are aware of this bug and it is in the backlog and will be fixed as soon as possible.

[weefra]

We are currently in beta. We go online on April 14th. Will it be fixed by then? Otherwise I will have to switch over.

[andrii]

Hi,

I see. From our part, we can provide CSS to show the original browser checkboxes; this will be a temporary solution, but note that they have a default design. Let us know if it works for you.

[weefra]

ok, what is the CSS code?

[umoekagodman]

@andrii What is the css?

[ihor]

Sorry for the delay. Please try this CSS snippet to enable the browser’s native radio and checkbox controls:

.hp-field input[type=checkbox], .hp-field input[type=radio] {opacity:1;margin-top:5px;margin-left:5px;pointer-events: auto;}
.hp-field input[type=checkbox]+span:before, .hp-field input[type=radio]+span:before,input[type=checkbox]+span:after, .hp-field input[type=radio]+span:after {display:none}
.hp-field--checkboxes ul li label, .hp-field--radio ul li label {pointer-events:none}

It’s a temporary fix until we fix the styled checkboxes in the core.

[umoekagodman]

Too bad😔 You should have tested it before sharing. It’s too ugly, its distorts everything, showing checkbox items ontop of other page elements.

[ihor]

Yes, this is a temporary fix, it’s tested with ListingHive but may affect styling in any case. As noted, it reverts checkboxes to the default browser styling.

If you’re familiar with CSS you can help to provide a better temporary solution, or wait for the scheduled fix instead.

[Fabricator]

Hi! Today I set some (25) checkboxes for an attribute and encountered this problem. If you are interested, here is a css, that I tried and did not encounter any error:

.hp-field--checkboxes, .hp-field--radio { position: relative; }