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/
Related
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;
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.
Fiddle: http://jsfiddle.net/RqE2p/
There is a list of sortable() inline text elements. The elements are "number one", "number two", ...etc. The problem with some of them (in my case e.g. "number five" and "number two", but it depends on current browser zoom I think) is that as soon as I start dragging it, the second word goes to the second line.
That's because the width of the element changes while dragging. In Chrome Inspector, Computed Styles, the "number five" width before dragging is 75.19999px. As soon as dragging starts, the computed width is 75px. So, the second word doesn't fit into the first line anymore.
For this example, I have problem only in Chrome. But in real life project, this happens in FF, too. I don't know, why in this example all is ok in FF.
Is there any simple method to deal with this, other than maybe making a javascript loop and setting each sortable element's css width to 1.1 times its current width?
You can adjust it directly with CSS without having to dabble in JavaScript:
The simplest solution would be to set a height for your ul lis and set no-wrap to make sure the text stays neatly on one line:
ul li {
height: 20px;
white-space: nowrap;
}
This should solve your problem :) Enjoy using sortable!
EDIT: Can you give more details; if the lis are set to white-space: nowrap; your text shouldn't go to a second line unless the CSS is being overwritten. If it is add an important tag to your white-space: nowrap; (eg. white-space: nowrap!important;). It's working on Chrome zoomed in 110 + %
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.
http://doc.bigheadservices.com/my-page.php
In the navigation bar, under the logo, the FAQ block is wrapping, cutting off the Q. How do I fix this?
In this particular case, I fixed it by adding 1px padding around the element. The text was a link within an list-item. The sIFR was applied to the <li>. Adding 1px padding to the <a> fixed it.
Not sure if it is the proper way, but it works and I've got tons more work to do.