I am bulding a mobile project which has a number of modules having elements positioned as fixed. The issue which am facing is only on browsers running on iOS.
The exact issue is that whenever I tr to scroll over the body of the page having , say the bottom toolbar, as fixed, the whole fixed element moves respectively with the scroll, and once the scroll ends completely, then only it comes back to its assigned place.
I have given the body of the page a relative css rule.
Please help as this happens only on iOS.
.add-to-block {
background: #fff;
position: fixed;
bottom: 0px;
right: 0px;
display: block;
height: auto;
width: 100%;
*(inner content element) {
inner content element styling...
}
}
Please try this, source here
.add-to-block {
transform: translate3d(0,0,0);
.....
.....
}
There is not really an easy answer to this as it has been a known issue on ios for a while (supposedly fixed in ios8) but this gives you a few ways to fix it: https://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios it details all the issues with position fixed on ios devices and possible ways to fix it if you need to use it.
Add height: 100% and overflow: auto for fixed element.
Full example at https://codepen.io/astnt/pen/ExgOqeX
Safari allows you to scroll beyond the limits of the fixed div so that it can put in a nice bouncy effect. When you scroll past this point though, if there is a container that is scrollable, then subsequent touch events get handed off to this. Therefore scrolling does nothing for a bit until control gets handed back to the fixed div.
The fix is to give the container div the overflow-y: hidden style so that Safari does not hand off the touches, and we continue interacting with the fixed div.
None of the proposed solutions worked for me, although i had the fixed element inside the scrolling div (and moved it up), had no transform or other layer-creating properties on the parent elements (and created a layer on the fixed element) etc.
My solution was to just change the fixed element to be position: sticky;
Related
I have a view where a lot of data is displayed in a table. I have to have a big screen to see it all but can not count on that users always have that size as I have.
But unfortunately my grails project doesn't support horizontal scroll so if your screen isn't wide enough, you aren't able to see the rightmost part.
What can I do to get the view scroll horizontal?
I use version 3.2.4 of grails.
Add the following style to your gsp, overflow is discussed here:
<style type="text/css">
table {
display: block;
overflow-x: auto;
}
</style>
I'm having issues with my footer. It's the appropriate width and length but I can't get the text to move.
I've tried toggling with the numbers, using both negative and positive numbers with no luck. I'm using a theme created by another tumblr user, with permission to edit it to my liking, but she won't help me edit it, which is how I got here.
I'd like the text on the left side to be 20px from the left, and the text on the right to be 20px from the right. Both sets of text should be 15px from the top. (These are just guesses- once this problems solved, I'll probably toggle a bit more.)
Here's a link to the coding: http://pastebin.com/c0RdkC4W
Thank you in advance!!
OK, so you have some css being applied to the footer (I assume you are talking about the main site footer rather than the footer for each post.
You need to find the css for the #footer
And apply the following css:
#footer {
padding: 15px 20px 20px 20px;
height: 130px;
}
That is in addition to the properties already applied to that element. It's on line 231 of the full block of html you posted.
I am afraid setting the height on the footer is a hack, you would have to adjust this if you add or remove navigation items. A better solution is to use clearfix.
You also have some inline styles hard coded into the html, this is often frowned upon as it is easier to control the css using classes, id's and element selectors. But sometimes these inline styles get written to the template via the tumblr options.
See how you get on and give us a shout if you need more help.
Is is possible to create a scrolling div within a html5 IOS app where the height needs to be dynamic?
To give a bit of background to my headache - our app has 3 main panels - the user can left or right swipe to reveal the first and third panel which contain notifications/settings (as in the Facebook app. All 3 outer panels are fixed position.
The main panel contains 6 pages - which are all absolutely positioned divs which hide and show via menu selection. Each revealed div (or page) needs to scroll, but all content is dynamic - so I cant set a height.
I have found several solutions for fixed heights - but none so far for dynamic heights..
Any suggestions?
Scrolling Divs
Another new feature in iOS 5+ is divs can finally scroll. To make a div scroll you’ll just need to add the following (this example has a fixed header but adjust the positioning to fit your app):
.scrollable {
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 0;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
The trick here is adding the -webkit-overflow-scrolling to anywhere you’d normally set your overflow. The downside of Apple’s implementation is that the div doesn’t bounce as you’d hope when you are already at the absolute top or bottom. Instead of bouncing the div being scrolled, it bounces the whole page and reveals the browser chrome. This is where you’ll need a javascript fix.
Please try this example for Scrollability.
Please see this Link
iScroll is a party lib which help in good scrolling.
It has a scrolling without providing height.
We just have to call a method refresh when dom elements of scrolling are added.
I have a simple example where I am trying to drag an element inside another element with a fixed position. Once I drop the element inside the fixed (or absolute) position container, the element is no longer draggable.
Does anyone have any thoughts? I'm thinking this might be a bit of an issue if any fixed/absolute positioned containers cause draggable elements not to function properly. See my JS Bin.
http://jsbin.com/igiqan
This has actually nothing to do with the fixed position.
Your draggable element has a lower implicit z-index based on the DOM tree. So when you drag it onto the drag area, it is below it.
Give it an explicit z-index so it is frontmost:
.box
{
width: 20px;
height: 20px;
color: #c40000;
background-color: #c40000;
z-index: 100;
}
DEMO
I just implemented drag and drop sort table on my site
Demo Link
On chrome sometimes the rows border change colors specially the bottom one it turns black and its pretty buggy.
Works fine on IE and Firefox
I also notice that my row is very small when dragging and it's not the actual size of the of the row. Any work around for this?
I'm sure that has to come because you do not use any CSS Reset...
and by the way, you should add border-top: none; to your td, th style right after you set the border, so you don't have border with 2px as the bottom of one will be added to the top of the other creating lines with 2px's and not a smooth 1px in every tr
Here is an updated version: http://jsfiddle.net/U22Bz/3/