0

Situation:

  1. There is a textarea that is taller than the browser window (and full of text).
  2. There is a position:fixed; bar at the top.
  3. When the text in the textarea is edited and scrolled down and the user scrolls back to the top of the textarea with the cursor keys, the top of the text area stays hidden behind the "bar at the top".

Question: How can the layout be changed (HTML, CSS) so that the first lines of the textarea become visible through keystrokes inside the text area?

I have tried:

  • adding margin or padding to textarea
  • adding margin or padding to div containing textarea
  • adding padding to body element

To be clear: some of these measures help that the whole text area becomes visible when the mouse is used to scroll to the top. The textarea should be accessible fully through the cursor keys on the keyboard.

Demo: jsfiddle

Swiss Mister
  • 3,260
  • 2
  • 20
  • 42
  • I don't believe that is possible, since the "menu" is "fixed", but try changing the z-index on the textarea. – Kup Jul 29 '15 at 13:09
  • Thanks @Kup. I don't take "it's impossible" for an answer! ;-) z-index won't do any good. The fixed div is a top bar and needs to be there and on the top and visible at all times. – Swiss Mister Jul 29 '15 at 13:12
  • I understand, I also don't like the "impossible answer" :) but in this case I'm afraid you don't have much choice. But if you can find a workaround this, I would also like to know it ;) – Kup Jul 29 '15 at 13:16
  • I'm curious to know why you would need a ` – hungerstar Jul 29 '15 at 13:26
  • what else than a textarea, @hungerstar? `contenteditable` is not an option due to cross-browser/backward compatibility. What else could I use? – Swiss Mister Jul 29 '15 at 13:28
  • @SwissMister I didn't say, _"Don't use a ` – hungerstar Jul 29 '15 at 13:38
  • @hungerstar example: https://shrib.com. The point is to have a browser that is exactly like the notepad.exe text editor in microsoft windows. – Swiss Mister Jul 29 '15 at 13:39
  • Ah, shrib.com is a bit different from your jsFiddle example. They are adding a scroll bar and are managing the height of the ` – hungerstar Jul 29 '15 at 13:58
  • Very attentive! In fact, I am using http://alistapart.com/article/expanding-text-areas-made-elegant to make the textarea grow in size, but with the same end result as they have on shrib.com. So, for the situation in question, it is adequate to set a tall height on the textarea. – Swiss Mister Jul 29 '15 at 14:01

2 Answers2

2

You could probably do something like this: https://jsfiddle.net/dxg4anaf/4/

.text {
    border-top: 18px solid transparent;
    height: 100%;
    overflow-y: auto;
    padding: 10px;
    box-sizing: border-box;
}

Making scrollable just the div with textarea, not the container of both that div and the top div. The padding between textarea and its top would still not be visible when you scroll with keyboard, but at least all of the textarea will.

Can't think of a better way.

waterplea
  • 3,462
  • 5
  • 31
  • 47
0

add default rows and cols size

<textarea rows="20" cols="50"> first line .. .. </textarea>

and remove height:10000px; in css of textarea

textarea {
   margin-top:30px;
   height:10000px;
}

css should be like 

textarea { margin-top:30px;}
Girdhar Singh Rathore
  • 5,030
  • 7
  • 49
  • 67
  • Thank you - but this does not solve the issue at all. I would not recommend to step from CSS back to the dark old days of HTML rows and cols... http://stackoverflow.com/a/21280976/1598477 – Swiss Mister Jul 29 '15 at 13:54