CODEWITHSUNDEEP
htmlcss
koobecaf
koobecaf

Reputation: 13

Padding not applied correctly to div element

Inside an overlay I added a scroll-view. Everything is working fine until I try to add a padding to the scroll-view. The top and left padding are correctly applied but the text inside the scroll view exceeds on the right and in the bottom. This is my code

document.addEventListener("keydown", keyDownTextField, false);
this.title_element = jQuery('.scrollviewwrapper', this.$el);

this.title_element.html('<ul>\r<li>Fermentum congue dictumst integer sapien conubia, per volutpat a duis donec, habitasse quisque tristique hac</li>\r<li>Imperdiet aliquam praesent id viverra aliquam inceptos</li>\r<li>Cubilia litora placerat fusce vulputate habitant varius cursus molestie lorem magna mi non</li>\r<li>Imperdiet sociosqu aenean ornare sagittis faucibus in facilisis vitae, lobortis curae hac justo tellus tincidunt</li>\r<li>Urna eu consequat non consectetur duis ut justo eleifend sapien</li>\r</ul> <ul>\r<li>Fermentum congue dictumst integer sapien conubia, per volutpat a duis donec, habitasse quisque tristique hac</li>\r<li>Imperdiet aliquam praesent id viverra aliquam inceptos</li>\r<li>Cubilia litora placerat fusce vulputate habitant varius cursus molestie lorem magna mi non</li>\r<li>Imperdiet sociosqu aenean ornare sagittis faucibus in facilisis vitae, lobortis curae hac justo tellus tincidunt</li>\r<li>Urna eu consequat non consectetur duis ut justo eleifend sapien</li>\r</ul> ');

function keyDownTextField(e) {
  alert(document.getElementById('scrollviewwrapper').scrollTop);
  var keyCode = e.keyCode;

  if (keyCode == 38) {
    // up arrow

  } else if (keyCode == 40) {
    // down arrow
  }
}
.overlay {
  position: absolute;
  background: red;
  height: 200px;
  width: 500px;
  top: 50px;
  left: 20px;
  bottom: 50px;
  z-index: 100;
}

.scrollviewwrapper {
  position: relative;
  height: 200px;
  width: 500px;
  padding-top: 30px;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
  overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<html>

<body>
  <div class="overlay">
    <div class="scrollviewwrapper" id="scrollviewwrapper">
      test
    </div>
  </div>
</body>

</html>

Upvotes: 1

Views: 51

Answers (3)

Pete
Pete

Reputation: 58462

Swap your absolute positioning around so your scroll view wrapper is inside the background:

document.addEventListener("keydown", keyDownTextField, false);
this.title_element = jQuery('.scrollviewwrapper', this.$el);

this.title_element.html('<ul>\r<li>Fermentum congue dictumst integer sapien conubia, per volutpat a duis donec, habitasse quisque tristique hac</li>\r<li>Imperdiet aliquam praesent id viverra aliquam inceptos</li>\r<li>Cubilia litora placerat fusce vulputate habitant varius cursus molestie lorem magna mi non</li>\r<li>Imperdiet sociosqu aenean ornare sagittis faucibus in facilisis vitae, lobortis curae hac justo tellus tincidunt</li>\r<li>Urna eu consequat non consectetur duis ut justo eleifend sapien</li>\r</ul> <ul>\r<li>Fermentum congue dictumst integer sapien conubia, per volutpat a duis donec, habitasse quisque tristique hac</li>\r<li>Imperdiet aliquam praesent id viverra aliquam inceptos</li>\r<li>Cubilia litora placerat fusce vulputate habitant varius cursus molestie lorem magna mi non</li>\r<li>Imperdiet sociosqu aenean ornare sagittis faucibus in facilisis vitae, lobortis curae hac justo tellus tincidunt</li>\r<li>Urna eu consequat non consectetur duis ut justo eleifend sapien</li>\r</ul> ');

function keyDownTextField(e) {
  alert(document.getElementById('scrollviewwrapper').scrollTop);
  var keyCode = e.keyCode;

  if (keyCode == 38) {
    // up arrow

  } else if (keyCode == 40) {
    // down arrow
  }
}
.overlay {
  position: relative;
  background: red;
  height: 200px;
  width: 500px;
  top: 50px;
  left: 20px;
  bottom: 50px;
  z-index: 100;
}

.scrollviewwrapper {
  position: absolute;
  top: 0;              /* use all 4 co-ordinates instead of width and height so it fills the container */
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px; /* this is shorthand and will apply padding to all 4 sides */
  overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<html>

<body>
  <div class="overlay">
    <div class="scrollviewwrapper" id="scrollviewwrapper">
      test
    </div>
  </div>
</body>

</html>

Upvotes: 0

Serge In&#225;cio
Serge In&#225;cio

Reputation: 1382

you need to add the background: red; to your .scrollviewwrapper class:

document.addEventListener("keydown", keyDownTextField, false);
this.title_element = jQuery('.scrollviewwrapper', this.$el);

this.title_element.html('<ul>\r<li>Fermentum congue dictumst integer sapien conubia, per volutpat a duis donec, habitasse quisque tristique hac</li>\r<li>Imperdiet aliquam praesent id viverra aliquam inceptos</li>\r<li>Cubilia litora placerat fusce vulputate habitant varius cursus molestie lorem magna mi non</li>\r<li>Imperdiet sociosqu aenean ornare sagittis faucibus in facilisis vitae, lobortis curae hac justo tellus tincidunt</li>\r<li>Urna eu consequat non consectetur duis ut justo eleifend sapien</li>\r</ul> <ul>\r<li>Fermentum congue dictumst integer sapien conubia, per volutpat a duis donec, habitasse quisque tristique hac</li>\r<li>Imperdiet aliquam praesent id viverra aliquam inceptos</li>\r<li>Cubilia litora placerat fusce vulputate habitant varius cursus molestie lorem magna mi non</li>\r<li>Imperdiet sociosqu aenean ornare sagittis faucibus in facilisis vitae, lobortis curae hac justo tellus tincidunt</li>\r<li>Urna eu consequat non consectetur duis ut justo eleifend sapien</li>\r</ul> ');

function keyDownTextField(e) {
alert(document.getElementById('scrollviewwrapper').scrollTop);
var keyCode = e.keyCode;

  if(keyCode==38) {
  // up arrow

  } else if(keyCode==40) {
	// down arrow
  }
}
.overlay{
  position: absolute;
  height: 200px;
  width: 500px;
  top: 50px;
  left: 20px;
  bottom : 50px;
  z-index: 100;
}

.scrollviewwrapper{
  position: relative;
  background: red;
  height: 200px;
  width: 500px;
  padding-top: 30px;
  padding-left: 30px;
   padding-right: 30px;
  padding-bottom: 30px;
  overflow:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<html>
<body>
<div class="overlay">
<div class="scrollviewwrapper" id="scrollviewwrapper">
test
</div>
</div>
</body>
</html>

Hope this helps.

Upvotes: 0

aMJay
aMJay

Reputation: 2243

Add box-sizing:border-box; rule to your .scrollviewwrapper class:

document.addEventListener("keydown", keyDownTextField, false);
this.title_element = jQuery('.scrollviewwrapper', this.$el);

this.title_element.html('<ul>\r<li>Fermentum congue dictumst integer sapien conubia, per volutpat a duis donec, habitasse quisque tristique hac</li>\r<li>Imperdiet aliquam praesent id viverra aliquam inceptos</li>\r<li>Cubilia litora placerat fusce vulputate habitant varius cursus molestie lorem magna mi non</li>\r<li>Imperdiet sociosqu aenean ornare sagittis faucibus in facilisis vitae, lobortis curae hac justo tellus tincidunt</li>\r<li>Urna eu consequat non consectetur duis ut justo eleifend sapien</li>\r</ul> <ul>\r<li>Fermentum congue dictumst integer sapien conubia, per volutpat a duis donec, habitasse quisque tristique hac</li>\r<li>Imperdiet aliquam praesent id viverra aliquam inceptos</li>\r<li>Cubilia litora placerat fusce vulputate habitant varius cursus molestie lorem magna mi non</li>\r<li>Imperdiet sociosqu aenean ornare sagittis faucibus in facilisis vitae, lobortis curae hac justo tellus tincidunt</li>\r<li>Urna eu consequat non consectetur duis ut justo eleifend sapien</li>\r</ul> ');

function keyDownTextField(e) {
alert(document.getElementById('scrollviewwrapper').scrollTop);
var keyCode = e.keyCode;

  if(keyCode==38) {
  // up arrow

  } else if(keyCode==40) {
	// down arrow
  }
}
.overlay{
  position: absolute;
  background: red;
  height: 200px;
  width: 500px;
  top: 50px;
  left: 20px;
  bottom : 50px;
  z-index: 100;
}

.scrollviewwrapper{
  position: relative;
  height: 200px;
  width: 500px;
  padding-top: 30px;
  padding-left: 30px;
   padding-right: 30px;
  padding-bottom: 30px;
  overflow:auto;
  box-sizing:border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<html>
<body>
<div class="overlay">
<div class="scrollviewwrapper" id="scrollviewwrapper">
test
</div>
</div>
</body>
</html>

Upvotes: 1

Related Questions