Horizontal scrolling fails with width=device-width iscroll

Question

Example code here: http://pastebin.com/95z3pftQ

I'm trying build a mobile page with a fixed header, and a "content" section, which will be filled external (sanitized, but otherwise arbitrary) HTML. I need to use iscroll or something like it, because I need to support vertical/horizontal scrolling and zooming, which has no native equivalent.

The issue is that with the width=device-width meta viewport directive, mobile Safari resizes all block-level elements to the width of screen, irrespective of the width of their contents, unless they have a width specified. iscroll then looks at the width of the container (which is the width of the screen), and isn't aware that there's more content to scroll horizontally. So in this example, the computed width for div#container on my iPhone is 290px, but the computed width for table#really-wide-content is 1000px.

Is there somewhat to disable the effects of the meta viewport directive inside of one div on the page? Note that I can't know a priori how wide the content is, or what its html structure is like, though I can alter inline styles programmatically if needed.

Lactation

Answer 1

Can you set the width of iScroll at some point after the load such as this JQuery example:

$('#scroller').width(your_width);

via https://mcmap.net/q/1474562/-iscroll-4-allow-users-to-zoom-out-from-page-content-as-well-as-zoom-in

Is there anyway you can destroy and recreate iScroll after the page has loaded as suggested here: How to set dynamic width in iScroll for scroller?

Also, can you set the viewport width to width=device-width after loading has occurred? Maybe this would allow iScroll to load accommodating the content first.

Aubarta

I ended up setting the width of the element directly, though this solution may be cleaner. I don't know the width a priori (the cause of the issue), but I later learned about element.scrollWidth. developer.mozilla.org/en-US/docs/DOM/element.scrollWidth – Lactation

Yes. scrollWidth was exactly what I was looking for. – Lactation

I asked a similar question: #13999182 I wonder if that's essentially the same problem you were having. – Aubarta

Your answer was not correct. I specifically said in the question that I didn't know the width of the element, so setting the width of the element wasn't useful unless I could find the width. (I misread your answer in my comment above, I thought you were passing the width to iscroll, but actually you just quoted the jQuery api back to me.) – Lactation

I didn't try setting width=device-width after the page had rendered because: (1) this would probably lead to jerkiness on the user end, (2) I had already found something that actually solved the problem, and (3) jquery-mobile set the viewport definition when you set a fixed header and overriding that behavior is a giant hack. – Lactation

And destroying and recreating iScroll wouldn't (and didn't) work at all because the issue was that iscroll was using width instead of scrollWidth. – Lactation

What about the link I posted above concerning CSS and fitting a 'div' to its contents? #13999182 This provides the exact solution you're after without knowing the width of the child element. – Aubarta

I don't see how that solves the problem. The issue is that all block-level elements get a computed width at most the width of display. So even if they are in an inline-block container, their width will be at most the width of the display. FFS, bounties aren't about throwing a bunch of stuff against the wall and seeing what sticks. You didn't solve the problem I was having. End of story. – Lactation

As a clarification, for the display:inline-block thing to work, I would have to set all the descendants to display:inline-block, which would mess up the formatting of the external HTML in ways I can't predict beforehand. – Lactation