Need to fix textarea to the bottom of a div that is scrollable, but not have the textarea spill out of the div like it does when I try to put position: fixed to fix it to the bottom.
If you have a grid layout where there is a scrolling set of text how do you set the text area at the bottom. I have tried position: fixed; and it stretches the width of the entire screen. I need the textarea to fit directly inside the left div. When I use position: relative in the scrolling text div and use position: absolute; in the textarea it puts the textarea at the bottom of the screen but it doesn't stay there when I scroll.
This is what I currently have:
https://codepen.io/anon/pen/QMMjow
This is what I want, but have it pin to the bottom like above:
https://codepen.io/anon/pen/OjjMVK
You can do it by adding another element parallel with textarea and make textarea to bottom of first div.
.messages{
width: 300px;
height: 300px;
box-sizing: border-box;
border: 2px solid #ccc;
position: relative;
overflow: hidden;
padding-bottom: 50px;
}
.message{
width: 100%;
height: 100%;
overflow: auto;
}
.textarea{
width: 100%;
height: 50px;
position: absolute;
bottom: 0; left: 0;
resize: none;
background: red;
}
<div class="messages">
<div class="message">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div class="textarea"></div>
</div>
You can use the "sticky-footer" method on the textarea to keep it always at the bottom, regardless of the content size. This uses the a negative margin on the content wrapper:
body {
background: #fafafa;
}
.mdl-grid {
padding: 0!important;
margin-bottom: -25px !important;
}
.messages {
position: relative;
}
.mdl-cell {
overflow-x: hidden;
overflow: auto;
min-height:93vh;
background: #bdbdbd;
padding: 0!important;
text-align: center;
color: #424242;
font-weight: bold;
}
textarea {
position: absolute;
bottom: 0;
left: 0;
width: 98%;
height: 25px;
}
<html>
<head>
<!-- Material Design Lite -->
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="mdl-grid">
<div class="messages mdl-cell mdl-cell--4-col">4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<
<textarea></textarea>
</div>
<div class="mdl-cell mdl-cell--8-col">8</div>
</div>
</body>
</html>
Related
If using the relative positioning keeps my content box within the body container, why does the box I am using overlap the body tag's borders?
This is the html:
<body>
<div class="content">
<img src=""/>
</div>
</body>
This is the css for my body tag:
body {
font-family: Calibri;
background-color: #e7e6e8;
width: 100%;
min-height:100%;
min-width: 1200px;
margin: 0;
padding: 0;
border: solid black 5px;
}
This here is the trouble maker:
.content {
position: relative;
width: 1325px;
height: 300px;
overflow: hidden;
top: 45px;
left: 7%;
border: solid black 2px;}
You can use margin-top: 45px; instead of top: 45px;. (Also margin-left: 7%; if you want to stop the overflow there as well.)
If you relatively position an element, it's always doing so after setting the height/width of it's parent. More in this answer.
Sorry for the non-specific title, the problem is kind of hard to explain. Basically, I have a wrapper div that's absolutely positioned with right = 100%, which moves it all the way off the screen to the left. Then I have a div called "answer" inside the wrapper which I want to move back on the screen, so I use left = 100%. There are other divs in the wrapper "1" "2" and "3" which I move back on the screen using script, but that's not important. Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<title>321 2.0</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="wrapper">
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="queue"></div>
<div id="answer">
<input id="field" type="text" name="answer">
<button onclick="answer()">></button>
</div>
<script type="text/javascript" src="script.js"></script>
</div>
</body>
</html>
And here's the CSS:
body {
margin: 0;
}
div {
margin: 0;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
}
#wrapper {
position: absolute;
right: 100%;
padding: 0;
}
#1 {
background-color: #FFCCCC;
}
#2 {
background-color: #DDDDDD;
}
#3 {
background-color: #CCCCFF;
}
#queue {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
padding: 0;
}
#answer {
margin: 0;
padding: 0;
left: 100%;
background-color: #FFCCCC;
}
The result is a blank screen, which I would expect since the wrapper is intended to move everything to the left (except #queue), except I expect that #answer stays on the screen due to left: 100%. My guess is the problem is that #answer is position relative rather than absolute, because the wrapper wouldn't move off screen until I made it absolute positioning. But I would hate for that to be the problem, because I need all the elements inside wrapper to have relative positioning. Soooo what gives?
left only applies on relative/fixed/absolute positioned elements. #answer has no position specified, so it is static.
This is fixed by position: absolute; on #answer:
#answer {
margin: 0;
padding: 0;
position: absolute;
left: 100%;
background-color: #FFCCCC;
}
Tried a few things(margin-auto, text align:center etc) to centre this relative div - which is the header in my responsive layout with no luck. Any other ways to try?
The problem is keeping it centered as the page expands/contracts
Its CSS properties are
#header {
height: 170px;
width: 100%;
overflow: visible;
padding: 10px;
margin-bottom: 7px;
position: relative;
z-index: 99;
}
How can a div appear visually centered when it's 100% width of its parent?
Check out this fiddle: https://jsfiddle.net/w6332ytc/
HTML:
<div class="wrapper">
<div class="inner">
Content
</div>
</div>
CSS:
.wrapper {
width: 100%;
background: #000;
height: 300px;
}
.inner {
width: 50%;
background: red;
margin: 0 auto;
}
I am currently writing on an Angular application that has a top fixed bootstrap navbar and a sidebar container that consists of a sidebar header and a scrollable sidebar list that displays some content.
Therefor I use the following CSS classes:
.main-wrapper {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
padding-top: 50px;
}
.sidebar-container {
height: 100%;
position: fixed;
padding: 0px;
margin-top: -50px;
padding-top: 50px;
border-right: 1px solid #ddd;
}
.sidebar-header {
position: relative;
padding: 15px;
border-bottom: 1px solid #ddd;
}
.sidebar {
height: 100%;
position: relative;
overflow-y: scroll;
}
And the following html code:
<div class="main-wrapper">
<div class="sidebar-container col-xs-3">
<div class="sidebar-header">
...
</div>
<div class="sidebar">
...
</div>
</div>
<div class="main-view col-xs-9 pull-right">
...
</div>
</div>
The following jsfiddle is a minimal working example:
https://jsfiddle.net/j1tuw3vj/8/
My problem is, that the sidebar is moved beyond the bottom of the page so the last element of the list is invisible. I cannot move it up by setting a negative margin and a padding to the sidebar, because I don't know the actual height of the sidebar header (its height can change in different views).
Replace:
/* Scrollable sidebar. */
.sidebar {
height: 100%;
position: relative;
overflow-y: scroll;
}
With:
/* Scrollable sidebar. */
.sidebar {
height: 85%;
position: relative;
overflow-y: scroll;
}
The problem is:
You adjusted the sidebar height to 100% and the position is relative.
See it Live.
UPDATE:
add this line to your css file.
.nav-pills li:last-child{
margin-bottom:80px;
}
See Update Here.
I am trying to create 2 side banners (left and right) with fixed positioning, and a centered container for the content.
The problem is that when minimizing the screen, the 2 side banners cover the centered container. I need a CSS solution to set the minimum width of the view to 860px; after which, the window becomes scrollable and divs do not overlap. The perfect solution is:
The HTML I am using is as such:
<div class="left" style="position:fixed; height:100%; background-color:#7fb4dd; top:43px; left:0px; width:180px;">
</div>
<div class="center" style="margin:100px 180px 0 180px;">
<div style="width:100%;">
<div style="width:500px; margin:0 auto;">
</div>
</div>
</div>
<div class="right" style="position:fixed; height:100%; background-color:#7fb4dd; top:43px; right:0px; width:180px;">
</div>
The above code prevents the left bar from overlapping the center container; but the problem is still present with the right bar.
This is a fiddle of the code: preview
You need to wrap the three DIVs in a wrapping DIV and set the min-width to prevent the overlap. This prevents it from getting narrower than the three columns. Add up the widths, set that as the minimum.
Here is a pure HTML/CSS solution for you , tell me if it is not exactly what you needed.
<html>
<head>
<style type="text/css">
body{
margin:0;
padding:0;
line-height: 1.5em;
}
b{font-size: 110%;}
em{color: red;}
#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}
#topsection h1{
margin: 0;
padding-top: 15px;
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin: 0 200px 0 230px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
background-color : red;
width : 400px;
margin-left : auto;
margin-right : auto;
}
#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}
#rightcolumn{
float: left;
width: 200px; /*Width of right column*/
margin-left: -200px; /*Set left marginto -(RightColumnWidth)*/
background: #FDE95E;
}
#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
height : 700px;
}
.innertubetop{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
</style>
</head>
<body>
<div id="maincontainer" style = "min-width : 800px;"> <!-- this will be sum of width of all three columns-->
<div id="topsection"><div class="innertubetop"><h1>Hello iam navigation bar</h1></div></div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Center Column </b></div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>200px</em></b></div>
</div>
<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>200px</em></b></div>
</div>
</div>
</body>
</html>
The problem you are in is because of position: fixed; since that object is taken out of the workflow the other objects can't push it away. I was able to get a nice and fully responsive layout to work. (Let me know how it is)
Fixed positioned elements are removed from the normal flow. The
document and other elements behave like the fixed positioned element
does not exist.
Fixed positioned elements can overlap other elements.
Updated answer to better suit his needs (JSFIDDLE, remove the show, in the url, to see code)
Okay what I am doing here is using css media queries to change the layout.
Here is the html,
<div class="wrap">
<nav></nav>
<div class="content"></div>
<section class="lSide"></section>
<section class="rSide"></section>
</div>
Now the media query,
#media only screen and (max-width: 680px) {
.content {
width: 90%;
margin-bottom: 10px;
}
.lSide, .rSide {
position: relative;
width: 90%;
height: 100px;
margin: 10px auto;
bottom: 0;
}
}
Don't forget to add this to your head on your html file,
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0;">
OLD answer
The CSS, (JSFIDDLE, remove the show to see code)
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background: tan;
}
.wrap.active {
min-width: 750px;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 20%;
background: brown;
z-index: 101;
}
.lSide {
background: #3b3b3b;
position: fixed;
left: 0;
top: 20%;
width: 200px;
height: 80%;
}
.content {
width: 300px;
height: 600px;
background: #c1c1c1;
margin: 0 auto;
position: relative;
z-index: 100;
top: 20%;
}
.rSide {
background: #3b3b3b;
position: fixed;
right: 0;
top: 20%;
width: 200px;
height: 80%;
}
.rSide.active {
display: none;
}
The JS, (updated)
$(window).resize(function() {
if ($(window).width() < '750') {
$('.wrap, .rSide').addClass('active');
}
else {
$('.wrap, .rSide').removeClass('active');
}
});
One solution I have, refer to fiddle next to css, is to remove the right side when a screen size is to small.