Answered

Radio button layout

(0) Share

Report

Posted on by Manc_Gurl

254

I have a powerapp which is connected to a SharePoint list. I've created a collection and I'm using this collection to populate radio buttons. I want to show the radio options horizontally like so.

I have found the layout option and changed it to horizontal but it looks horrible! (see below)

How can I align the radio buttons as per the first image?

Categories:

Building Power Apps

I have the same question (0)

All responses (8)

Answers (1)

Sort by

eka24 20,925 on at

Like
a
(2)

Report
Copy link

Link copied!

Change the layout to Horizontal. Then try and shrink the size:
------------

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Was this reply helpful? Yes No
Manc_Gurl 254 on at

Like
a
(0)

Report
Copy link

Link copied!

I already changed the layout to horizontal but shrinking the width doesn't help because the words for my options are different lengths.

Was this reply helpful? Yes No
Manc_Gurl 254 on at

Like
a
(0)

Report
Copy link

Link copied!

I'm guessing there is no option to align the radio buttons horizontally. I'm now wondering if I will have to develop some kind of workaround for this. Perhaps creating two sets of vertical radio buttons but only pulling the first and last three options (FirstN and LastN) through as radio buttons. Ugh more work!

If I use the above method though, how can I make sure they only select one option? I don't want them to be able to select more than one option from these six options, and now that they're two sets of radio buttons they will be able to do just that.

Was this reply helpful? Yes No
eka24 20,925 on at

Like
a
(0)

Report
Copy link

Link copied!

You can abbreviate the Names in the Radio items by creating a collection OnVisible of the Screen:
ClearCollect(MyNewTable,AddColumns(Table1,"NewColumn",Left(name,2)))
In this case meaning take the first 2 letters Adjust it to suit you).

Then use the collection MyNewTable on the Items as:

------------

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Was this reply helpful? Yes No
Manc_Gurl 254 on at

Like
a
(0)

Report
Copy link

Link copied!

Thanks but the customer won't be happy with abbreviated names. I'm going to have to figure it out using a different method with vertical radio buttons I think. Not ideal but better than nothing. Would be nice if there was a text padding option for horizontal radio buttons.

Was this reply helpful? Yes No
Verified answer

Manc_Gurl 254 on at

Like
a
(0)

Report
Copy link

Link copied!

I resolved this myself. I was able to use the horizontal layout for my radio buttons but this left the text for each value misaligned due to the fact that it's not possible to control the alignment of text and my text was different lengths.

In the end I had to do a workaround by splitting my radio options into two vertical option groups. I then used some functions in the onselect property so that if one set was selected the other set was deselected. Not ideal but it did the job, there is a user voice suggestion here so get voting: https://powerusers.microsoft.com/t5/Power-Apps-Ideas/Control-spacing-between-Horizontal-Radio-Buttons/idi-p/302731

Was this reply helpful? Yes No
Community Power Pla... Microsoft Employee on at

Like
a
(0)

Report
Copy link

Link copied!
Use a gallery.
For each gallery row add a radio button AND a label.
The radio button must have two values to simulate selected or unselected..
NOTE: (yes/no to True or false or 1 or 0 values)
Then the label will display the value for the current row which is the collection/gallery value.
Set the radio layout property to vertical.
Size the radio button with the two options to only show 'selected' (yes or true or 1) radio button.
Take the label and give it a a background color to match the forms background color (so that the control background is no longer transparent) and drag the label to cover the right side of the radio button control.
The goal is to line up the label and the radio button to look like one radio button with label control within the gallery.
This is our own custom radio button list control while benefiting from the gallery's clean alignment.
Radio control on change add the behavior to make sure the every time a row gets selected to set the other collection values for the radio button is set to unselected (no or false or 0).

Was this reply helpful? Yes No
vDaddy78 31 on at

Like
a
(1)

Report
Copy link

Link copied!

I know this is old but apparently, suggestions are still needed. Here is what I did:
I set the radio button font to a fixed-width font.
Took the longest word and set all radios buttons to that letter count
I used a code so that I could get numerical values from the radio buttons later.

I then set the Font color, hover color, pressed color all to transparent.
I then used labels and placed them where needed for the correct text of the radio.
I set the Reorder on each label so that its alignment was all the way to the back this way you don't have to click on the radio itself for it to select.

Was this reply helpful? Yes No