I have a web application and in one of the div's I'm using CSS to show an image over image (using: position:relative; top:-100px;). Due to that I get a white gap in the bottom of the page (of where the second image should have been), so I used overflow: hidden; margin-bottom: -100px; in my div, to fix it. It works great when I'm running it in chrome emulation but it does not work when I install the phonegap application on my phone (Nexus 4).
Is there anything I can do to make it happen with phonegap?
Related
I have run my website through the device bar on the dev tools and there is a horizontal scroll there (together with a locally hosted WP site). I tried browsing it in my device but there is no actual horizontal scroll - it only appears on dev tools.
What can possibly cause a horizontal scroll in dev tools but not in the website itself?
Remove the min-width: 320px; from .hero-container it causes problems on small screen devices which causes extra padding on the side. Remove width: 80% and set it to width: auto instead.
I'm learning how to use the Skrollr.js library. Awesome cool tool on using the scroll bar in the DOM to manipulate the appearance of a web site. It does have a bit of a steep learning curve to understand exactly how it works. I'm playing with a simple sample. I have an image that I want to stay on screen in the background for 500% of vertical height. I have other text items that I want to scroll in the foreground. I wanted to do a test and have one of the text items fade to zero.
helpful references: Classic Parallax Scrolling Example, and I Hate Tomatoes Example
I've got an image in a div loaded in a position: fixed; location, and a few divs in the scrolling area below <div id="skrollr-body"> I have a text header that I wanted to fade to zero as I use the scroll bar. Note: I started skrollr.init() without any arguments. Also, I am not using jQuery at all.
My problem is it works erratically on Chrome, and works just fine on Firefox browser. I'm at a loss to figure out why?
I've created a jsFiddle to exhibit the issue. http://jsfiddle.net/q3z3v6op/4/ Fiddle works the same as my test program; Flaky on Chrome, okay on Firefox. When looking in the Chrome dev tools, you can easily see that the red box text opacity value is changing correctly to zero as the box goes towards the top of the display, but the actual display doesn't fade most of the time. I can get it to work if I go to the Chrome Dev tools, open up the drawer (where the console / search / emulation / rendering tab is), then select 'rendering' and click on [ ] Enable Continuous Page Repainting.
Anybody else been here? Any ideas what's going on with this issue? Many thanks.
I updated your fiddle. This is a little bit of a different approach, but it should be more cross browser compatible. I guess Chrome does not like display: block and opacity: 0. This looks like a bug. I tested in on Safari (which is also WebKit) and it does not have a problem. By using inline-block I was able to fix the bug on Chrome.
http://jsfiddle.net/christianjuth/q3z3v6op/5/
Fixed code:
.hsContent {
display: inline-block;
position: absolute;
left: 50%;
width: 400px;
margin-left: calc(-200px - 8%);
color: #ebebeb;
padding: 0% 8%;
text-align: center;
}
I've a problem with css positioning. I would like to display the same web page on my tablet device as on my PC. On PC I'm using Chrome web browser and everything works fine, but when I'm trying to display the same content on Safari web browser on my tablet device, then I obtain the same result as on the attached screen (part of my div content is hidden by the external element). What is the cause of this behaviour? Any ideas? CSS for DIV ELEMENT is:
position: fixed; max-height: 300px; width:200px; overflow:auto; z-index: 100000
Attached situation on:
http://imgur.com/dSueHvV
Changing that from overflow: auto to overflow: visible should solve the problem.
Thank you Josh for answer, but it didn't resolve my problem. It was caused by:
-webkit-overflow-scrolling: touch;
All my divs had this global setting which caused this strange behaviour on mobile devices.
We can read, that is native-style scrolling. Specifying this style has the effect of creating a stacking context (like opacity, masks, and transforms).
My website (http://amosjackson.com) uses css media queries to resize the website so that it fits an iPhone screen. When I view the site (on an iPhone 4), a block of background shows through to the right of the header. The header is width:100% and so should be from edge to edge. I haven't properly coded the css for non-retina iOS (it looks worse on older iDevices) so please don't comment on that.
The Problem is the padding: 10px; in combination with width: 100%; in the #nav element. Drop the padding an it should work.
I'm trying to create a PhoneGap Windows Phone 7 application. In order to imitate an Application bar that should always be visible at the left side of the screen in landscape orientation, I wanted to place a <div> with CSS as position:fixed. This does not work, however, because the IE on WP7 seems not to support it.
Does anyone have an idea how I can display such an Application bar without having position:fixed available?
Thanks in advance
I was also hanging on this problem. It really seems not to be possible to create a fixed element and to position elements after every scroll looks even worse (try the jquery mobile online examples on your phone they do it this way).
I "solved" the problem by using a div container for my non fixed content with style="overflow: scroll" and fixed size. This worked for me. But scrolling in this container doesn't look like native scrolling.
Hope that helps
I've managed to solve the problem on my Win phone 8 (Lumia 930).
I have a modal window and when opened on mobile should stay in view point and scroll inside. Android and iphone worked fine with position fixed but win phone didn't.
My solution was to put active class on html when the modal is active and add this to css:
html.modal_active{
overflow-y: hidden;-webkit-overflow-scrolling:touch; position: absolute; height: 100%; width: 100%;
body{overflow-y: hidden;-webkit-overflow-scrolling:touch; position: absolute; height: 100%; width: 100%;}
}
This positioning html and body to absolute when modal is opened solved the problem. Hope it helped!