Radio Button Layout

Wish to see a specific feature/change in future releases? Feel free to post it here, and if it gets enough "likes", we'd definitely include it in future releases!
Post Reply
rpierce
Veteran Member
Posts: 64
Joined: 2018-11-26 13:55

Radio Button Layout

Post by rpierce » 2021-02-16 17:53

It would be real nice if when using radio buttons I could specify how many buttons per line in the AppGini program rather than having to go into each filename_dml.php file and changing it there.

Just a thought....

$combo_shift->RadiosPerLine = 3;

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 921
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: Radio Button Layout

Post by onoehring » 2021-02-23 13:06

Hi,

yes, sounds good.
Also, I do not see a (big) problem, as, if one decides to use radio buttons, one usually knows how many there are (or at least will there be at maxium).

Olaf

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1021
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Radio Button Layout

Post by jsetzer » 2021-02-23 13:40

The idea is good, but there is a problem: Due to necessary compatibility with different screen sizes on different devices (Desktop, Tablet, Smartphone) in landscape or portrait mode, you will have to calculate a "correct" width per radio and adjust the css-width of the controls. But that strongly depends on the display environment AND on the different string-lengths (label-widths) of the options. You cannot ensure a fixed number of radios per line because you do not know the avaialable space at the endpoint and you do not know the widths of all (visible) options beforehand.

I did some experiments the last days and I'm not satisfied with the results, see screenshots on different screen size emulations. Cutting the labels to a maximum width would solve the problem with different widths. But you lose information. So we need a different approach.

I think for avoiding trouble with different screen sizes, a solution should be based on Bootstrap's grid-system. So for example we could be able to configure:
  • in xs-devices, there shall be 1 radio per row
  • in sm: 2 radios
  • in md: 3 radios
  • and in lg: 4 radios
Remember, Bootstrap's grid system allows 1-12 columns, for example 1 column x 12/12 width, 2 columns x 6/12 width, 3 columns x 4/12 width, 4 columns x 3/12 width, 6 columns x 2/12 width or 12 columns x 1/12 width. Additionally all combinations which sum up to 12 are allowed, for example 3 columns of 3/12 + 5/12 + 4/12. As long as we stick to that 12-column grid, Bootstrap will care for compatibility with different device sizes.

So an approach for handling the requirement given in the beginning could be:

Add a div.row to the div which contains the radios, then for each radio append a div.col-xs-aaa.col-sm-bbb.col-md-ccc.col-lg-ddd with best-possible aaa, bbb, ccc, ddd.

Doing it this way would not allow you to freely define the number of radios per row, but it would allow more than one radio per row AND a well aligned layout, compatible with different device sizes and resolutions.
Attachments
chrome_8Sh8bmkNkJ.png
chrome_8Sh8bmkNkJ.png (5.09 KiB) Viewed 237 times
chrome_b36tUgqdN4.png
chrome_b36tUgqdN4.png (3.87 KiB) Viewed 237 times
Kind regards,
<js />

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1021
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Radio Button Layout

Post by jsetzer » 2021-02-23 14:19

Using such a Bootstrap-grid-system-based solution the result would be like this:

XS-Device
One radio per row on extra-small devices

chrome_Yv95kNsBxS.png
chrome_Yv95kNsBxS.png (9.24 KiB) Viewed 234 times

SM-Device
Two radios on small devices

chrome_rzUx5VTwB2.png
chrome_rzUx5VTwB2.png (4.45 KiB) Viewed 234 times

MD-Device
Three radios per row on medium devices

chrome_WmeGw4vI8u.png
chrome_WmeGw4vI8u.png (3.88 KiB) Viewed 234 times

LG-Device
Four radios per row on large devices

chrome_f7fWKXesDS.png
chrome_f7fWKXesDS.png (3.64 KiB) Viewed 234 times

This solution should be compatible with different browser- and device-environments.


Please note that uploaded images have been scaled by the forum software to fit best
Kind regards,
<js />

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 921
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: Radio Button Layout

Post by onoehring » 2021-02-23 15:58

Hi,

I agree. It should definitely be based on bootstrap. Here I uploaded a screencast showing horizontal positioning of 6 radiobuttons in the free survey Limesurvey ( https://limesurvey.org/ ).
Of course, if the screenspace gets to the lover ends of the different bootstrap with options, "funny" things can happen and the text breaks to a new line in unwanted places.

MP4, 400 KB: https://dl.olaf-noehring.de/?t=a8711d79 ... 2c332ee194
(can not attach MP4 and siez/width too large for image in this forum)

Olaf

Post Reply