Page 1 of 2

change radiogroup from horizontal to vertical depending on screen width

Posted: Tue Jul 11, 2017 11:59 am
by Terry Gilliver

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.


change radiogroup from horizontal to vertical depending on screen width

Posted: Tue Jul 11, 2017 1:31 pm
by Bruce Stuart

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


change radiogroup from horizontal to vertical depending on screen width

Posted: Tue Jul 11, 2017 1:34 pm
by Bruce Stuart

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


change radiogroup from horizontal to vertical depending on screen width

Posted: Tue Jul 11, 2017 2:52 pm
by Terry Gilliver

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.


change radiogroup from horizontal to vertical depending on screen width

Posted: Tue Jul 11, 2017 3:46 pm
by Bruce Stuart

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


change radiogroup from horizontal to vertical depending on screen width

Posted: Tue Jul 11, 2017 3:48 pm
by Bruce Stuart

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


change radiogroup from horizontal to vertical depending on screen width

Posted: Wed Jul 12, 2017 10:11 am
by Terry Gilliver

Ok, Thanks Bruce, i will try that.

Happy Wednesday!

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


change radiogroup from horizontal to vertical depending on screen width

Posted: Wed Jul 12, 2017 1:30 pm
by Terry Gilliver

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)


change radiogroup from horizontal to vertical depending on screen width

Posted: Wed Jul 12, 2017 2:28 pm
by Bruce Stuart

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


change radiogroup from horizontal to vertical depending on screen width

Posted: Wed Jul 12, 2017 2:51 pm
by Bruce Stuart

Hi Terry,

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

Best,

Bruce