I have a textarea tag that has text I want a user to edit. The textarea tag is wrapped inside a div like so:
div.container {
width: 295px;
max-height: 250px;
overflow: auto;
position: relative;
border: 1px solid: #EEEEEE;
}
textarea {
width: 270px;
height: 100%;
resize: none;
overflow: hidden;
border: none;
}
<div class="container">
<textarea id="overview">
blah blah....
</textarea>
</div>
The div has a fixed width, a max height and shows scroll bars when the height is too large. All this is fine, but how can I get the textarea to expand to 100%? It's currently only two lines tall and doesn't expand to show all the text when I have a lot of text inside it. Please see this fiddle to see what I'm talking about.
Your div.container needs an explicit height specified. Child contents won't expand up to a max-height, just height.
Something like this:
http://jsfiddle.net/dpF7k/
or more simply applying directly to the textarea instead of a wrapping div: http://jsfiddle.net/ujKCf/
The only thing that is missing is that it does not shrink below 250px if there is less content.
The textarea can only expand as big as div#container
While you set your container to be max-height: 250px, it won't expand to that size unless something pushes it. Since your textarea is 100%, it just uses whatever is available.
To see what I mean, just set container to be height: 250px instead of max-height.
Instead, you could use JavaScript to solve this.
This is a jQuery plugin by James Padolsey. It looks like it'd do exactly what you want.
Edit: I thought OP didn't want a scroll bar given his overflow... NVM then
Related
Let's say I have a <div> with a minimum width and a fixed height. If the contents of the <div> gets long, it begins to expand the width to accommodate. However, it will expand the width even if that fixed height leaves plenty of room for more lines of text without making the <div> wider.
Is there a way to make the contents try to spill into the available height first before expanding the width of the <div>?
<div class="container">
Text
</div>
.container {
display: inline-block;
height: 3.6em;
min-width: 150px;
}
Going off the assumption that you are not using a front end framework ie: Bootstrap.
I offer the following solution by adding the max-width attribute.
.container {
display: inline-block;
height: 3.6em;
max-width: 400px;
min-width: 150px;
}
I've been banging my head against the wall really hard for the past couple of hours to figure out a way to achieve the layout I'd like for a webapp. And my head hurts.
Basically what I need is to have a full window layout (full width, full height, no scrolling - ever). 100% of width and height should be covered using two different horizontal boxes (you can see them as rows).
The height of the first box/row can be variable (see it as a header for the page)
The one below should occupy what's left of the space, without ever going further than 100% of the window, hence without ever showing a scrollbar.
Now what's a bit more tricky is that within the second box/row, I want content to be displayed with an inner vertical scrolling. Imagine the second box/row contains a list of items, in case of very few items, the bottom part of the box/row should stop right after the content. In case of many items, the box/row should expand right until it hits 100% of the window height (which is basically 100% of the windows - the height occupied by the first box/row). The rest of the content should be visible through scrolling within the second box/row.
Am I making any sense?
Regarding the code, I'm not going to copy/paste the desastrous thing I've pulled together because I'd rather start from a blank page.
This is what I tried:
<html>
<body>
<div id="wrapper">
<div class="box">Header</div>
<div class="box">Content <ul><li>...</li>(x1000)</ul></div>
</div>
</body>
</html>
The reason why I use a "box" class is because both boxes/rows should show the same appearence in terms of backgrounds, margins, shadows, etc.
html, body {
height: 100%;
}
#wrapper {
position: absolute;
height: 100%;
width: 100%;
left: 15px;
right: 15px;
top: 15px;
bottom: 15px;
}
For the rest, I've just tried (and failed so far) to manipulate the .box elements by adding hazardously overflow: hidden; overflow-y: scroll; height: 100%; max-height: 100%; min-height: 100%; etc.
Thanks in advance for your help!
The problem is because CSS has long been crappy about auto-adjusting height to available space.
The solution is to use a wrapper that's set to position: absolute and tied to the top, left, right, and bottom edges of the viewport. With this, the browser will auto adjust the height of the element, and if you have a content div inside with height: 100% it'll always fill that space.
Setting overflow-y: scroll on the wrapper will allow the content to scroll if it becomes too long:
http://codepen.io/helion3/pen/jwbcx
Site headers are usually not variable in height. If you're defining the site header using percentages, and if you don't need to support IE<8 then you can use percentages safely with box-sizing: border-box to achieve the same.
I believe this should do the trick.
If you adjust the height of .header make it is equal to the top: position of .content
CSS:
html, body {
margin: 0;
}
.header {
height: 150px;
background: #0080ff; // (Unnecessary, this is set to help you see the header div)
}
.content {
position: absolute;
top: 150px;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
background: #ff8000; // (Unnecessary, this is set to help you see the content div)
}
HTML:
<body>
<div id="wrapper">
<div class="box header">Header</div>
<div class="box content">Content</div>
</div>
</body>
Maybe you want something like this? I replaced class="box" with ids, but it should work.
Consider following things:
No need to have the "absolute" positioned div (#wrapper in your example)
Create 2 box div same like you have created in your example (.box)
Second box should have "overflow:auto" style property
Calculate the height of header and full display area's height with javascript
Calculate the remaining height and assign this value as height, min-height and max-height for the second box. That's it.
You can check the solution here:
http://webnflash.com/temp/occupyAvailableHeight.htm
In the bookmark_matrix in this fiddle
http://jsfiddle.net/sjD24/14/
I'm trying to hide content outside of the 500 px width
by setting
overflow:hidden
I'm not getting the desired effect as it wraps to the next line instead.
MDN Reference
The two examples I've seen show overflow working with vertical content, I'm not sure if this implies it does not work with horizontal content.
Please note that I do not want it to wrap. Perhaps that would have been a better title.
You have no height set, so the div's height expands as needed. There's no overflow.
You could do something like this:
#bookmark_matrix{
border: 1px dotted #222222;
padding: 5px;
width: 500px;
overflow: hidden;
height: 1em;
}
I'm trying to get a simple solution for this layout.
This is the simplified html.
<div class='wrapper'>
<div class='header'></div>
<div class='middle'> TEXT </div>
<div class='footer'></div>
</div>
Header and footer have a fixed height in pixels.
middle can have a variable height, depending on the content.
I want wrapper to have a minimum height of 100%. So if the text inside middle is small, the middle div should expand to fill the browser page. And if it's too long, the whole page should be scrollable.
Is this possible easily? Maybe changing something in the layout?
here's your solution: http://jsfiddle.net/S4akv/1/
You do NOT want to set a hard height for the .middle. If your content is only a few lines then you will end up with scrollbars where none are needed.
With a header and footer, you also don't want height: 100% on your .middle class because it will push your footer down, forcing a scrollbar no matter what. You also don't want a clear-cut height:100% because most browsers will interpret this as 100% of the browser height, so when you resize your browser to be larger, either the height won't change or the footer won't move.
The best solution here is to have your wrapper and any associating backgrounds attached to that. Depending on the content within your .middle div this answer could change, but given the simple parameters this is the most elegant way to do it.
the secret is to make sure that all containing elements have a height set. reason being, any block element with height: 100% will only be 100% of the area containing it. in this case you need to set height for middle, wrapper and body, html
body,html { height: 100%; margin:0; padding:0; }
.wrapper { min-height: 100%; width: 100%; background-color: red; position:relative; padding-bottom: 200px; }
.header { height: 200px; width: 100%; background-color: blue; }
.middle { }
.footer { height: 200px; width: 100%; background-color: green; position:absolute; bottom: 0; }
If you have nested content within .middle that also needs to be 100% height there is a better way, using a combination of height, absolute positioning and negative margins. There are a million ways to skin a cat. Well, a handful at least :)
edited to add padding to .wrapper to make room for footer. The bottom padding of wrapper must be the same height as the footer
I am trying to make a list in HTML with only a vertical scrollbar. I understand how to do this but the part where I get stuck is positioning a div inside the overflow'd element over the edges of the overflow'd element.
See code below:
#wrapper {margin: 50px; width: 500px; height: 500px;}
#scrollable {width: 200px; height: 500px; overflow-y: visible; overflow-x: hidden;}
.item {clear: left; width: 200px; height: 40px;}
<body>
<div id='wrapper'>
<div id='scrollable'>
<div class='item'></div>
<div class='item'></div>
</div>
</div>
</body>
I want the .item elements to go 5 or 10 pixels over the left edge of #scrollable.
Can anyone show me how to do this?
Thanks.
So, as others have said, you cannot show elements out of the bounds of an elements that has an overflow that is not "visible."
However, assuming you're simply trying to achieve an effect, you can do so easily. One way would be, if your #scrollable element must be 200px, then make each .item 190px in width, and offset by 10px to the left. Otherwise, if you're .items must be 200px in width, then make your #scrollable element 210px to compensate. Then, on selection, offset left by 0.
I've made a JSFiddle with it. Take a look (the JS in it is unnecessary, but just mimics a selection)
http://jsfiddle.net/rgthree/tpfLZ/
In #wrapper, add: overflow: visible;
In #scrollable, add: margin-left: -10px; (you may need to set width: 210px to compensate)
Test to make sure this does what you're looking for. (Note that this will make items > 200px get cut off to the right)