Radio Button Layout

[rpierce]

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;

[onoehring]

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

[jsetzer]

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.

[jsetzer]

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 (9.24 KiB) Viewed 235 times

SM-Device
Two radios on small devices

chrome_rzUx5VTwB2.png (4.45 KiB) Viewed 235 times

MD-Device
Three radios per row on medium devices

chrome_WmeGw4vI8u.png (3.88 KiB) Viewed 235 times

LG-Device
Four radios per row on large devices

chrome_f7fWKXesDS.png (3.64 KiB) Viewed 235 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

[onoehring]

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