How can I change the radio button group control to vertically when screen is smaller?

240
December 10, 2016, at 1:07 PM

I am creating a survey application, each question have a number of choices. the application is using the Radio button group control in XPages set to horisontally.

My problem is that when the screen is smaller all the choices do not fit on one line (also multilingual) so I need to change from horisontal to vertical in smaller screens.

looking at the HTML for the horisontal radio button control it is wrapped in one table row, and the vertical one is one table row for each choice.

How can I solve this problem. is it possible to change the direction of the Radio button group server side based on the screen size or can this be solved easily by some client side javascript/jquery or using media queries in CSS?

The solution must change layout based on screen size, not based on device.

This is the HTML for the vertical layout

<div id="view:_id1:radioGroup3" class="radio">
<table role="presentation">
    <tbody><tr>
<td>
<label for="view:_id1:radioGroup3:0"><input type="radio" id="view:_id1:radioGroup3:0" name="view:_id1:radioGroup3" value="Good">Good</label></td>
    </tr>
    <tr>
<td>
<label for="view:_id1:radioGroup3:1"><input type="radio" id="view:_id1:radioGroup3:1" name="view:_id1:radioGroup3" value="Bad">Bad</label></td>
    </tr>
</tbody></table></div>

This is the HTML for the horisontal layout

<div id="view:_id1:radioGroup1" class="radio">
<table role="presentation">
<tbody><tr>
<td>
<label for="view:_id1:radioGroup1:0"><input type="radio" id="view:_id1:radioGroup1:0" name="view:_id1:radioGroup1" value="Good">Good</label></td>
<td>
<label for="view:_id1:radioGroup1:1"><input type="radio" id="view:_id1:radioGroup1:1" name="view:_id1:radioGroup1" value="Bad">Bad</label></td>
</tr>
</tbody></table></div>

I am using Bootstrap

Answer 1

The plain HTML approach won't do what you want. But an option may be to use a repeat control based on your options. The repeat can have header and footer facets for the <ul> and </ul> elements. Each element within the repeat could be <li>, a radio button with the relevant entry bound to the back-end field, plus </li>. CSS would then allow styling the list based on an @media setting.

If I remember correctly, the XPages radio button control allows you to define a group that the radio buttons belong to, so that only one can still be selected.

Answer 2

How About converting your radio buttons to list and use media queries to do the job..

<html>
    <head>
        <style>
            ul li{
            }
            @media only screen and (min-width: 500px) {
                ul li {
                    display:inline;
                }
            }
        </style>
    </head>
    <body>
        <ul>
            <li><input type="radio"> radio1</input></li>
            <li><input type="radio"> radio2</input></li>
            <li><input type="radio"> radio3</input></li>
            <li><input type="radio"> radio4</input></li>
        </ul>
    </body>
</html>
Answer 3

yep, use media queries

@media screen and (min-width: 480px) {
 .input{display: inline-block}   
}

example here: http://jsfiddle.net/d1oL5Lpp/1/

Answer 4

Step 1

Wrap every radio button tag and its label text in <label> tags:

<label>Radio One: <input type="radio" name="myradio" value="one" /></label>
<label>Radio Two: <input type="radio" name="myradio" value="two" /></label>

When you place both the text and the input inside <label> tags, you make the text clickable. Clicking on “Radio One” will select the first radio button, for example.

Step 2

Look for <style> tags between the <head> tags of your HTML code. Add this code if you do not find the tags:

<style type=”text/css”> </style>

All CSS code goes between the <style> tags. Each web page should only have one set of these tags.

Step 3

Write a style rule for the <label> tags. Set the “display” property to “block” and add a width:

label { display: block; width: 150px; }

Step 4

Use the “type” selector to target all radio buttons. Float the radio buttons to the right to line them up to the right of their labels:

input[type='radio'] { float: right; }
Answer 5

I believe all the answers are correct. However, if you ask my choice, then I will simply have 2 radio button groups linked to the same element and simply have a hide-when based on the device size (media queries in css).

Don't think any code is necessary here, but let me know, will update accordingly then.

READ ALSO
Web page doesn&#39;t display posted data

Web page doesn't display posted data

I have a table (I'm using DataTables plug-in for jQuery) and when I click on a row I want to be redirected to another page where will be displayed customer detailsHere is my code in customers

189
Filter table rows using Jquery

Filter table rows using Jquery

I have the following tableWhen I click on a th on the days-of-month-container e

262
Uncaught ReferenceError: onsubmit function is not defined

Uncaught ReferenceError: onsubmit function is not defined

OK So its kind of the same but not entirelyI had a function and variables that needed to be moved out of the document

460
jquery hotkeys for spacebar

jquery hotkeys for spacebar

I am trying to use jquery hotkeys to capture keypress eventsI am unable to capture spacebar press

336