Float box options 'mobile' attribute is not working

Page: 1

Author Post
Member
Registered: May 2019
Posts: 2
For FloatBox 8.2.2 version 'mobile' attribute is not getting applied.

mobile: {
width: "50%",
height: "50%"
}

Also noticed that 'BoxLeft' is not working but 'BoxLeftAdjust' is working as expected.

Actually, in Mobile view floatbox is not center aligned by default, I was trying to correct that.

But these are working fine for me with the previous version - 8

Is there any syntax changes? Any suggestions?
Administrator
Registered: Aug 2008
Posts: 3378
Mobile options work fine in all my testing. Perhaps the device you are testing with is not identified as a small-screen device? It's helpful if all pages have <meta name="viewport" content="width=device-width,initial-scale=1"> in the head to ensure proper initial state at load time.

Please upgrade to the latest version 8.2.6. You may be encountering something that's already been fixed and it's the only version I can make remedial changes to if required.

I really need to see an example page where your problems are occurring. I won't have much luck just guessing what's going on.

Note that option names are case-sensitive and all begin with lowercase letters. 'boxLeft', not 'BoxLeft'.

Centering on screen for mobile devices is very difficult, especially on zoomed screens. You may find that centering is pretty good on most devices, but there will always be combinations mobile browsers, page zoom and page scroll that can move the content off-center. Making adjustments such as boxLeftAdjust based on one mobile test device has a high risk of unwanted disclocation on a majority of other devices and states. Accept that folks who zoom and scroll a mobile page may have to zoom and scroll to see all the floatbox content on that page.

Again, an example page would go a long way towards allowing me to give definitive answers and to see if there's anything that could be improved in the Floatbox code.
Member
Registered: May 2019
Posts: 2
Thanks for the reply.

I have tried putting
<meta name="viewport" content="width=device-width,initial-scale=1">
in the the form but that didn't make any change.

One more thing I have noted is this happens only if the page which loads the FB, has the bootstrap css not referred. And the alignment issue got resolved by just linking the bootstrap css file. seems strange.

Is there any dependency for bootstrap css??
Administrator
Registered: Aug 2008
Posts: 3378
A primary purpose of bootstrap.css is to fix inconsistent and non-standard behaviours in browsers. The fact that your page settles down on your device with bootstrap included is a good indicator that Floatbox is correctly coded for correctly behaving devices. I learnt long ago that there is not much payback in trying to code to individual browser's bugs and non-standard behaviour. Best to let the browser builders fix their own tools.

However, if you're willing to put a sample page up and let me know on what mobile device(s) you're seeing the centering or mobile options problems, I would be interested in taking a look at the changes bootstrap.css makes to see if similar additions or changes to floatbox.css or the js code would be safe in all circumstances and helpful in some.

Page: 1