I'm designing a chat UI for WebView and Mobile only and I was wondering on how do you keep the edit box always on the bottom like WhatsApp or Telegram. The content in the chat box is scrollable depending on the amount of messages like mobile apps and the chat box is fixed. I tried applying fixed height but it will be messed up for different devices.
How do I make the edit box always on the bottom no matter the device height? (Just like WhatsApp or Telegram)
So far only when defining the height will allow the content to be scrollable, percentages don't work.
height:640px;
Here is the fiddle:
https://jsfiddle.net/rrL0nkq7/
To fix your editbox in the bottom you need to give it a position:fixed; and bottom:0;
And if the height is known lets say height:50px;then you must add padding-bottom to chatcontainer padding-bottom:50px;because if you don't you will not see the last content of your chatbox
Make textarea for chat box and give it this css
textarea{
position:fixed;
bottom:0;
left:0;
width:100%;
height:60px;
}
.chatcontainer{
height: 100px;
position:fixed;
bottom:0;width:200px;right:0; /*edit your wish*/
font-size: 0.6em;
overflow-y: scroll;
}
This will give the container a fixed height and overflow-y scroll which will make your chat scrollable. Is this what you are looking for?
Related
I have a cart div for my webshop that sticks to the screen when you scroll down. I'm using the solution from this page - the answer that has the most vote up's, not the accepted answer:
How can I make a div stick to the top of the screen once it's been scrolled to?
When the visitor adds many items, the cart gets taller than the browser window, and some items disappear below the browser. I want to add a scroll bar to the div using overflow-y: scroll, but the problem is that, even if the div is taller than the screen, the browser still thinks the user can see the whole div, so the scroll bar doesn't get enabled.
Can I somehow make the div understand that it shouldn't grow beyond the screen, and activate the scroll bar instead?
Thanks!
You could possibly use max-height in conjuction with media queries based on screen height?
As per my understanding max-height will work for this kind of module.
check http://jsfiddle.net/kundansankhe/mch22264/1/
html, body {
height:100%;
}
.test {
position:fixed;
top:0;
overflow-y:auto;
border:1px solid red;
width:150px;
max-height:100%;
}
to occupi scroll-bar space, you can use overflow-y:scroll, so it will occupied scroll-bar space and will enable when content goes larger than screen height.
check updated link http://jsfiddle.net/kundansankhe/mch22264/1/
I am currently building a website that uses two columns, inside a position fixed box to make the heights stay at 100%.
I need the content div to scroll down if the content is longer than the page (on 11/13" screens, page is responsive) - but by setting overflow scroll on the content, the background does not drop, and there is still content at the bottom of the page.
There are two links here, one is the page as it is, and the other is the page with extra content (to make it longer than your viewport)
Link 1 link 2
If you can help my solve this, i'll be thankful :)
Add Overflow:auto; It works fine. I checked it with that page.
The problem is the .bf_page is set to height: 100% - this is getting the full height of the body, however the div doesn't start at the top of the page so it continues under the bottom of the body tag for 100 or so pixels, meaning the last bit of content is getting chopped off (hope that makes sense?!).
The height of the logo (which is causing the page to extend) is 121px so you could do the following:
Change .bf_page's height to:
.bf_page {
height: calc(100% - 121px);
}
Set .bf_content_text to overflow: auto
I've tested that and it seems to work.
Taking out the "position: fixed;" on the '.bf_menu' class works for me, if you're having trouble getting the menu to stick to the top of the page, just hide the blockquote div with display:none.
Example:
<div id="wrapper">
<div id="content">
<div id="data">
</div>
</div>
</div>
#wrapper {
height:100vh;
width:100vw;
background-color:black;
position:absolute;
}
#content {
background-color:red;
height:80%;
width:80%;
position:relative;
overflow-y:auto;
}
#data {
background-color:yellow;
width:80%;
height:1000px;
}
http://jsfiddle.net/nGU8R/1/
I have an article styled like with this class:
.stretchedToMargin {
display: block;
position:absolute;
height:100%;
bottom:0;
top:0;
left:0;
right:0;
}
This is fine: the article takes always at least the whole vertical space. For articles longer than the screen, a scrollbar is shown.
But, for articles extending further than the screen, when I need to scroll to view the content, the background is not set. The article is split between a part with the right background and a part with the wrong background.
How can I force my article to be actually as high as the content, but at least as high as the viewport?
EDIT
Adding an example: http://jsbin.com/UvasEBik/1/
An the corresponding screenshot:
You could use min-height: 100vh which is 100% of the viewport height. So the article would be at least 100% of the viewport height.
So I know this is another centering question but I've been roaming around Google and SO for a couple days now without a solution so I'll ask now.
What I'm trying to do is horizontally center a fluid section element with a max width that has absolutely positioned elements inside it. The problem is, as you can see in my jsFiddle, the margins take up 50% of the available space with the other 50% used by the section. What I would like to do is keep the section perfectly centered but make the margins get smaller as the browser window closes in while keeping the section from re-sizing until the edges of the window gets to it.
I'd like to keep from using any table, table-cell solution because I read on CSS-Tricks that absolutely positioning elements inside table cells can be a real pain.
Edit Basically, the goal is to have the content take up as much space as possible without resizing until the view port width forces the content to be responsive.
Thank you for any bump in the right direction.
HTML:
<section id="wrapper">
<section id="content">
<p>Absolutely positioned imgs, btns, etc. go in here</p>
</section>
</section>
CSS:
#wrapper {
position:absolute;
width:50%;
height:300px;
margin-left:25%;
margin-right:25%;
outline:1px solid red;
}
#content {
position:absolute;
width:100%;
height:100%;
max-width:500px;
background:rgb(225, 112, 75);
}
You can use
#content {
display:inline-block;
text-align:center;
}
to center your elements that will have a display:inline-block; property too.
EDIT: Now that I've better read your question, you can also use
#content {
margin:0 25%;
}
to center your second section.
here's your fiddle updated. As you can see by this fiddle everything is centered AND responsive now.
EDIT-2: Maybe you want to add some media query to reach your goal. Just add something like this at the end of your CSS file:
#media screen and (max-width:720px){
#content{width:100%; margin:0px;}
}
this says that when screen reaches the width of 720 and under, #content (and every ID/CLASS you put in there) will behave as declared.
NOTE that #media queries are not crossbrowser, you may want to add a script to make them work on every browser, I find respond.js a nice tool to do this job.
Also note that the #media queries must be placed at least under the default properties that you are about to change on screen resizing, that is why is suggested to add them at the bottom of your css file.
HERE is another fiddle with media applied (just try to resize the box to see the effect)
I wonder if this is what you were looking for: jsfiddle
I changed your wrapper to this:
#wrapper {
position: fixed;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -200px;
width:400px;
height:300px;
outline:1px solid red;
}
So that your div now sits in the middle of the screen
I want to create a layout where I want to display an image to the left and content on the right. The image should stay constant when the content scrolls.
The css I'm using:
<style type="text/css">
#page-container
{
margin:auto;
width:900px;
background-color:Black;
}
#header
{
height:150px;
width:650px;
}
#main-image
{
float:left;
width:250px;
height:500px;
background-image:url('../images/main-image.png');
position:fixed;
}
#content
{
margin-left:250px;
padding:10px;
height:250px;
width:630px;
background-color:Teal;
}
</style>
The HTML:
<div id="page-container">
<div id="header"><img src="someimagelink" alt="" /></div>
<div id="main-image"></div>
<div id="content"></div>
</div>
Alot of time on this site and I have understood that background-attachment:fixed positions the image in the entire viewport and not the element it is applied to.
My question is how do I go about creating that kind of layout?
I do not want to give that image as a background image, as if the window is resized, it might get hidden. I want scrollbars to appear if the window size is less than 900px( my page width) so that the image can be viewed at all times.
That happens with this code, however I would like the image to start at my element instead.
How do I go about doing this??
Thanks in Advance :)
Edited:
I took the advice and added a position:fixed property to #main-image. Using the HTML and CSS as shown above.
Now, I also want to fix the header so that it does not move. Basically, only my content section should scroll.
However, if I add a position:fixed to the header, my #main-image and #content now sit on top of my header.
If I add a margin-top:150px (since my header height is 150px) to the #main-image, it works fine and moves down appropriately.
However if I add a margin-top:150px to the #content, my header moves down by 150px and still sits on top of my #content.
Can someone please explain why this is happening?
Thanks in Advance :)
Take a look at this link:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
You can learn how to position Div's with it.
This will solve your problem:
#main-image {position:fixed;}
EDIT:
I'm not sure of what caused your problem but here is the solution:
#content{
position:relative;
top:150px;
}
My Guess:
I think that happened because when using position:fixed those 2 div's were positioned relative to the the browser window, while the other one was relative to the document itself.
In this link you will see more about positioning and you can test some of these features related to the position property:
http://www.w3schools.com/cssref/pr_class_position.asp
About the fact that one div was positioned over another, you should search for the 'z-index' property. Firefox has a 3D mode so you can see this more clearly:
http://www.addictivetips.com/internet-tips/browse-internet-in-3d-using-mozilla-firefox-11-tip/
Set a min-width on html and body.
Have you tried setting your #page-container to relative and your #main-image container to absolute and setting the position using top, bottom, etc. Then you should also be able to float your #content container to the right.