Page 1 of 1

Checkbox with label

Posted: Fri May 31, 2019 3:50 pm
by jetblacklb
Is there any way to get the label to display to the left of the checkbox. I know I can use CheckBox (no Label) and then add an Output Field with text to the left of the Checkbox but I like when using the CheckBox w/label you can click on the label to check the box. You don't have to be exactly over the Checkbox as you do with Checkbox (no label).

Joe

Re: Checkbox with label

Posted: Mon Jun 03, 2019 11:58 am
by Scott Klement
No, there's no way that I'm aware of.

If you'd like to request it as a feature, e-mail support@profoundlogic.com

If you'd like to discuss how to make the box get checked when you click a separate output field, I could show you how to do that with some JavaScript code.

Re: Checkbox with label

Posted: Mon Jun 03, 2019 2:34 pm
by DanD
Hi Joe,

I ran into the same situation as you - this is a work-around that I'm using, and it seems to work well for my purposes.

As you alluded to, you will need to have a checkbox (with no label) & an output field.

For purposes of illustration, the following properties are set:

Check box ID: c1_checkbox
Checked Value: Y
Unchecked Value: N
onBlur: applyProperty("c1t_checkbox","background color","transparent");
onFocus: applyProperty("c1t_checkbox","background color","yellow");
onMouseOut: applyProperty("c1t_checkbox","background color","transparent");
onMouseOver: applyProperty("c1t_checkbox","background color","yellow");

Check Box Text ID: c1t_checkbox
onClick:

Code: Select all

if (get("c1_checkbox") == 'Y') {
  pui.set("c1_checkbox", "N");
} else {
  pui.set("c1_checkbox", "Y");
}
onMouseOut: applyProperty(this,"background color",bg_color);
onMouseOver:

Code: Select all

fg_color = this.pui.properties["color"];
applyProperty(this,"background color","yellow");
My onLoad event also contains these lines:

Code: Select all

window.fg_color = "";
window.bg_color = "transparent";
So the basic idea is, if the user hovers over the checkbox itself - or the checkbox has focus via the keyboard (user tabbed to it), the text field associated with the checkbox will hi-light in yellow, to make it more obvious to the user that they are hovering over, or have focus on, a checkbox.

And this also allows the user to click the output text widget & change the value of the check box itself.

Hopefully this will help
-Dan