I am trying to develop some expandable mobile jquery so that it will re-size and move the divs around to fit available screen space - allowing the design to work for mobile as well as tablet and even desktop as required.
The design concept works (not included in below example) and I used some example jquery mobile controls and and jquery mobile default css.
My problem is that (at least on chrome) The formatting only works on very small browser size, expand beyond a certain size and it starts looked ugly - loosing line separators and controls no longer left aligned.
Simply slide the right hand panel left and right to see the effect. Small sizes look fine.
Any idea why it does this and if there is a way to fix this behavior?
[It appears to be trying to do something smart: Thinks there is now heaps of width and therefore has enough space to put the name and control side by side instead of vertically but I don't like this look and the loss of line separators also looks ugly]
Further to this (not in example provided) - even if I fix the width of the DIV, the effect still happens - ie even though it doesn't actually have more space to work with because of fixed div width - it still changes the formatting as if it does when the screen is expanded.
Thanks
UPDATE: I just tried this in IE 8 and it actually works properly in IE 8! This might be an issue just in chrome?
I cannot confirm Firefox in my current environment (only ie8 and chrome is available till I get home).