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: 173
Joined: 2018-11-26 13:55
Location: Washington State

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: 1047
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: 1389
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 2330 times
chrome_b36tUgqdN4.png
chrome_b36tUgqdN4.png (3.87 KiB) Viewed 2330 times
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1389
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 2327 times

SM-Device
Two radios on small devices

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

MD-Device
Three radios per row on medium devices

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

LG-Device
Four radios per row on large devices

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

My AppGini Blog:
https://appgini.bizzworxx.de/blog

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1047
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

rpierce
Veteran Member
Posts: 173
Joined: 2018-11-26 13:55
Location: Washington State

Re: Radio Button Layout

Post by rpierce » 2021-08-21 21:15

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
AppGini Super Hero
AppGini Super Hero
Posts: 1496
Joined: 2018-04-01 10:12

Re: Radio Button Layout

Post by pböttcher » 2021-08-23 15:56

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
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

rpierce
Veteran Member
Posts: 173
Joined: 2018-11-26 13:55
Location: Washington State

Re: Radio Button Layout

Post by rpierce » 2022-02-19 17:35

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
Capture.PNG (3.05 KiB) Viewed 878 times
As always, thank you for all your great help and expertise!!

Ray

pböttcher
AppGini Super Hero
AppGini Super Hero
Posts: 1496
Joined: 2018-04-01 10:12

Re: Radio Button Layout

Post by pböttcher » 2022-02-19 18:44

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');
}) 
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

rpierce
Veteran Member
Posts: 173
Joined: 2018-11-26 13:55
Location: Washington State

Re: Radio Button Layout

Post by rpierce » 2022-02-28 03:26

That worked very nicely!!

User avatar
RonP
Veteran Member
Posts: 173
Joined: 2013-08-27 13:36
Location: Heiloo, The Netherlands
Contact:

Re: Radio Button Layout

Post by RonP » 2022-06-23 14:54

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
AppGini Super Hero
AppGini Super Hero
Posts: 1496
Joined: 2018-04-01 10:12

Re: Radio Button Layout

Post by pböttcher » 2022-06-23 20:06

Try

Code: Select all

$j(function() {
    $j('[type="radio"]').parent().find('br').remove();
    $j('[type="radio"]').next('label').css('margin-right','15px');
}) 
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

Post Reply