Comments (12)
what do you mean by 'move' (i.e. when exactly the issue occurs)
do you have an example available online ?
from bsmselect.
I mean, when you start dragging a list item it then appears at the top of the window (so it disappears from bsmSelect visual module). I look at Firefox and what it happens is than the top
CSS property gets too low values (but only in Firefox). Finally I realized that on the root of the issue there was the overflow-y: scroll
property defined in normalize.css. If I remove this property, everything works all right.
I haven't any online example. This is for a backend. If you give me some time, I'll try to send to you a demo (I'll try today), but I think that setting html { overflow-y: scroll}
to any page with bsmSelect will have that issue in firefox.
from bsmselect.
Ok, I see.
I asked the question to see if the issue is relative to jQueryUI or not. If it is then we should report the defect there also (and fix it in bsmSelect anyway).
No rush for the demo, I'll probably not be able to check this before eow.
from bsmselect.
Hey, I think there is no need of the demo. I just tried it in bsmSelect demo page and the same problem arised. Just add a rule overflow-y: scroll;
in html
element with firebug and here you have...
Thank you!
from bsmselect.
The example on the jQuery UI page is not affected because the container has overflow:auto
(same as the fix you describe).
Would you mind submitting a PR ?
You need to adjust the css, readme.md (contributors), history.md & js (bump version, describe the update). Please include "(fix #21)" in the commit message
Thanks,
Victor
from bsmselect.
There is a problem with this solution.
- If I apply
overflow: auto
to.bsmList
or better to.bsmListSortable
then ugly scroll bars (x and y axis) appear surrounding. - If I apply
overflow: auto
to.bsmContainer
then only x axis scroll bar appears. - It's easy to make disappear x axis scroll bar in both cases, removing
width: 100%
in .bsmListItem. I think this rule should be replaced withwidth: auto
, otherwise its 1px border forces the scroll bar to appear. An automatic width should work as desired, asli
is a block element.
Ok, as you see, applying overflow: auto
to .bsmContainer
and changing width: 100%
with width: auto
in .bsmListItem makes everything looks great... but until you begin sorting items. When you do so, if you go beyond .bsmContainer
limits then scroll bar appears again, instead of freely moving around the page.
In the example in jQuery UI page the problem is not immediately visible because they have a very big container, but they have the same problem if you move the items beyond the big container.
We should make better this solution or otherwise live with the ugly scroll bars, at least in Firefox. What would you prefer?
from bsmselect.
So what about using overflow: visible;
?
Switching to an auto
width would also be more correct even if not required then.
from bsmselect.
And I forgot to thank you for your accurate analysis !
from bsmselect.
No, using overflow: visible
doesn't fix the issue. It's only working with overflow: auto
, don't know why.
No problem, thanks to you to work in this plugin.
from bsmselect.
Ok so let's go for auto
then. Could you apply the changes programatically in the sortable plugin rather than having something "hardcoded" in the css ?
from bsmselect.
Are you sure? I mean, this issue is related purely with CSS, I think it would be cleaner to implement in CSS so anybody can see quickly.
On the other hand, we can go on with a generic rule or with a hack to firefox (I have seen this issue in firefox, but no in chrome or opera, no idea about ie). If we use a hack, then the scroll bar problems won't appear in browsers different than firefox, but the code won't be standard compliant. As you like.... :)
from bsmselect.
The thing is that you won't see the issue when you are not using the sortable plugin... but the extra css won't hurt when you do not use the scrollable plugin (I am thinking loud here).
So ok to do as you want and submit your PR the way you think is best (yeah I don't like hacking css either, but adding a comment might be worth).
from bsmselect.
Related Issues (20)
- missing default order HOT 15
- Drag and drop doesnt work in ie9 HOT 4
- bsmSelect doesn't update its values when it is called again and its select options have changed HOT 2
- During animation, long text wraps then unwraps HOT 3
- Multiple selects but each has the same disabled items HOT 1
- Unable to save sort order of listbox HOT 17
- Object doesn't support property or method 'init' HOT 1
- How to change "title" dynamically HOT 4
- addItemTarget: 'original' sort order not preserved HOT 1
- A few issues (Not animating, not retaining sort order)... latest jquery. HOT 7
- Selecting item by typing includes multiple items. HOT 3
- pre-selecting items during page load and cannot control order HOT 10
- On change event '$(this).val()' display previous value HOT 10
- After AJAX update, change event fails HOT 6
- How to allow up to 3 selections ? HOT 1
- Wrong behavior on Example Number 2 at the demo page HOT 3
- After create new option, the order doesn't is kept HOT 6
- Not working properly with latest jquery.js
- Is this plugin still maintained? HOT 2
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 bsmselect.