I have a UIWebView to show local content in HTML. I want the content indented on each side so as to not touch the side of the screen. The problem is the content is in the UiWebView, so when I resize the webview the scroll bar sticks out (see picture below).
I'm at my wit's end trying to fix this.
Make the UIWebView edge to edge, then you can either inject the following CSS code, or add it directly to the files (since you say they are in the app bundle).
div.myContent {
padding-right:50px;
padding-left:50px;
}
You can of course change div.myContent to whatever you want.
This way, scroll bar stays on edge but content indents on both sides.
Related
I am using iframe-resizer for cross domain application, The Iframe loads fine in desktop and andriod devices but on my Iphone, I am facing below issue:
The bootstrap modal pop ups on Iframe app is hiding and flickering behind when I scroll on page.
I tried
-webkit-overflow-scrolling: touch;
on container of Iframe but that does not work.
Any help/suggestion will be highly appreciated.
We fixed the issue by using position:absolute instead of position:fixed
Position fixed and absolute are somewhat similar in behavior. Both use x,y positioning in the view port and both are outside of the DOM document flow so other content is not affected by the placement of containers. Both require zIndex positioning to determine vertical priority in the view stack.
Position fixed keeps the element pinned at whatever position you set it to regardless of the scroll position of the browser. This makes sense in some scenarios where you actually want to scroll the entire page but leave content in place. The key to remember is to not use it when you build have your own scrollable content on the page.
It turns out in my case I don’t really need position:fixed because I manage the position and size of the container and toolbar headers and footers myself anyway. I know where everything is positioned and keep the content area effectively wedged in the middle of the statically sized elements. By way of CSS and media queries I can force the header to the top and the footer on the bottom using fixed sizes which means I can safely use position:absolute.
At present, when a page is scrolled on Safari iOS 7 (11A4449D) the header chrome reduces in size and clicking anywhere in the bottom 44px of the viewport brings in the footer grey bar (with the next/prev page links etc).
Conversely, scrolling back up the page keeps the footer bar in place and the header bar at the larger size. Is there any meta-tag (or similar) in place to prevent this behaviour of make it consistent on both scroll-up and scroll-down?
We could work around the issue if the browser fired some JS event when the chrome came into/out of view but it doesn't.
Just as an update to this:
We eventually worked around this issue by using bottom: 0; instead of top: 100%; in the CSS. We had wanted to use top: 100% in the first instance as it meant that items being added into that element would be rendered down (off screen) automatically.
By taking the inverse approach we just have to manually translate the area off (using JS) an equal amount as the item being added.
This results in out 'sticky' footer staying above the bottom piece of OS chrome when that appears.
I use the tinyscrollbar plugin on a site in a couple of sections.
So far, it was working great. But now for some reason, the scroll is avaible with the mousewheel but not with the drag/drop slider..
The resolution i'm using is 1360x768, but I test it in a 1920x1080 and the drag WORKS!
I check with firebug if the problem is an overlapping element over the slider but I can't see anything..
I didn't post any code, because I didn't make any changes on tinyscrollbar.js..
If you upgraded to windows 8 there is a bug where it only registers screen touch instead of both the screen and mouse... so you will need to address that
Check the z-index of the scroll bar element places it ontop of everything else (an arbitarily high z-index is fine for this purpose) as this can sometimes end up behind the custom scroll viewport meaning that when you go to drag the scroll bar you click on the wrong element.
Im using the jscrollpane jquery plugin. My content are images that expand when you mouse over them, and shrink back to normal on mouseleave. What I need if for the images to be able to expand over beyond the scroll bar and remain visible while expanded.
By giving the images a z-index I can get them to expand over the scroll bar handles, but im struggling to get them to expand any further.
If I set a number of elements to having overflow visible I can get it to work, but then I have browser scroll bars at the bottom of the screen.
Can I have the images visible when they expand but no browser scroll bars?
Thanks
Answer from:
http://groups.google.com/group/jscrollpane/browse_thread/thread/8073378d51551efa
Hi,
If I understand correctly you want your images to expand out of the
bounds of the scrollpane "box"? That won't be possible in a simple manner.
A workaround might be to do something like this:
* On mouseover clone the image that is rolled over and attach the
clone to the body with position: absolute.
* Use jQuery to figure out the position of the image you cloned with
respect to the body (a loop with offsetParent will be your friend
here).
* Apply this position to the cloned image so that it is sitting
directly above the original image then expand it.
* Listen for the mouseout event on the cloned image and when this
happens the shrink the cloned image and then remove it from the body.
Hope it helps,
Kelvin :)
I want to have a static footer image with 5 buttons for navigation in my mobile phone website. The image is here http://www.pintum.com.au/jm/footer3a.jpg. The blue icons should be the default, the yellow icon should only be visible for the hover or active state.
I want to know how can I make this image scale to the correct width on all mobile devices (landscape and portrait) and have links to other pages and make the current/active pages icon the yellow color?
What I have tried so far
I first tried to make a CSS Sprite but that go ugly (complex) quickly. Painful working with widths everywhere so the image scales correctly as I had no way of knowing the height in pixels since the width is dynamic. I could use JS to find the width and calculate height on the fly. But this sounds like overkill.
Next I tried to have a single image with a width of 100% then place div overlays on top of the image. But with this solution I could not figure out how to navigate pages using JavaScript click event, or figure out how I would be able to change the image icon on the selected page http://jsbin.com/uraya5/3/ . And detrmining the correct height for the div
Last I tried to make each button a seperate image. These seems like the easist soultion. But jQuery Mobile adds a bunch of extra styles to the button I do not know how to remove. See http://jsbin.com/uraya5/4
So whats the best/easiest way to do this?
How can I remove the style around
links?
Or can I use a single image CSS sliding door method? To reduce HTTP request.
Ok I figured it out
See soultion here http://jsbin.com/uraya5/10/
I had to:
Set width to 19% of each button for
some reason there is spacing between
each button so 20% does not work.
Set ui-bar-a background to black so
it hides the spaces between my
images
Use this JS code to navigate pages $.mobile.changePage($("#about"),
"flip", true, true);
I would still like to use a single image instead of having 5 different images to reduce http calls. So if anyone finds a eligant soultion for this please let me know.