CODEWITHSUNDEEP
jqueryjquery-uidrop-down-menujquery-ui-draggable
Yusril Maulidan Raji
Yusril Maulidan Raji

Reputation: 1932

Overlap Text on Dropdown Menu

I have an issue with my Dropdown menu that is overlapped by the content of the page. Here is the jsfiddle of it: https://jsfiddle.net/yusrilmaulidanraji/qu4fnxLn/ and here is my code:

html:

    <div class="dropdown" style="float:left;">
      <button class="dropbtn">Left</button>
      <div class="dropdown-content" style="left:0;">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
<br><br><br><br>
<div id="draggable" class="draggable draggable-text ui-draggable ui-draggable-handle content" title="Click and Drag to the Grid">Company Name</div>

CSS:

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

JS:

$( function() {
    $( "#draggable" ).draggable();
  });

I assume the source of the problem is the draggable class from JQuery-UI. As you could see, the content is draggable and I use a class from JQuery-UI for it. Here is the documentation of the class: https://jqueryui.com/draggable/

So, is there any solution to make the content to not overlap the dropdown menu? Thank you in advance.

Edited: Previously I tried to simplify my case but as a result, it has a different chronology. In order to make it precise, I made a new jsfiddle with the case of my actual project (I also tried to simplify it actually, but hopefully it will have the same solution in the end). Here is the jsfiddle of my project: https://jsfiddle.net/yusrilmaulidanraji/qu4fnxLn/4/

Upvotes: 0

Views: 2019

Answers (2)

Yusril Maulidan Raji
Yusril Maulidan Raji

Reputation: 1932

Based on @AgataB answer, I have found another nice solution. Instead of I change the z-index of the content, I change the z-index of dropdown.

.dropdown {
    position: relative;
    display: inline-block;
    z-index: 1;
}

Now, the content is not overlapping the dropdown, and the draggable is still working.

Upvotes: 0

AgataB
AgataB

Reputation: 647

You can set z-index of the draggable element in CSS with:

.draggable {
  position: absolute;
  z-index: -1
}

z-index: -1 sets it to the back, and it only works on positioned elements, hence the need for both settings. More on it here.

Note that this will position the draggable element at the back, behind everything including the button. If that's not the intention, I'll let you figure out the rest. Good luck!

Upvotes: 1

Related Questions