Jump to content

Make a <textarea> width line numbering


Recommended Posts

Hey

 

I would like to make a textarea with some sort of line numbering, but I can't figure out how to do it...

 

<textarea></textarea>

 

My idea so far is to create a div besides the textarea and let the div contain the line numbers:

 

css:

html {
height: 100%;
margin: 0;
padding: 0;
}

body {
background-color: #F5F5F5;
height: 100%;
margin: 0;
padding: 0;
}

#input-box {
height: 300px;
margin: 0 0 0 25px;
padding: 5px;
}

#line-number-box {
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 300px;
overflow: hidden;
text-align: right;
}


textarea {
width: 100%;
height: 100%;
border: 1px solid #d4d0c8;
}

 

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="../style/input.css" />
</head>

<body>

<div id="line-number-box">1<br />2<br />3<br />
</div>
  
<div id="input-box">
  <textarea></textarea>
</div>
  
</body>
</html>

 

The result can be seen here: http://wuhtzu.dk/random/lntextarea/input.php

 

This sort of works fine when it is fine tuned with lineheight, linespacing and font-size, but if the textarea gets "overflowed" so it shows a scrollbar it suddenly breakes everything. Try typing one char and hit enter a few times so the scrollbar appears...

 

Another idea would be to create an image witch were something like 20px x 800px and contained a long list of numbers and then use it as a background image for the textarea, but only IE6 view this correctly - which in this case is to let the background scroll with the content in the textarea...

 

 

So... can you guys think of another way to create a textarea with line numbering which follows the textarea even if it starts to scroll?

 

 

Best regards

Wuhtzu

 

 

 

Link to comment
https://forums.phpfreaks.com/topic/43548-make-a-width-line-numbering/
Share on other sites

Guest
This topic is now closed to further replies.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.