Check box label styling
August 25, 2017 12:00 AM
After some experimentation, I've been unable to find a way to change the position of the label for a check box or the background. Working in the browser console, I was found the background setting in "#check210443", but can't figure out how to append that to this particular element.
I haven't found anything through the console that helps align the text label, so if I can find that, it would be pretty awesome.
Discussion (9)
Hi Stan - I should have clarified that I'm adding a stand-alone check box rather than a multiple response test question. Worst case scenario is that I live with it as is or create it as a test question.
@jvalley4735 - Is there a particular reason that there's a difference like this between a stand-alone and question based check box? With a stand-alone check box, there's no separate element for the label.
Unless I am misunderstanding, you can use CSS without JS. #checkXX and #checkXXid work. In the attached file I reversed the label position in one and added margin to the other. I also added borders and a little padding so each stand out from the other. You can change other properties, like background-color as well.
Jason, I'v been crazy busy so I haven't had time to look at the other thing yet.
undefined
Jason, maybe I'm missing some broader purpose, but I can just drag a check box label in the UI. (I've actually complained that this is a bug, because it's possible to drag the check boxes and their labels so that the labels don't match up with the right check boxes. Sounds silly, but I actually almost did it once accidentally, and it just shouldn't be possible.)
@JasonADal - There's a Label in the Properties and you can see the HTML name by opening the Description in the Radio section. Am I missing something?
I was able to add styles via JS, but it's still not moving the position of the text, so maybe I'm just missing a style value to move the text?
document.getElementById("%HTMLNAME%").style.height = "12px";document.getElementById("%HTMLNAME%").style.width = "300px";
document.getElementById("%HTMLNAME%").style.background = "white";
I haven't tried padding yet, but it didn't seem to have an effect in the browser console...
I completely understand the busy - I'm back at it with 2 more modules similar to my other 4 due on Nov 1.
This is really close. I was hoping to have the ability to align the label centered relative to the position of the check box rather than the bottom. I'm pretty sure "position" wouldn't have an affect, since the check box and text are considered one element, if I'm not mistaken?
Darrel - Can you warn me next time before I preview that you're changing the font to GINORMOUS? ;-) In all seriousness, thanks again. This helps a ton!
I took it a step further by assigning the element with a class through RunJS, then defining the style in CSS. This will definitely make it easier for me down the line when I get into pages with check boxes, since I can paste the RunJS instead of getting the HTML names. See attached.
@jvalley4735 - Yup, that is there - it was more about how to target the text label only. I was trying to determine if it was the anc, id, or label id I needed to target and then how to do it. Darrel, as usual, has made my day.
Discussions have been disabled for this post