Checkboxes in a Layout Grid weird issue

[jdd99]

I have a strange behavior with checkboxes that I hope somebody can me clues as to what to do.

I have a form in a LayoutGrid which has some input elements including a checkbox list of 10 options. The list is PHP generated and I cannot really post a sample page online yet. The checkboxes are displayed using a custom CSS. The form works fine, it has no errors, no flags of any kind. The strange problem is that I can't hover and select the checkboxes of options 6-9! I can hover over the checkboxes of options 1-5 and 10, no problem. There seem to be an offset for options 6-9 because if I hover to the left of the labels on those lines, i can chekmark the boxes!!!

Note that if I move the code outside the LayoutGrid, ALL checkboxes work perfectly. So I know the issue isn't with the PHP code or the HTML form or the CSS code. I can also run the same code in a blank HTML page and it works just fine. Something in the LayoutGrid format is causing an offset for a few lines that happen to coincide with the checkboxes 6-9. I checked the page source code in the browser and nothing hidden gets added to the form at that point.

My question is what could cause that? How do I even begin to troubleshoot this? Thanks for any clues and advise.

PS: I should add that if I shrink the window (and trigger a breakpoint), ALL options work fine, no more offset for options 6-9! Weird.

JD

[crispy68]

Without really seeing a demo page or providing a project file, it's hard to say what the issue is. Need to be able to see and test it. My first guess is something may be on top of the check boxes (maybe a z-index thing) making them uncheckable.

[Pablo]

To be able to help you, I need a DEMO project (.wbs file) so I can see all your settings.
Also, please include a description how to reproduce this problem.

For further details about how to share a project file, please see this FAQ:
viewtopic.php?f=10&t=82134

[jdd99]

Solved it! Oh wow! Sooooo .... I realized that the area where I could not click and enable the checkmarks was exactly rectangular. I found that odd and revealing. It turns out that I had inserted an HTML block to add JS code to the form. The block was placed well below the LayoutGrid but the list of options "stretched" the page past that HTML block (which is obviously invisible when rendering the web page). I moved that HTML block out of the way and voila!

I have to admit, this is not at all intuitive, I don't know why that happens but I now know how to get around it.

Thanks for answering, Crispy and Pablo!

[crispy68]

One thing you may want to do is figure out why the html box is rendering in the page. Is it supposed to? What code is in the html box?

Depending on the code, you may not have the settings right. For example, If in the settings it is set to "use <div> to set position and height of html" then it will create an actual div on the page which may be why you are seeing it covering stuff up.