I’ve been working on a fairly simple form. After looking to customize the checkboxes, I found a few answers people had given. I went looking at example sites and came up with something that seems to have worked-
Putting checkboxes behind the label layer, adding a border to the label, and putting a colored div over that. The interaction I have set says that when you click, the div goes to full opacity. On second click, it falls back to zero.
The problem I am having is that only the first two boxes work properly. The last two seem to only want to change the second box (?). I’ve tried a number of things, including doing a separate div with new class, separate label with new class, and a separate interaction. It is causing the same issue.
On a less important note, another issue is that the buttons change spacing when viewed online. How can I fix this?
Can anyone help? Links below (don’t mind the design- it’s a work in progress).
Anyone think they might know what is wrong? I’ve been trying to no avail.
Hi @dpagek, I am still taking a look at this, but I think the issue is in the styling on the the elements themselves, not so much the interaction.
See this image if I move the checkbox wrappers out of the columns, notice how they all seem to layer on top of each other ?
There was also some strange styling on the columns, so my suggestion is to simply the styling on the elements, so that each div with a checkbox is completely cleared of every other checkbox.
When using absolute positioning and offsets, this can get in the way of your columns and thus I think the issue is happening:
I am still taking a look in order to make some alternate layout suggestion
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.