I created a horizontally scrollable container with sorting.
There are some requirements:
The bounding box is fixed width
Must scroll when overflowing, no wrapping
Here is the JSFiddle: http://jsfiddle.net/6vXG2/ (drag columns with pink header)
This works perfectly with: IE9, Opera, Safari
But not working with: Chrome, Firefox
In both Chrome and Firefox, the elements start jumping around. (Incidentally, the behavior on Firefox is different between Windows and OSX, using exactly the same version - 17.0.1)
When initially designing it using float:left, all browsers behaved correctly, but due to no wrapping requirement, I cannot use this.
Any ideas how to fix this? Or is this a jqueryui bug/issue?
Thanks
EDIT:
If I add border-collapse: collapse it behaves correctly again in Chrome, but breaks in Opera.
EDIT 2:
Found a 'weak' workaround going back to float:left: See http://jsfiddle.net/6vXG2/1/. Not ideal, but OK for now. Still open for suggestions.
Related
Using Chrome version Version 63.0.3239.132 (Official Build) (64-bit)
In Chrome inspector (dev tools) my website (www.sbWebKids.com) doesn't scroll vertically. Without this feature working I cannot view anything below the fold on the the developer tools simulated iphone sizes. Makes mobile development impossible with this tool.
There's also always been a discerning gap shown in the inspector mobile view, however I've tried the website on a dozen real phones (in a phone store) and there's no gap issue. See screenshot.
Screenshot here - http://alexwyrick.com/images/iphone5-and-chrome-screenshot.jpg
I've experienced this issue for months and possibly with another website or two, but never found a good solution.
Any ideas what the issue between my website and inspector could be?
Thank you for any feedback you can provide!
On your body you've set...
html, body { overflow: hidden; }
Try setting that to...
html, body { overflow-x: hidden; }
Because the only thing you're really worried about is the x-axis scrolling.
As for the gap on the right being caused by the inspector, I don't have an answer for that. Initially I thought it was the native Chrome scrollbar space; but it looks more like an inspected element colour.
Sorry I can't help with that second part >.<
I'm using Select2 as dropdown with jQuery Mobile. Scrolling through the list works good on an Android browser. The list flows freely. But on On iOS devices, the scrolling isn't flowing freely. The scrolling halts immediately. Refer to this.
Help is required in fixing this.
try adding -webkit-overflow-scrolling: touch; to containing div.
Answered by: Omar
You can see my app at kogarah.herokuapp.com
I'm having a problem getting this to look ok in IE8 and I need to make it work with this version of the browser. I suspect it's something to do with container width.
The li in the navbar are all showing underneath each other rather than in a straight horizontal line, and there are similar issues with the main parts of the pages too, where I use bootstrap's grid system.
I have read the bootstrap documentation about IE8 compatibility but have still not been able to solve this.
If anyone can help I'd be very grateful.
Thanks
I am using JQueryMobile to build an application that will mainly run on a Linux-based touch device with Firefox.
My issue is that, with JQM, when page contents cannot fit on the screen, the web browser displays a vertical scrollbar displays a vertical scrollbar
There is no such issue with Sencha and Dojo. They both behave like if they were running on a touch-based device, even with desktop web browser (reduce the height of your browser window) :
Sencha scrolling list
Dojo scrolling list
So, how can I make JQM to be touch-friendly when running on a desktop web browser ?
It seems that there is no really good JS and/or CSS solution for this issue.
Hiding the scrollbars with CSS (overflow-y: hidden;) prevents scrolling and mess JQM touch events.
I found a workaround by using a Firefox plugin (Grab and Drag), which is an acceptable solution since I control the device that runs the browser.
It works fine, but it is not a pure JS/HTML/CSS solution...
I am using jQuery mobile 1.1.0 and I am facing a problem that when I run the application in the browser it works fine but when I run this through 'Home screen icon' it starts flickering the pages.
I am using iphone 5.1.
Does anybody have a solution for this issue?
You need to update to jQM 1.1.1, screen flickering issues have been fixed in this version. This problem affected running jQM in UIWebView container like PhoneGap, but I assume it's similar when you save it on the home screen.
Try updating and see if it'll fix your problem.
Announcing jQuery Mobile 1.1.1
It's because of the page transitions. If you disable them globally for the time being, you'll fix your problem. It sucks to lose the transitions, but the white "flash" is far worse.
Here's the docs on disabling page transitions: http://jquerymobile.com/test/docs/api/globalconfig.html