Skip to Content (Press Enter)
2020-12-07 17-35-54
António Chinita
839Views
5Comments
Label on CheckBox or RadioButton
Discussion
How-to
OutSystems Widgets
I believe this should be included in the next version of the platform, however, since it's so simple I didn't bother creating WOC topic with it.
A "Label" property for checkbox and radio elements. :)
That way you can set a text for the element, and use that text to check/uncheck it.

Here's how to do it with some jQuery:
"<script type=""text/JavaScript"">
osjs('#" + CheckboxId + "').after(""<label for='" + CheckboxId + "' style='margin-left: 5px; position: relative; top: 1px'>" + Label + "</label>"");
</script>"
Hope it's useful to someone else :)
5
0
24 Apr 2012
Copy Link
UserImage.jpg
Quintin Schnehage
Completely agreed... it would be great to have labels semantic in this way.

At the moment, on the project we're working on, we have many forms with buttons and checkboxes, and the clickable area for the buttons are tiny. Users are now used to being able to click on labels to select checkboxes - so to have this built-in as part of the platform (perhaps as a field on the element inspector) would be great. :)

Thanks Antonio for the JQuery snippet - I've adapted it to use in my own project.
0
0
18 Mar 2014
Copy Link
2022-07-01 08-38-53
Peter van Munster
António Chinita wrote:
I believe this should be included in the next version of the platform, however, since it's so simple I didn't bother creating WOC topic with it.
A "Label" property for checkbox and radio elements. :)
That way you can set a text for the element, and use that text to check/uncheck it.

Here's how to do it with some jQuery:
"<script type=""text/JavaScript"">
osjs('#" + CheckboxId + "').after(""<label for='" + CheckboxId + "' style='margin-left: 5px; position: relative; top: 1px'>" + Label + "</label>"");
</script>"
Hope it's useful to someone else :)
Hi António,

 I've got a need for just that what you described, adding a text label beside a Radio Button, and being able to click on the text as well as the radio button itself to have it selected.

Being fairly new to Outsystems, I have no clue on where to put the jQuery snippet you provided, and how to use it to get a label beside a radio button.

Could you give me a small example?

Peter
0
0
21 Aug 2015
Copy Link
UserImage.jpg
Artem Syzonenko

It could be done with CSS like this:


SyntaxEditor Code Snippet

input#RichWidgets_wt40_block_wtMainContent_wtdvdCheckbox {
    margin-right: 80px;
}

input#RichWidgets_wt40_block_wtMainContent_wtdvdCheckbox:after {
    content: "Clickable checkbox label";
    margin-left: 16px;
    white-space: nowrap;
    margin-right: 200px;
}


But I am impressed that it is not possible to create handy radio or checkbox with labels out of the box.

Edit: it can simply be done with standard label element. Maybe not so obvious, but absolutely working.

0
0
12 Sep 2017
Copy Link
2018-11-14 14-40-27
Vincent Colpa

Hey

another thing it can be done its to surround the radio button and label ( or text ) in a container. 

Then in the container in the "Extended Properties" you can use the "OnClick" event to select the combobox 


Cheers

1
0
12 Sep 2017
Copy Link
UserImage.jpg
Artem Syzonenko

Vincent, seems to be overkill. When it can be done with standard features, I will always prefer the standard way. And I don't need to think about how to change everything when I need onclick event for something else. Additionally it looks shifted to the top:


So I think the best way is to set a name to checkbox, so one can use #id and after that add to CSS

label#RichWidgets_wt42_block_wtMainContent_wtLabel1 {
    margin-left: 0px;
}

That looks perfect:

Anyway, thanks for suggestion.

0
0
12 Sep 2017
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.