CODEWITHSUNDEEP
htmlcss
OFFLlNE
OFFLlNE

Reputation: 797

Add border only when content is overflowing

Wondering if it is possible to add border only when the content is overflowing.

I will try to explain what I mean. Let's say I have a window 200px*200px I have another window with red background inside that 200px*100px Meaning the bottom part of the window is let's say blue background.

I add overflow-y:auto to the red window. Red window has currently text inside that is filling the 200*100 window perfectly. Now I am adding extra lines of text, so that the red window is now scrollable. So what I am trying to do is that when the red window becomes scrollable I want to have a border appear between red and blue window.

.firstBox {
  width: 200px;
  height: 100px;
  background: #FFA07A;
  overflow-y: auto;
  border-bottom: 5px solid red;
  /*  I want the border-bottom ONLY when the text overflows */
}

.secondBox {
  width: 200px;
  height: 100px;
  background: #89CFF0;
}
<div class="bigBox">
  <div class="firstBox">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis placerat dapibus ipsum. Sed egestas tortor in ultrices euismod. Sed laoreet bibendum tincidunt. Donec id hendrerit tellus. Nulla aliquet libero volutpat odio consequat fringilla. Maecenas aliquam,
      enim at elementum maximus, sem metus semper leo, sit amet cursus orci quam euismod justo. Suspendisse mattis magna nisl, nec dictum nisi commodo ut. Maecenas accumsan leo justo, id commodo mi posuere non. In vitae pellentesque mi, quis molestie
      velit.
    </p>
  </div>
  <div class="secondBox">

  </div>
</div>

Also see on JSFiddle: https://jsfiddle.net/zs4f2j9n/

Upvotes: 5

Views: 2367

Answers (2)

Temani Afif
Temani Afif

Reputation: 272744

Here is a trick using sticky position. The idea is to have a pseudo element that will cover all the area minus a small part at the bottom then we use a sticky element that will be hidden behind and will only appear at the bottom and will stick there on the scroll:

.first {
  width: 200px;
  height: 200px;
  background: #FFA07A;
  display: inline-block;
}

.second {
  background: #89CFF0;
  height: 100px;
  overflow: auto;
  position: relative;
  z-index: 0;
}

.second::after {
  content: "";
  display: block;
  position: sticky;
  z-index: -2;
  bottom: 0;
  height: 5px;
  background: #000;
}

.second::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 5px;
  background: inherit;
}
<div class="first">
  <div class="second">
    lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum
  </div>
</div>
<div class="first">
  <div class="second">
    lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum
  </div>
</div>

If you want the border to take all the width and behave like a border-bottom you can add an extra wrapper:

.first {
  width: 200px;
  height: 200px;
  background: #FFA07A;
  display: inline-block;
  vertical-align:top;
}

.second {
  background: #89CFF0;
  height: 100px;
  position: relative;
  z-index: 0;
}
.second p {
  overflow: auto;
  max-height:100%;
  margin:0;
}

.second::after {
  content: "";
  display: block;
  position: sticky;
  z-index: -2;
  bottom: 0;
  height: 5px;
  background: #000;
}

.second::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; /*no need to consider the space in this case*/
  background: inherit;
}
<div class="first">
  <div class="second">
    <p>lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum</p>
  </div>
</div>
<div class="first">
  <div class="second">
   <p> lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum</p>
  </div>
</div>

Upvotes: 6

T. Jefferds
T. Jefferds

Reputation: 61

If you use jQuery and if the box stays the same size, you can see the number of charracters in the text that trigger the overflow with the

var l = $.trim($("p").text()).length;

this will give you a number that represents the number of characters in the text after which the overflow is triggered (lets say 50) and then you can write an "if" that sets a bottom border if the number is greater that 50. This is a stupid way but it works so just sharing my thoughts. Cheers

Upvotes: -2

Related Questions