Devon Germano Devon Germano - 2 months ago 9
CSS Question

Position a div on top of a sliding Jquery div

I'm trying to position a child div of #handle, on top of #handle, which is a div that slides up and down. Here's what I'm working with right now:



$(document).ready(function() {
$(".resizable").resizable({
handles: {
'n': '#handle'
}
});
});

body {
height: 1000px;
}

#container {
width: 100%;
background: #555;
height: calc(100% - 30px);
position: fixed !important;
top: auto !important;
bottom: 0 !important;
left: 0;
right: 0;
}

#handle {
width: 100%;
height: 30px;
top: -29px;
background-color: #fff;
box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.24);
}

<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="container" class="resizable">
<div id="handle" class="ui-resizable-handle ui-resizable-n">CONTENT</div>
</div>





I can't figure out how the positioning would work, while still being able to slide the drawer up and down. Is this something I can accomplish with positioning properties or z-index? Thanks.

Answer

For the first question:

For the #container element, modify the height rule to:

height: calc(100% - 30px);

The calc() function is supported in most browers.

Example:

$(document).ready(function() {
  $(".resizable").resizable({
    handles: {
      'n': '#handle'
    }
  });
});
body {
  height: 1000px;
}

#container {
  width: 100%;
  background: #555;
  height: calc(100% - 30px);
  position: fixed !important;
  top: auto !important;
  bottom: 0 !important;
  left: 0;
  right: 0;
}

#handle {
  width: 100%;
  height: 30px;
  top: -29px;
  background-color: #fff;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.24);
}
<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="container" class="resizable">
  <div id="handle" class="ui-resizable-handle ui-resizable-n">CONTENT</div>
</div>

For the second question

The problem is that .ui-resizable-handle has a font-size property that is set to 0.1px. You only need to add a rule:

#handle div {
    font-size: 12px;
}

$(document).ready(function() {
  $(".resizable").resizable({
    handles: {
      'n': '#handle'
    }
  });
});
body {
  height: 1000px;
}

#container {
  width: 100%;
  background: #555;
  height: calc(100% - 30px);
  position: fixed !important;
  top: auto !important;
  bottom: 0 !important;
  left: 0;
  right: 0;
}

#handle {
  width: 100%;
  height: 30px;
  top: -29px;
  background-color: #fff;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.24);
}

#handle div {
    font-size: 12px;
}
<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="container" class="resizable">
  <div id="handle" class="ui-resizable-handle ui-resizable-n">
      <div>content</div>
  </div>
</div>