Develop Reference

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 place a div under a textarea and be able to handle events on it?

I want to make something like Grammarly, exactly like this:
The text is in a textarea, and a div for highlighting is under it, when I click on the red line, the correction card appears, but with z-index of the div less than the textarea's one, I am losing the events on it !
How can I implement such thing ?

If Element A has a lower z-index than (ie. is underneath) Element B but Element B has the following applied (either in the initial stylesheet or later, dynamically):
element-b {
pointer-events: none;
}
then any user clicking on Element B will actually be clicking on Element A.
Essentially the click goes straight through the element which cannot take pointer-events and instead hits the element beneath.
Further Reading:
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

Stop Dynamic Table Resizing

I have a table using:
<script src="/js/jquery.tablesorter.min.js"></script>
<script src="/js/jquery.tablesorter.widgets.min.js"></script>
The layout of the table looks like this:
When you click the blue edit button on the right the button should disappear and a green check and red X should appear. This allows the row to be edited. It enables the input fields for that row which are originally disabled:
The problem is that whenever I click the buttons that shows or hides the other buttons my table resizes to the left. The Modify row increases in width. Is there a way to stop the dynamic resizing of this Javascript table? I tried using Javascripts show/hide for the buttons and also using a CSS class called hiddenButtons which has display none and hiding the buttons that way but both attempts resized the table.

If you give each td in your final column that has the header "modify" a class and then give that class a defined width of your choice. This should stop happening.
The HTML/Browser is automatically stretching the TDs out to what it believes is even for the content within them. Adding or removing content from a td without a defined width will do this.

click events and css attributes not attaching to divs, possibly because divs are "mostly padding"

I'm trying to attach click events to a couple of divs. One of which has no height or width, just borders. Maybe it's just the browser, but the clicks are being triggered very unreliably. Even the css parameters .class:hover{} isn't really working.
$("body").on("click", "._tlh_dropdown, ._tlh_dropdown *", function (event) {
isn't working when the a div contained by ._tlh_dropdown is clicked. And the div ._tlh_dropdown_close_button is not removing it's parent div when clicked, nor turning a darker shade of gray when it is hovered over. What am I doing wrong here? I assume it has to do with the click event not being applied to the areas of the divs that are "just padding". Is this the case? How can I overcome this?
http://jsfiddle.net/UrNUM/7/

This is happening because the underline element that is a div element overlaps the elements in question . As you know div is a block level element.
One work around is to to set the 2 divs to inline-block
._tlh_dropdown_input_container, ._tlh_dropdown{
display: inline-block;
}
Check Fiddle for hover
If you want the div to be block level as it is then you can also play around with the z-index
._tlh_dropdown_close_button{
z-index: 1;
}
This will make sure the close div is always on top of the underlying container
UPDATE
2 events fire for every click event on the page..
So the content is not shown when u click on the image because of this condition
if ($targ.hasClass('_tlh_dropdown')
|| $targ.closest('._tlh_dropdown_content').length)
return;
This happens because the e.target when you click on the arrow image will be the arrow and not the tlh_dropdown .. So it fails on this condition and moves to the next statement where the content is removed.
Change it
if ($targ.hasClass('_tlh_dropdown')
|| $targ.closest('._tlh_dropdown').length
|| $targ.closest('._tlh_dropdown_content').length)
return;
It should work..
Check Fiddle
Also I feel the same can be accomplished with a lot less code. You can always have the HTML already built and then hide or show based on the condition.

Regarding the close button, if you hover "_tlh_dropdown_input_container" in the inspector, you can see that it overlaps the bottom part of the X button. That's why the hover/click event on the X is not caught below the middle of it.
Regarding the down arrow, just wrap it with another DIV on which you'll add the events. You can achieve minimal HTML by using a single DIV and adding the arrow to it using CSS :before or :after.

Hide scroll bar even when the cursor hovers the div

I have a div with a text scrolled up and down with 2 simple buttons & JS.
I wish to totally disable the scroll bars so they will never appear on the screen, even if the crosser is above them.
How do i approach this problem?
Thank Shani

Add overflow: hidden to the css rule for that div.