Terry Gilliver
Posts: 0
Joined: Fri Apr 18, 2014 8:45 pm

change radiogroup from horizontal to vertical depending on screen width

How can I switch a control-group (radio-group or checkbox-group) from horizontal to vertical depending on screen size?

(jQuery Mobile)

This is what I have tried so far:

pre$(document).on('pagebeforeshow',function() {
if ($(window)&#46;width() < 400) {
$("fieldset[data-type=horizontal]")&#46;attr('data-type','vertical')&#46;controlgroup('refresh',true);
} else {
$("fieldset[data-type=vertical]")&#46;attr('data-type','horizontal')&#46;controlgroup('refresh',true);
}
});/pre

It does change the data-type attribute, but the screen is not re-rendered to match.

Bruce Stuart
Posts: 0
Joined: Fri Oct 24, 2014 4:42 am

change radiogroup from horizontal to vertical depending on screen width

Hi Terry,

Not that I know that this will work for this specific instance .... but it's worked for other things ... how about :

Appery('mobilecontainer').refresh() ;

Best,
Bruce

Bruce Stuart
Posts: 0
Joined: Fri Oct 24, 2014 4:42 am

change radiogroup from horizontal to vertical depending on screen width

Oh... also best when tried in combination with other things lol ... at:

  1. Chrome debugger break point if on web browser

  2. From Weinre debugger command prompt ... when on device

    Bruce

Terry Gilliver
Posts: 0
Joined: Fri Apr 18, 2014 8:45 pm

change radiogroup from horizontal to vertical depending on screen width

Didn't work for me Bruce.

however, was looking for a select that would work on all checkbox groups.

I tried:

pre$(document)&#46;on('pageshow',function() {
debugger;
alert("page show event fired");
if ($(window)&#46;width() < 400) {
alert("page < 400");
$("fieldset[data-type=horizontal]")&#46;attr('data-type','vertical');
$("input[type='checkbox']")&#46;checkboxradio("refresh");
} else {
alert("page = 400");
$("fieldset[data-type=vertical]")&#46;attr('data-type','horizontal');
$("input[type='checkbox']")&#46;checkboxradio("refresh");
}
});/pre

This didn't work either.

By the way, you probably notice the alert statements. i had to do that as the breakpoints don't seem to be working in chrome, it even bypasses the debugger statement without stopping.

Bruce Stuart
Posts: 0
Joined: Fri Oct 24, 2014 4:42 am

change radiogroup from horizontal to vertical depending on screen width

Terry, here's what will work.....

Where-ever you want to change the orientation of your controls - 2 commands should do it:

do this first:

Appery('YourControlNameGoesHere').removeClass( "ui-controlgroup-horizontal ui-controlgroup-vertical" )

Then do 1 (not both) of the Following:

For Horizontal :

Appery('YourControlNameGoesHere').addClass( "ui-controlgroup-horizontal" )

For Vertical:
Appery('YourControlNameGoesHere').addClass( "ui-controlgroup-vertical" )

Best,

Bruce

PS - Happy Tuesday

Bruce Stuart
Posts: 0
Joined: Fri Oct 24, 2014 4:42 am

change radiogroup from horizontal to vertical depending on screen width

and where I say "YourControlNameGoesHere" - I mean the name of the checkbox group....

Terry Gilliver
Posts: 0
Joined: Fri Apr 18, 2014 8:45 pm

change radiogroup from horizontal to vertical depending on screen width

Ok, Thanks Bruce, i will try that.

Happy Wednesday!

Oh, and my breakpoints are working again... how weird.

Terry Gilliver
Posts: 0
Joined: Fri Apr 18, 2014 8:45 pm

change radiogroup from horizontal to vertical depending on screen width

The breakpoint issue seems to be a chrome bug. closing and reopening the browser seems to fix it temporarily. I am using Chrome: Version 59.0.3071.115 (Official Build) (64-bit)

Bruce Stuart
Posts: 0
Joined: Fri Oct 24, 2014 4:42 am

change radiogroup from horizontal to vertical depending on screen width

Humm.... I have an idea ... based on your reply Terry ... give me an hour or so ... I think I can help ...

Happy Wednesday to you as well ....
Bruce

Bruce Stuart
Posts: 0
Joined: Fri Oct 24, 2014 4:42 am

change radiogroup from horizontal to vertical depending on screen width

Hi Terry,

Quick question - did the code I sent along to you help ??

Best,

Bruce

Return to “Issues”