The pointer for the checkbox selection is not active unless you point it in the upper half of the circle

Hi,

On my form /80704754652964 I use the Advanced Designer and select a style for my checkbox. I can't help but notice that pointer for the selection is not active unless in the upper half of the checkbox. Is there a css method to locate or widen this zone so that the complete element is active? I have had a number of my users complain at how difficult it is to select an option at times.

(it is hard to please everyone, as you should very well know)

Best regards, Robert

I checked your most recent form and was unable to reproduce the issue.  I was able to select the single choice options from the outer portions of the circle.  I don't believe I am checking the same form though so if you wouldn't mind letting us know which form we can check, we will be happy to do so.

Hi David,

OK so I'm using Firefox right now and I have to move my mouse pointer to the top section of the checkbox circle to get the finger pointer to appear. Now this is only apparent when at the bottom of the form and selecting a class event like I show in the image above. Other checkbox elements above are just about perfect in their response.

I have injected CSS code for these particular checkbox elements that shift them around a bit but in doing so the response zone is not following exactly. Please try on a number of them also note the square widget checkbox element, when you select it you have to go a bit above center point to activate, when deselecting it works much better.

So my question is, can I move the the elements response zone?

best, Robert

Adding the following code should increase the clickable are of the check boxes:

.form-checkbox {
    min-width : 200px;
    min-height : 200px;
}

The 200px value is quite a bit larger that would be reasonable but I used that to show how it would work.  Here is an example form:

https://form.jotform.com/82914555988980

The boxes themselves remain the same size but the actual clickable area becomes 200x200.  If the values are reduced to 20x20, it would produce a 20px by 20px clickable area.

David,

Those are indeed large box's... and respond very well although the pointer remains as an arrow and not a finger... 😊

I will try and and see the results...

regards, Robert

Hi,

I have a question before I follow this course of action.

Is this just to enlarge the actual checkbox or the actual field that responds to a mouse click? I'm am thinking it is the checkbox size which in turn also increases the response area as well. I note in your code that this will effect all checkbox inputs and not just the ones that are in question so an #id_xx would have be included in the code for each field I need to fix.

To go back to my original question, can I increase the response field area of a checkbox without increasing the checkbox size?  

best, Robert

It is for the checkbox item only. But the CSS is for the entire checkbox in the form. You need to add the ID selector if you wish to apply it for the specific field only. However, this won't work since you are using a custom style for the checkbox. Example:

#id_5 .form-checkbox {....}

What happened right now is that the CSS moves the cursor to where the background/border is placed. The custom styles use before and after selector:

Since you've resized the checkbox items, you'll need to adjust the sizing to correct the cursor. I've tried so far, but it's a bit distorted. I'll try further and I'll keep you posted.

Hi Welvin,

This is actually more important then an option for different style checkbox. Some users have difficulty with these fields not working as they think they should, so they get annoyed or say nasty stuff about me 😢. 

I appreciate you diving into this.

Thank you, Robert

I will work for it. I'm sure this is because of the positioning of the before and after styles. I'll keep you posted. 

It's been a week now, and I'm sorry for not getting back to you on this. I checked the form and you seem to have made an adjustment that fixed the problem.

Here's my latest screenshot from your form with the cursor in it. 

As you could see, it is now correct. It centered with a tiny padding around it. Please let us know if you still need help with it. 

@Hi Welvin,

I am still looking for a solution for this. It is not showing as you see it on your end. I have been working on options on a clone but nothing I have tried works correctly. My thought was trying to use the div for it and then make it full size again and in position, z-index over the other fields. But that is about as far as I went with it.

So, I'm still in need of some help please.

best, Robert

PS: test Form 82934829359978

I checked your most recent form and did not see any that had issues with check boxes not being accessible.  If there is a specific form still causing issues, let us know and we can take a look.

Hi,

Issues is not that  "check boxes not being accessible", it is that only the check boxes at the bottom of the form for selecting classes and events, require clicking very high on the icon which some of my users are having difficulty with.......................

This has resulted from injected CSS code that makes the field elements smaller in order to fit the the three in a row and to keep the vertical distance between them as small as possible.

I have inject the following custom css code in your form and that seems to have fixed this issue:

iframe#customFieldFrame_214, iframe#customFieldFrame_215, iframe#customFieldFrame_216, iframe#customFieldFrame_217 {

    height: 50px !important;

}

Please check the screenshot below:

Hope this helps.

Do get back to us if you have any questions.

Hi,

This fixed the issue with these particular checkboxes, THANK YOU!

I was still having difficulty with the boxes under these, (chkbox that appeared when one of them was selected). I changed the form to three columns and changed the injected CSS code for them and now they work as well.

So, all the issues are now resolved.

Again, I thank you, best Robert