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 4048 times

SM-Device
Two radios on small devices

chrome_rzUx5VTwB2.png (4.45 KiB) Viewed 4048 times

MD-Device
Three radios per row on medium devices

chrome_WmeGw4vI8u.png (3.88 KiB) Viewed 4048 times

LG-Device
Four radios per row on large devices

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

[rpierce]

I agree with everything said. But still, I only have 2 radios and would like to arrange them horizontally rather than stacked. I have many yes no options in a form and it takes up twice as much screen space to display them stacked.

Is there as way to force this line in the dml file to be $combo_ssho->RadiosPerLine = 3; rather than the default $combo_ssho->RadiosPerLine = 1;?

Perhaps calling it our in one of the hooks files??

Thank you for looking....

[pböttcher]

Hi,

maybe a quick and dirty solution would be to use

Code: Select all

$j(function() {
    $j('[type="radio"').parent().find('br').remove();
    $j('label[for*=radio]').css('min-width','50px');
}) 

If your lable is longer, just increase the min-width to match your layout wish.

You can add this to your hooks/tablename-dv.js file

Hope that helps

[rpierce]

pböttcher,

Your code works good. Is there any way to create a space between the items?? Currently they are right next to each other.

Capture.PNG (3.05 KiB) Viewed 2599 times

As always, thank you for all your great help and expertise!!

Ray

[pböttcher]

Hi,

you can try

Code: Select all

$j(function() {
    $j('[type="radio"').parent().find('br').remove();
    $j('[type=radio]').next('label').css('margin-right','15px');
}) 

[rpierce]

That worked very nicely!!

[RonP]

Hi,
Thank you to point to a former post.

I've copied the code, placet a new file, in my case "aanvragen-dv.js" in the Hooks folder and quess what?
Nothing has changed.
Or should there be more code in the file?
Ron

[pböttcher]

Try

Code: Select all

$j(function() {
    $j('[type="radio"]').parent().find('br').remove();
    $j('[type="radio"]').next('label').css('margin-right','15px');
}) 

[RonP]

Hi,
I've tried all the given examples, however.... no results.
Is there an alternative ?
My "problem" was stated in:
viewtopic.php?f=4&t=4790

Ron

[xbox2007]

can you check this :
viewtopic.php?f=8&t=4577

[rpierce]

Hi Ron,
pböttchers code worked great for me. Are you certain the file name is correct? No minor typos. I know it sounds super simple, but I've caught myself doing that in the past.

Ray