Misaligned checkbox or radio buttons

  • When switching between templates, the checkbox or radio buttons used to mark voting choices become misaligned. The inside circle of the radio button shifts about 20 pixels to the right and about 3 pixels down. I deleted all cache and disabled Autoptimize just to be sure. That didn’t help.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter thomastthai

    (@thomastthai)

    I did more tests and found the misalignment happens when switched to one of the layout in Predefined Styles. When switching back to Basic the misalignment goes away.

    • This reply was modified 5 years, 4 months ago by thomastthai.
    Plugin Author YOP

    (@yourownprogrammer)

    Hello

    This is caused by the theme css.

    Can you add the custom css code below?

    .basic-yop-poll-container[data-uid] label:before {
    content: none !important;
}

    This should fix the issue you’re experiencing.

    Best
    YOP Team

    Thread Starter thomastthai

    (@thomastthai)

    Thank you, YOP. That CSS snip did the trick.

    Update: I thought that solved it but, as I was switching between templates and styles, now the radio buttons disappeared :/

    • This reply was modified 5 years, 4 months ago by thomastthai.
    Plugin Author YOP

    (@yourownprogrammer)

    Here’s a new css code for radio buttons

    .basic-yop-poll-container[data-uid] input[type="radio"] {
opacity: 1;
}

    YOP Team

    • This reply was modified 5 years, 4 months ago by YOP.
    Thread Starter thomastthai

    (@thomastthai)

    That code snip solved for some of the templates and styles but caused others to have new misalignments.

    What I have in “Custom Styles / Advanced / Custom CSS” is below:

    .basic-yop-poll-container[data-uid] .basic-vote {
	text-align: center;
}

.basic-yop-poll-container[data-uid] .basic-captcha {
	margin-left: 0px;
	margin-top: 15px;
}

.basic-yop-poll-container[data-uid] label:before {
	content: none !important;
}

.basic-yop-poll-container[data-uid] input[type="radio"] {
	opacity: 1;
}
    • This reply was modified 5 years, 4 months ago by thomastthai.
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Misaligned checkbox or radio buttons’ is closed to new replies.