The CSS component located just below the dropzone

I've encountered an issue with my infinite horizontal scrollbar. When I drag elements to the dropzone, they appear below it instead of above.

Here's the HTML markup:

<div class="wrapper">
    <div class="header">
      Drop here
    </div>
    <div class="group-wrapper">
      <div class="group-list">
        <div class="group">Drag me</div>
        <div class="group">Drag me</div>
        <div class="group">Drag me</div>
        <div class="group">Drag me</div>
        <div class="group">Drag me</div>
        <div class="group">Drag me</div>
        <div class="group">Drag me</div>
      </div>
    </div>
</div>

The CSS is as follows:

.wrapper .header 
{
    overflow: hidden;
    padding: 8px 4px 10px 8px;
    position: relative;
    width: 100%;
    background-color: #ccc;
    height: 100px;
    text-align: center;
    padding-top: 15px;
}

.wrapper .group-wrapper 
{
    width: 100%;
    padding: 0px 5px 0px 8px;
    top: 20px;
    white-space: nowrap;
    position: relative;
    margin-left: 3px;
    margin-right: 5px;
    overflow-y: auto;
    overflow-x: auto;
}

.wrapper .group-wrapper .group
{
    width: 25%;
    display: inline-block;
    vertical-align: top;
    margin: 0px 30px 0px 0px;
    height: 100px;
    border: 1px solid #ccc;
    background-color: #000;
    cursor: pointer;
    color: #fff;
}

If I remove 

overflow-y: auto; overflow-x: auto;
from the .group-wrapper class, the dragging works correctly but the scrollbars disappear.

JSFiddle

jqueryhtmlcss

Answer №1

It appears that the draggables are positioned behind the dropzone because of z-index stacking.

My assumption is that the dropzone has a different stacking context than the draggables, but I haven't been able to pinpoint the exact reason yet. I will update this answer once I have more information.

To address this issue with z-index stacking, I found success by utilizing the appendTo option for draggable. This option specifies "[w]hich element the draggable helper should be appended to while dragging," effectively resolving the z-index problem.

I also switched the "helper" mode to "clone" because:

Note: The appendTo option only works when the helper option is set to not use the original element.

$(function() {

  $('.group').draggable({
    revert: 'invalid',
    helper: 'clone',
    appendTo: '#container',
    connectToSortable: ".header"
  });

  $(".header").droppable({
    accept: ".group",
    drop: function(event, ui) {
      var drop = $(this),
        drag = ui.draggable;
      drag.appendTo(drop);
    }
  });

});
body {
  background-color: #F0F5F8;
  overflow-x: hidden;
  overflow-y: hidden;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
div#container {
  height: 100%;
  width: 100%;
  float: left;
  position: relative;
}
section#navigation {
  border-bottom: 3px solid #FFFFFF;
  background-color: #72B8F1;
  height: 30px;
}
section#navigation .navbar {
  border-radius: 0px;
  height: 100%;
  margin-bottom: 0px;
}
section#navigation .navbar-brand {
  margin-right: 15px;
  color: #fff;
  font-weight: 700;
  line-height: 0px;
  height: 30px;
  margin-top: -3px;
}
section#content {
  position: absolute;
  left: 0;
  right: 0;
  top: 30px;
  bottom: 0;
  margin-bottom: 0px;
}
section#content .row {
  min-height: initial !important;
  height: 100%;
  position: relative;
}
.wrapper {
  width: 100%;
  height: 100%;
}
.wrapper .header {
  overflow: hidden;
  padding: 8px 4px 10px 8px;
  position: relative;
  width: 100%;
  background-color: #ccc;
  height: 100px;
  text-align: center;
  padding-top: 15px;
}
.wrapper .group-wrapper {
  width: 100%;
  padding: 0px 5px 0px 8px;
  top: 20px;
  white-space: nowrap;
  position: relative;
  margin-left: 3px;
  margin-right: 5px;
  overflow-y: auto;
  overflow-x: auto;
}
.group {
  width: 25%;
  display: inline-block;
  vertical-align: top;
  margin: 0px 30px 0px 0px;
  height: 100px;
  border: 1px solid #ccc;
  background-color: #000;
  cursor: pointer;
  color: #fff;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<div id="container">
  <section id="navigation">
    <div class="navbar" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <a href="#" class="navbar-brand">
            Brand name
          </a>
        </div>
      </div>
    </div>
  </section>
  <section id="content">
    <div class="row">
      <div class="wrapper">
        <div class="header">
          Drop here
        </div>
        <div class="group-wrapper">
          <div class="group-list">
            <div class="group">Drag me 1</div>
            <div class="group">Drag me 2</div>
            <div class="group">Drag me 3</div>
            <div class="group">Drag me 4</div>
            <div class="group">Drag me 5</div>
            <div class="group">Drag me 6</div>
            <div class="group">Drag me 7</div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Asp.Net Core Ajax issue: Pagnation not refreshing the target

This is a straightforward issue! My partial loads correctly using ajax to apply filters and sorting. However, the pagination links send the correct URL, and the response is the desired page but it doesn't update or replace what's currently displa ...

c#jqueryajaxpaginationasp.net-core

What are the steps to customize the HTML formatter in VS Code?

Struggling to craft HTML code at the moment. VS Code underwent an update recently, causing the auto-formatter (Alt+Shift+F) to present different options and override all settings. Any ideas on how I can access that particular file for modification? I have ...

htmlvisual-studio-codevscode-extensions

Can someone assist me in successfully incorporating a web font into a template?

After downloading a Wordpress template, I found the font used for h1 and h2 text to be difficult to read due to its slim design - Century Gothic. However, I prefer using Noteworthy, a font available on my Mac. I converted Noteworthy from OTF to web-font st ...

htmlcsswordpressfonts

Set the background-color of each <td> element to be equal to a value in the array, with each group of three elements having the same

I am trying to color every <td> element in a row of three columns with the same color using the following code: for (var i = 0; itr < $("td").length; i++) { $("td").eq(i).css("background-color", Colors[i]); } However, this code colors each i ...

javascriptjqueryhtmlhtml-tableconditional-statements

Add an element to the jQuery collection before the last element, not at the end

My challenge lies in utilizing AJAX to post a comment. However, the last comment element features a submit button within it. Consequently, whenever a new item is appended, it appears after the submit button. <div class="commentContainer" > < ...

javascriptjqueryajaxpostappend

How to center a container in HTML using Bootstrap techniques

Here is the code I have been working on: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/> <div class="span4 offset4 centered"> <div class="container overflow-hidden"> < ...

htmlcsstwitter-bootstrapbootstrap-4

Another option for handling a series of conditional statements instead of a bulky

Can someone help me with a coding issue I'm facing? I have an application that contains a large number of buttons which I need to trigger using keyboard presses. Currently, I am using a switch statement for this purpose. However, as the number of butt ...

javascripthtml

Determine the varying height of a replicated object

Is it possible in jQuery to retrieve the height of a clone object before it gets appended to the body, without specifying width and height in CSS? <body> <style>.square {}</style> <script> jQuery(function($) { var o = $(".s ...

jquery

Adjust background color on click using JavaScript

Could someone provide me with the JavaScript code to change the background color of a page from blue to green when a button is clicked? I have seen this feature on many websites but haven't been able to write the code myself. I am specifically lo ...

javascripthtmlcssreactjs

Enhancing Inherited Django Templates with Custom Styles

In my Django project, I have created a central HTML template called base.html which contains a set of CSS styles. Various other templates in my project inherit from this base template. The issue I'm encountering is that some of these inherited templa ...

pythonhtmlcssdjangoweb-development-server

Storing the USER ID in the database rather than the IP address

At the moment, I have a star rating system code that saves user ratings in the database and then displays an average on the front end using JS/Ajax. Currently, it captures the user's IP address and uses JavaScript to prevent them from voting again. Ho ...

phpjquerymysql

Can you make two columns in CSS that are left floated and maintain their original order?

While the title may not provide much clarity, I am struggling to put into words exactly what I am trying to achieve. I have created a layout in Photoshop which I have shared below to help illustrate my goal. Essentially, I have a blog that displays my sto ...

javascripthtmlcss

Getting two <div> elements to float below one another can be achieved by utilizing the CSS property "float

Can someone please tell me the trick to floating one element below another on the same side? I want them both to float but be positioned under each other. Thank you in advance. ...

htmlcssweb

Placing two items at opposite extremes of a full-width display with a header

Despite the abundance of resources on CSS positioning, I constantly find myself revisiting this topic because it continues to perplex me with no clear solution in sight. Let's simplify things. Imagine a header div with a width of 100%, like this: &l ...

htmlcss

Exploring ways to traverse through Map values

My app initially displays a grid of cells that I would like to fill in with data. Here is the initial view: https://i.sstatic.net/AgI16.png -> As the app runs, each rider's score will be updated dynamically like this: https://i.sstatic.net/HOPoN ...

htmlangulartypescriptobject

Delving into the concept of the last-child element

Looking for assistance with selecting the final EC_MyICHP_Item from an HTML structure: <div class="decorator"> <div class="EC_MyICHP_Item"> <div class="text"> <h3><a target="_blank" title="" href="#">& ...

cssjquery-selectorscss-selectors

Display <span> next to <select>

Currently, I have a <span> and a <select>. However, in the following code, the <span> is displayed above the <select>. My goal is to arrange it so that the <span> is shown first, followed by the <select>. .requiredSta ...

htmlcss

Retrieve, process HTML table information using Ajax from an external server or website domain

In order to demonstrate: :the html table data source = "example.com/html_page_source" (tableid="source") :an xml file created from the specified table data = "pretendco.com/xml_built_from_html_table I am seeking guidance on how to build an xml file from ...

jqueryhtmlxmlajaxjson

Having trouble with displaying the modal dialog in Twitter Bootstrap 3?

There seems to be an issue with my Twitter Bootstrap modal as it is not rendering the dialog box correctly, and I'm puzzled about the reason behind this. HTML <p class="text-center btn-p"><button class="btn btn-warning" data-toggle="modal" ...

javascriptjqueryhtmltwitter-bootstraptwitter-bootstrap-3

Create a full bottom shadow for a circular shape using CSS 3

Hey there, I'm having an issue with creating a separation effect for a circle. I've been using the box-shadow property like this: box-shadow: 0 1px 0 rgba(0,0,0,.2);. However, as you can see in the image, the shadow on the left and right sides is ...

css