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
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 using jQuery ui for the draggable function. I have snap on my parent object. The problem is the following: when the object snaps to the parent, it gets "top: -1px, left: -1px".
How can I prevent this and make it snap to 0 rather than -1?
See this jfiddle + Inspector to see what I mean:
jsfiddle.net/Fredettiw/L0dmzstq
As soon as you move the rectangle, it snaps to the .page, but it gets -1px.
(Sorry i couldnt link the jsfiddle with http, because I got an Error every time I tried to save as a link)
Only first time when the object snaps to the parent it gets "top: -1px, left: -1px". The reason is the parent border (border:1px solid black;). If you give parent border 10 px then it will get "top: -10px, left: -10px".
I have created 3 jsfiddle for you. In first one I removed parent border and added background property for parent (background: lightgray;) to test whether the parent border is causing issue which indeed is the root cause of the issue.
Please have a look at first jsfiddle:
http://jsfiddle.net/Ashish_developer/cfcvyng3/
In second jsfiddle I have not removed border from parent but added top and left margin to draggable object.(ex. if parent border is 10px then give top and left margin 10 px to draggable object). It is working fine.
Second jsfiddle URL:
http://jsfiddle.net/Ashish_developer/7k8h131e/
In third jsfiddle I have not changed your CSS but jQuery code. Though this fiddle also serves the purpose but in this code draggable object can be dragged within the parent object not outside of it.
Third jsfiddle URL:
http://jsfiddle.net/Ashish_developer/fr4bcpu5/
Second jsfiddle is working fine and fixes your issue.
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 + %
I'm using jQuery UI and have setup a table to resize columns.
span {
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
I apply some simple ellipsis to the cells so that when they are too small I get the ...
If I look at the page it looks like:
When I resize the column however, it doesn't re-apply the ellipsis :(
Is there a simple way to do this? I tried removing the overflow by making it visible, then re-applying it to be hidden, but the ellipsis goes back to the original view when rendered.
The problem was that the Table Cell had a fixed width in CSS:
width: 120px;
Which was then resized with JavaScript. When the resizing happens the cell content in the cell stayed the same width.
Changing the CSS to be min-width: 120px; and resizing with JavaScript from width to min-width solved the problem.
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/