Comments (6)
This could be an issue with a rendering glitch based on how we're using CSS transforms. A test case in jsfiddle or the like would be very much appreciated.
from drop.
I have put together a jsFiddle, but first a couple side issues I noted. This might be peculiar to jsFiddle or I might be doing something wrong, but I thought to share.
As you can see from the fiddle I am creating a drop like this (where #X
and #Y
are DOM elements):
target = $("#Y")
template = $("#X")
drop = new Drop({
target: target.get(0),
classes: DROP_THEME,
content: template.html(),
position: "bottom center",
openOn: 'hover',
})
target.on("click", function () {
$(drop.dropContent).find(".list-group-item").first().remove()
drop.tether.position()
return false // preventDefault; stopPropagation
})
When I run this the Drop does not seem to respect the arguments position
and openOn
. The Drop always appears in the top center and always opens and closes on both hover
and click
events (not just hover
). I just thought to point this out since it just didn't seem like the intended behaviour. In any case it is a separate problem from the issue at hand.
I worked around the above and found the issue to reproduce by setting the position
to top center
and openOn
to null
, as in this second jsFiddle. It is still not consistently reproducible, but it definitely exhibits if you fiddle with it enough (pardon the pun).
If you keep clicking the Drop button it will remove items from the drop contents' internal list, and you can click "Reset" to add them all back in. For me when the list of items gets to around 2-3 the drop will sometimes disappear. It seems to reappear on scrolling.
In my own application (i.e. not the contrived example here) it does not always reappear on scrolling, and it also does not respond to drop.open()
or drop.toggle()
, so it may not be exactly the same issue - but it seems pretty close and a good place to start. 😀
from drop.
After looking at the second jsFiddle, I believe this is most likely a positioning bug in Tether. When I played with it, at 3 items remaining the Drop was positioned to translateY(-1700px)
(off screen to the top). @zackbloom thoughts?
from drop.
This illustrates the problem: http://jsfiddle.net/3bNE5/1/ vs http://jsfiddle.net/3bNE5/2/
The mistake is assuming that the body would act like a position: relative
container by default. It turns out it makes the viewport act like the container. Adding position: relative
to the body fixes your example, but I'm still thinking about how to fix this in tether.
from drop.
This should do it: shipshapecode/tether#31
from drop.
Looks good - here is an updated jsFiddle with @zackbloom's patch.
from drop.
Related Issues (20)
- Tabbing HOT 2
- TypeScript support HOT 2
- Position of the div in the DOM tree
- Arrow w/ `top center` attachment and positioning renders underneath content
- Mobile: When target is input type="text"
- Offset, TargetOffset and other options are not passed on the Tether
- Drop instance event handling HOT 1
- I want to show a div or particularly a table inside the dropdown but getting error
- Error is thrown if drop is destroyed before hover timeout executes HOT 2
- Element renders off-screen for mobile HOT 4
- Multiple Drop instance
- Rendering Drop before first mouseover event
- Drop close if click on label inside drop content HOT 1
- Feature: anchor to point
- Maintainers HOT 4
- Nested drop components
- Drop goes out of view with svg rect
- Uncaught ReferenceError: Drop is not defined
- content contain select tag
- Firefox position problem
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from drop.