Highlight text/input inside the querybuilder

[DrunkenMoose]

Hey,

First of all thanks for the library, I'm currently using it as an algorithm builder instead of a query builder! I have a little question about some HTML/CSS related problem (I think). I cannot highlight text or input values inside the querybuilder. This also occurs when I am using one of your examples.

The one that works:
http://mistic100.github.io/jQuery-QueryBuilder/

The one I cannot highlight inside the querybuilder:
http://mistic100.github.io/jQuery-QueryBuilder/demo-basic.html

So my question is: does this happen on purpose or not? And do you maybe know a solution that enables me to implement this functionality? Thanks in advance!

[mistic100]

odd...

I guess it's a problem with sortables, did you try without it ?

[mistic100]

it's Firefox specific bug which prevent input select within draggable elements

possible solution : remove draggable attribute on focus and add on blur
http://stackoverflow.com/questions/21680363/prevent-drag-event-to-interfere-with-input-elements-in-firefox-using-html5-drag

[DrunkenMoose]

Ah your last comment explains indeed the problem for inputs. I develop in Firefox so that explains that :p Still when I try to highlight a text inside a div inside a rule then I still cannot highlight it. I tried disabling all the CSS through firebug to see if maybe a wrong padding is set. But no luck so far on the CSS part. Still thanks for the link I will check it out. Thx!

[mistic100]

I think this is not considered a bug for Mozilla
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations

Note that when an element is made draggable, text or other elements within it can no longer be selected in the normal way by clicking and dragging with the mouse. Instead, the user must hold down the Alt key to select text with the mouse, or use the keyboard.

As I accept drag only from the drag-handle (sort icon) I think I can add the draggable attribute on mouseover and remove it on mouseout

[DrunkenMoose]

Ah well that's indeed the problem. Which end-users know that alt-select is the way to select something inside a dragable element XD And I think it's going to be difficult to implement a workaround. If you add/remove the draggable option while hovering over a listitem then you still won't be able to select something inside this listitem. (because the user needs to hover over it). So don't worry to find a fix because it's obviously Firefox's fault :p Thanks for the info and if I found a workaround then I will share it.