Develop Reference

Vue draggable with elements that change height upon being dragged

I have a Vue3 app with vue-draggable and I have a list of sortable cards which possibly contain long text inside. To make dragging easier, I want to hide the text contained in the cards and only show their title when one is being dragged. This makes it easier to drop the card into the right position.
In order to achieve this, the elements which I want to hide inside of the cards while one is being dragged are given a CSS class hidden-while-dragging and the whole collection receives a class dragging while an item is being dragged. This is achieved by setting a boolean variable to the correct value upon receiving the events start and end and conditionally setting the class on the whole <draggable> element. Then I have this CSS rule:
.dragging .hidden-while-dragging {
display: none;
}
This works fine except for one case: if I drag an element and, upon dragging, the height of the parent container changes (due to the disappearing of the content inside of the cards), I am not able to drag the item: it instantly gets dropped in place, and no end event is emitted, so for example the collection keeps the class dragging.
Afterwards, I am able to drop the element once again: the issue doesn't occur this time, because no change in height occurs, and after I drop the element, everything goes back to "normal".
I made this repo in order to have a reproducible example: https://github.com/samul-1/vue-draggable-bug-demo
Here's a codepen as well: https://codepen.io/samul-11/pen/mdjKvZa try and drag the first or last element and you'll see the issue.
You can observe the height of the #app element changing when dragging an element. An interesting thing is that this only happens if dragging the first or third item in my example, not the second. So apparenly the issue is with elements at the edge of the parent.
Is this a bug with the library or is there a way around it?

jQuery Autocomplete list hidden under the div underneath

I have a <section> tag containing two main divs. The upper div wraps an input to which a jQuery autocomplete widget is assigned. However, the autocomplete list shows under the lower div, making it useless.
I have already tried setting the z-index of both the input and the div to the value that would make it visible, applying the !important annotation, but nothing seems to work. What could be the reason?
Is this really an issue with the z-index? Note that the bottom div contains a widget with animations (drop down menu), if it has any relevance to the problem.
These are the solutions that I tried:
autocomplete suggestion list wrong z-index, how can i change?
jQuery autocomplete suggestion box hidden behind Bootstrap Nav bar
jQuery AutoComplete displaying behind elements after first use
Here's a code that use to fix it, to no avail:
//top div
.tag-filtering-input{
z-index: 4000 !important;
}
//bottom div
.categories-container{
z-index: 3000;
}

how to get html text covered by other div

Here's the thing. I can get selected text with that solution: How to replace selected text with html in a contenteditable element?
But now i have a problem. I'm adding to website divs with different colors to mark some parts of page (i'm setting just position=absolute, top, left, width, height, backgroundColor and opacity) and now when i want to select marked text, selected is that div (which i guess have higher z-index or something else is placing it over other html). And now when i want to get selected text i'm getting nothing. Not even that div. Just null... Any idea how can i get text covered by that div?
And all these things i'm doing in UIWebView component in iOS but that's not relevant, i think.

Google Maps - how to make a div expand to contain its contents

I'm trying to create a custom overlay that basically just contains a
HTML element (a div in this case) with text in it. The overlay gets
rendered ok but the text is multiline, where I would like it to be one line. Looking into the DOM with Firebug I can see that the computed width for the div parent is 44px,
which is why it can't expand and render the text in one line. Is there any way I can correct this without knowing in advance what the required width for the div is?

you can set white-space property of your div to nowrap
div.x { white-space:nowrap; }

How do I stop a textarea from scrolling to the top whenever I change its value

I'm making something where a textarea gets more and more text appended. In firefox, the textarea scroll back up to the top each time.
I currently have something like textarea.scrollTop=1000000; to scroll it back down each time it changes, but it still goes up to the top for a very short time.
Is there any way to stop it doing so?

I ran into this problem, too. It happens in IE and Firefox but not Opera and Chrome.
I thought of hiding the momentary jumps to the top by "double-buffering" changes to the textarea:
Create two textareas with the exact same properties and dimensions. Only one of these is visible; the other one is hidden.
Append text to the hidden textarea: set [the value of the hidden textarea] to [the value of the visible textarea] + [text to append]. (The textarea will automatically scroll to the top, but this textarea is hidden!)
Scroll the hidden textarea to the bottom: set scrollTop to a high integer value like (-1 >>> 1).
Swap the hidden textarea with the visible one. Now the new text is shown, sans jumping to top!
You can swap the hidden/visible textareas by using one of two methods:
Use absolute positioning to place the textareas on top of each other in conjunction with toggling their visible property.
Swap the actual DOM elements. I'm not sure if this will introduce a new type of "flicker." You may have to create a div to contain the visible textarea so the layout of the page doesn't keep changing...

i thing that is problem of adding the content via the script, paste your code which append text to your textarea