CODEWITHSUNDEEP
css
Dillon Davis
Dillon Davis

Reputation: 7740

How to make an element with a fixed width but relative height in scroll box

I have a <pre> with a <code> block inside, of which can expand to some max-height after which a scollbar appears. I wish to add a :before to this, which will have the same length as the content inside the <code> block, but is only ever some fixed number of pixels wide. For context, I'm adding line numbers before lines in a <code> block in a subreddit I moderate (so I can only use CSS), abusing the content: property and a list of numbers. Here is a stripped down version of what I am using:

pre {
    max-height: 50px;
	border:1px solid #000000;
	z-index:1;
	position:relative;
    overflow: auto;
}
pre code{
	padding:0px 11px 0px 11px!important;
	margin-left:30px;
	display:block;
}

pre code:before{
	height: 100%;
	color:#FFF;
	position: absolute;
	left:-5px;
	width:30px;
	white-space:pre-wrap;
	direction:rtl;
	overflow:hidden;
	z-index:2;
	background:#369;
	left:0px;
	padding-right:5px;
	content:"1   2   3   4   5   6   7   8   9   10"
}
<pre>
<code>Line one
Line two
Line three
Line four
Line five
Line six
Line seven
</code>
</pre>

This works pretty well, except for the fact that the :before which appears to the left of the code block don't extend all the way down when the length of the <code> content exceeds the max-height, causing it to create a scrollbar. It is only visible as far down as the visible size of the scroll box- not the <code> content itself (scroll down inside the box). I could replace height: 100% with height: auto, but then the numbers extend well beyond the length of the <code> block.

How can I make the :before element I am creating to span the entire height of the <code> block inside of the scrollbox, with a fixed width (30px), using only CSS? I also can't "hard code" anything to be the same value as the max-height, because it temporarily increases while the user is hovering over the code.

Upvotes: 0

Views: 452

Answers (1)

Gautam Naik
Gautam Naik

Reputation: 9348

Add position relative to code instead of pre

The before of the code was position absolute, and you had assigned position relative to pre, whose height was 50px, that is the height of before was only 50px.

Hence by making code relative, the height of before became equal to the code 

pre code {
  padding: 0px 11px 0px 40px!important;
  /*margin-left: 30px;*/
  display: block;
  position:relative;
}


pre {
  max-height: 50px;
  border: 1px solid #000000;
  z-index: 1;
  /*position: relative;*/
  overflow: auto;
}

pre code {
  padding: 0px 11px 0px 40px!important;
  /*margin-left: 30px;*/
  display: block;
  position: relative;
}

pre code:before {
  height: 100%;
  color: #FFF;
  position: absolute;
  left: -5px;
  width: 30px;
  white-space: pre-wrap;
  direction: rtl;
  overflow: hidden;
  z-index: 2;
  background: #369;
  left: 0px;
  padding-right: 5px;
  content: "1   2   3   4   5   6   7   8   9   10"
}
<pre>
<code>Line one
Line two
Line three
Line four
Line five
Line six
Line seven
</code>
</pre>

Upvotes: 1

Related Questions