JonathanHayward JonathanHayward - 9 months ago 32
CSS Question

How can I get two UL's in table-cell-formatted DIV's to be flush against the top?



jQuery(function() {
jQuery(".collection").sortable({});

jQuery('li', jQuery('.collection')).draggable({
'connectToSortable': '.collection',
'cancel': 'a.ui-icon',
'revert': 'invalid',
'containment': 'document',
'cursor': 'move'
});
});

body {
background-color: silver;
font-family: Verdana, Georgia;
}

div.main {
margin-left: auto;
margin-right: auto;
width: 740px;
}

div.table {
display: table;
width: 740px;
}

div.td {
display: table-cell;
margin-top: 0;
width: 50%;
}

div.tr {
display: table-row;
}

ul.collection {
background-color: white;
list-style: none;
padding-left: 0;
min-height: 100px;
padding-left: 0;
width: 200px;
}

ul.collection>li {}

ul#selection {
right: 0;
}

ul#source {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/page.css" />
</head>

<body>
<div class="main">
<div class="table">
<div class="tr">
<div class="td">
<ul id="source" class="collection">
<li class="draggable">Everything</li>
<li class="draggable">Nonfiction</li>
<li class="draggable">Fiction</li>
<li class="draggable">Poetry</li>
</ul>
</div>
<div class="td">
<ul id="selection" class="collection">
</ul>
</div>
</div>
</div>
<script src="/javascripts/jquery.js"></script>
<script src="/javascripts/jquery-ui.js"></script>
<script>
jQuery(function() {
jQuery(".collection").sortable({});

jQuery('li', jQuery('.collection')).draggable({
'connectToSortable': '.collection',
'cancel': 'a.ui-icon',
'revert': 'invalid',
'containment': 'document',
'cursor': 'move'
});
});
</script>
</div>
</body>

</html>





This script is intended to make LI's draggable between two UL's. When this runs, the populated UL in the left table-cell-styled DIV is not flush up against the top of the table-styled DIV; it appears that its top is loosely (or exactly) aligned with the bottom of the empty table-cell to the right. The initial image, with a different background, is as follows:

A staggered view of parts of the table

If both UL's have at least one LI, then they are aligned flush towards the top as desired. If the last LI is dragged over, there can be a flicker effect. The desired flush appearance is:

The desired effect, which appears when both lists have at least one item.

I'd like to set things so that both UL's are at the top of what should be their simulated table-cell's whether they are populated or empty.

Answer Source

Vertically align the table-cells by using vertical-align: top on the div.td element. This will tell the table-cell to stick to the top.

See demo below:

jQuery(function() {
  jQuery(".collection").sortable({});

  jQuery('li', jQuery('.collection')).draggable({
    'connectToSortable': '.collection',
    'cancel': 'a.ui-icon',
    'revert': 'invalid',
    'containment': 'document',
    'cursor': 'move'
  });
});
body {
  background-color: silver;
  font-family: Verdana, Georgia;
}

div.main {
  margin-left: auto;
  margin-right: auto;
  width: 740px;
}

div.table {
  display: table;
  width: 740px;
}

div.td {
  display: table-cell;
  margin-top: 0;
  width: 50%;
  vertical-align: top;
}

div.tr {
  display: table-row;
}

ul.collection {
  background-color: white;
  list-style: none;
  padding-left: 0;
  min-height: 100px;
  padding-left: 0;
  width: 200px;
}

ul.collection>li {}

ul#selection {
  right: 0;
}

ul#source {}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" type="text/css" href="/stylesheets/page.css" />
</head>

<body>
  <div class="main">
    <div class="table">
      <div class="tr">
        <div class="td">
          <ul id="source" class="collection">
            <li class="draggable">Everything</li>
            <li class="draggable">Nonfiction</li>
            <li class="draggable">Fiction</li>
            <li class="draggable">Poetry</li>
          </ul>
        </div>
        <div class="td">
          <ul id="selection" class="collection">
          </ul>
        </div>
      </div>
    </div>
    <script src="/javascripts/jquery.js"></script>
    <script src="/javascripts/jquery-ui.js"></script>
    <script>
      jQuery(function() {
        jQuery(".collection").sortable({});

        jQuery('li', jQuery('.collection')).draggable({
          'connectToSortable': '.collection',
          'cancel': 'a.ui-icon',
          'revert': 'invalid',
          'containment': 'document',
          'cursor': 'move'
        });
      });
    </script>
  </div>
</body>

</html>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download