I am currently building a chat window and now I am focusing on the styling part. I have set its attributes to fit any window size. But I am having some issue with the div id="bottomPanel". Inside that div I have a textarea that is overlapping and not fitting in properly. I tried changing the position to relative but it is not resolving the issue: How can I the bottomPanel div to fit properly and get the button to be to the right side? JSFIDDLE
Something like this :
html, body {
width: 100%;
height: 100%;
}
body {
position: relative;
}
#wrapper {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: 1px solid #333;
}
#upperPanel {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 100px;
}
#chat {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 200px;
background: #666;
overflow: auto;
}
#friends {
position: absolute;
top: 0;
bottom: 0;
width: 200px;
right: 0;
background: #999;
overflow: auto;
}
#friends ul {
text-align: right;
}
#bottomPanel {
height: 100px;
background: #EEE;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
}
#bottomPanel textarea {
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 120px;
resize: none;
}
#bottomPanel input[type=submit] {
position: absolute;
top: 10px;
bottom: 10px;
right: 10px;
width: 100px;
}
textarea {
width: 100%;
height: 100%;
position: relative;
}
Here is the Updated Fiddle
The textarea does not seem to work with absolute position + right + bottom sizing technique. The solution is to use a 100% wide and tall textarea wrapped inside desired size div.
In my example, I recycled #bottomPanel instead of adding a new div. I adjusted padding so that its inner dimensions matches the desired size of textarea. The important rules are:
#bottomPanel {
background: #EEE;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
/* CHANGED */
height: 80px;
padding: 10px 120px 10px 10px;
}
#bottomPanel textarea {
resize: none;
/* CHANGED */
box-sizing: border-box;
margin: 0;
width: 100%;
height: 100%;
}
#bottomPanel input[type=submit] {
position: absolute;
top: 10px;
bottom: 10px;
right: 10px;
width: 100px;
}
Put 2 inline divs in the bottom panel. Left and Right the Left is for the textarea, the right is for the button.
Change the #bottomPanel textarea to relative and remove the absolute positions.
Edit:
Another option could be to just put the textarea in the same div as the chat area, and the button in the same div as the user list.
I think what you want to achieve is this Demo.you just did a mistake in arranging textarea
Related
I am not getting the scroll on the browser. i have tried with overflow: scroll and also with no over flow.
body {
margin: 0;
overflow: scroll;
}
.left {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 320px;
background-color: #1f1f1f;
color: white;
text-align: center;
}
.slide {
position: fixed;
top: 0;
right: 0;
height:450px;
width: 1041px;
background-color: orange;
text-align: center;
}
.meanu {
position: fixed;
top: 50%;
bottom: 50%;
width: 80%;
left: 20%;
right: 0;
}
That is because everything is position:fixed and these elements do not affect the flow.
As far as scrolling is concerned, the fixed positioned elements do not exist.
i'm trying to have ornamented border all along the right and left side of the document, but for some reason I have not managed to get the elements with those border ornaments reach 100% height.
What i have right now is:
html {
height: 100%;
}
body {
min-height: 100%;
background-image: url("../img/bgtile.png");
background-repeat: repeat;
background-color: transparent;
font-size: 18px;
}
body:before {
content: "";
background: transparent url("../img/frame-ornament-left.png") repeat-y 11px 0px;
height: 100%;
width: 30px;
display: block;
left: 0;
position: absolute;
top: 0;
z-index: 0;
}
body:after {
content: "";
background: transparent url("../img/frame-ornament-right.png") repeat-y;
height: 100%;
width: 30px;
display: block;
right: 0;
position: absolute;
top: 0;
z-index: 0;
}
And no matther what i try, those before and after elements always stay as high as viewport is. I've tried setting min-height to 100% on HTML element too, that indeed made html element as long as body, but those elements with ornaments in them still remain as high as viewport...
Set the body to position: relative, so it will be the context for the pseudo elements, instead of the html, and set bottom: 0 to both pseudo elements:
body {
position: relative;
background-image: url('../img/bgtile.png');
background-repeat: repeat;
background-color: transparent;
}
.content-demo {
height: 800px;
}
body:before {
content: "";
background: red;
width: 30px;
display: block;
left: 0;
position: absolute;
top: 0;
bottom: 0;
z-index: 0;
}
body:after {
content: "";
background: blue;
width: 30px;
display: block;
right: 0;
position: absolute;
top: 0;
bottom: 0;
z-index: 0;
}
<div class="content-demo"></div>
I have a div filling all the width and an amount of the height, and then I have an smaller circle which needs to be half on the bottom/center of this div, half right after it.
All works until I got more height or try to zoom it, then the circle will just move vertically and no longer being 50/50. Also, zooming the page will make the circle expand from its top, not its middle.
jsFiddle
<div id="rectangle">
<img id="circle" src="http://alloutput.com/wp-content/uploads/2013/11/black-circle-mask-to-fill-compass-outline.png">
</div>
Css:
body {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#rectangle {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 92%;
background: #E5E5E5;
}
#circle {
position: absolute;
top: 86%;
left: 0;
right: 0;
width: 100px;
margin-right: auto;
margin-left: auto;
}
Since circle is inside the rectangle, than its position is relative to rectangle. That means you need to set the circle bottom property to half of circle radius:
body {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#rectangle {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 92%;
background: #E5E5E5;
}
#circle {
position: absolute;
bottom: -50px;
left: 0;
right: 0;
width: 100px;
height: 100px;
margin-right: auto;
margin-left: auto;
background: none #000;
border-radius: 50%;
}
<div id="rectangle">
<div id="circle"></div>
</div>
I used html element to create a circle instead of the image you provided (you may delete it).
I am not sure if this is possible, without some JavaScript at lest. What i am trying to do is keep the content in the sidebar within the viewport for horizontal scroll but not vertical scroll (this issue occurs on low resolutions). I have put together a quick js fiddle to demonstrate the issue http://jsfiddle.net/evkhvvdr/ any input is greatly appreciated.
Here is the CSS or view the js fiddle
body {
position: relative;
margin: 0;
}
.sidebar {
position: absolute;
top: 0;
bottom: 0;
width: 100px;
background: blue;
left: 0;
}
.sidebar-inner {
position: fixed;
left: 0;
}
.content {
width: 1400px;
background: pink;
height: 2000px;
}
You can fix sidebar on screen, but put it under content with z-index, so when you scroll, you scroll only content, sidebar is still on screen, but under the content.
body {
margin: 0;
}
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 100px;
background: blue;
z-index: 0;
}
.sidebar-inner {
width: 100px;
position: relative;
left: 0;
}
.content {
position: absolute;
width: 1400px;
background: pink;
height: 2000px;
margin-left: 100px;
}
here is my issue:
<div class="wrap">
<div class="inner"></div>
</div>
.wrap {
position: relative;
width: 200px;
height: 66px;
background: black;
overflow: hidden;
border-radius: 100px;
}
.inner {
position: absolute;
top: 0;
left: 50%;
right: 0;
bottom: 0;
background: white;
}
http://jsfiddle.net/cjW7Q/1/
Notice thin black line on the right side.
Any ideas how to get rid of it?
UPDATE
There is a lot of workarounds, but problem is that overflow:hidden doesn't work correctly. Imagine that instead of .inner I have an image, that I want to move around with transition using transform (for hardware acceleration). I'll try to update demo later.
<edit>multiple bg mixing image and gradient can be used with animation too without extra markup DEMO </edit>
This is a commun defaut , you see it in FF too.
I would say , paint it the other way round :
.wrap doesn't even need a bckground color.
http://jsfiddle.net/cjW7Q/2/
.wrap {
position: relative;
width: 200px;
height: 66px;
overflow: hidden;
border-radius: 100px;
}
.inner {
position: absolute;
top: 0;
width: 50%;
left:0;
bottom: 0;
background: black;
}
Else you can use a gradient and no inner element:
.wrap {
position: relative;
width: 200px;
height: 66px;
overflow: hidden;
border-radius: 100px;
background:linear-gradient(to left,white 50%,black 50%);
}
DEMO
Here's a Work Around
.inner {
position: absolute;
top: 0;
left: 0;
right: 50%;
bottom: 0;
background: black;
}
Apply the same background of it's parent for the parent element (here there's no need of background at all)
Add "border-right-width: 0px;" to .wrap.
Try this CSS,
.wrap {
position: relative;
width: 200px;
height: 66px;
background: black;
overflow: hidden;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
}
.inner {
position: absolute;
top: 0;
right: 0;
left: 50%;
bottom: 0;
background: white;
}
DEMO
border:0px
paddind : 10 px
background:#FFF