This question already has answers here:
Scrollable div to stick to bottom, when outer div changes in size
(7 answers)
Closed 5 years ago.
I want to make a chat application. my problem is, when my textbox increase it height, the chat-container reduce it height from bottom.
I want the chat container reduce it height from top.
For example:
This is my chat-box looklike. And, when my textbox increase it height, it'll show like this
What i expected is like this
And also, when the chat-container is not at bottom, they also reduce it height from top too. like this
This is my code
.chat-container, .chat-content, p, .chat-input {
box-sizing: border-box;
padding: 10px;
border: 2px solid black;
}
.chat-container {
width: 300px;
height: 400px;
display: flex;
flex-direction: column;
}
.chat-content {
width: 100%;
overflow: auto;
flex-grow: 1;
}
.input-here {
width: 100%;
max-height: 150px;
}
.input-here {
border: 2px solid red;
}
<div class="chat-container">
<div class="chat-content">
<p>Hello</p>
<p>This is example words.</p>
<p>This is another example #1</p>
<p>This is another example #2</p>
<p>This is another example #3</p>
<p>This is another example #4</p>
<p>This is another example #5</p>
</div>
<div class="chat-input">
<div contenteditable="true" class="input-here"></div>
</div>
</div>
Sorry for my bad english.
Thank you so much.
I think this is what you needed. Changes:
A bit of javascript added to scroll the chat content to the bottom when input is being typed using onkeyUp function.
A overflow-y:scroll added to your chat input so that the text doesn't overflow the max-height otherwise it normally does.
You also might want to reduce the max-height of .input-here to a lower value and it will look much better. Hope, it helps.
// Store your div in a variable
var objDiv = document.getElementById("chat");
// Execute the function once on load
myFunction();
function myFunction() {
objDiv.scrollTop = objDiv.scrollHeight;
}
.chat-container,
.chat-content,
p,
.chat-input {
box-sizing: border-box;
padding: 10px;
border: 2px solid black;
}
.chat-container {
width: 300px;
height: 400px;
display: flex;
flex-direction: column;
}
.chat-content {
width: 100%;
overflow: auto;
flex-grow: 1;
}
.input-here {
width: 100%;
max-height: 100px;
overflow-y: scroll;
}
.input-here {
border: 2px solid red;
}
<div class="chat-container">
<div class="chat-content" id="chat">
<p>Hello</p>
<p>This is example words.</p>
<p>This is another example #1</p>
<p>This is another example #2</p>
<p>This is another example #3</p>
<p>This is another example #4</p>
<p>This is another example #5</p>
<p>This is another example #6</p>
<p>This is another example #7</p>
<p>This is another example #8</p>
</div>
<div class="chat-input">
<div contenteditable="true" class="input-here" onkeyup="myFunction()"></div>
</div>
</div>
Related
I have something like this:
HTML:
<div id="container">
<img src="leftphoto.jpg" id="left">
<div id="right">Description</div>
</div>
CSS:
body {
margin: 0;
padding: 0;
background-color:#252525;
}
#container{
position: relative;
display: flex;
justify-content: center;
margin: 0 auto;
margin-top: 100px;
margin-bottom: 100px;
height: 40vw;
}
#left{
max-width: 75vw;
height:100%;
}
#right{
min-width: 300px;
height:100%;
color:white;
width:20vw;
background-color: red;
color: #ffffff;
font-size: 11px;
overflow: auto;
}
I want the right div to go down, under left div with the same width. How can I achieve that?
What I have:
When I resize window, it is smaller:
But I want the right div to go down, under the left div and also I would like to get the same width on both divs:
I was trying a lot of different things, but I couldn't achieve this. Do you have any advice?
You can use flex blox to achieve this. Simply place on the container of the divs. Once that is done you can change the divs placement by flex-direction row/column. Similarly, for placing the 2nd div above the first div once the size reduce, you can set media query for a specific screen where you can reverse the column and you done.
.container{
display: flex;
flex-direction: row;
}
#media screen and (max-width:768px){
.container{
display: flex;
flex-direction: column-reverse
}
}
<div class="container">
<div>
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">
</div>
<div class="content">
<p>Content</p>
</div>
</div>
Create a second container in your html and they will naturally align under eachother
<div class="container">
<div class="content-Container">
<img src="leftphoto.jpg" id="left" />
<div id="right">Description</div>
</div>
</div>
and then position them to the middle of the page by adding style to the parent container
I'm needing to create CSS classes that can display content similar to this design image here: design concept
Obviously, the code statements themselves don't matter. But how can I create CSS that could wrap the containing content as seen in the image and have that work to n nested containers? I've been playing around with div tags and display: inline-block styling but nothing is working out.
Here is what I currently have, using flex-box. This is almost what I need except that the "rows" aren't setting their width to fit the text content as it just sets the width of everything to the largest width child... seems that this approach might not be possible.
.container {
display: inline-flex;
flex-direction: column;
padding-left: 15px;
}
.containerRow {
display: flex;
flex-direction: column;
justify-content: center;
height: 35px;
margin: 5px;
}
.dropContainer {
height: 70px;
border: 1px solid #ccc!important;
background-color: white;
color: black;
}
.purple {
background-color: #872A61;
color: white;
}
.green {
background-color: #478B26;
color: white;
}
<div class="container purple">
<div class="containerRow">
if (something == true) then
</div>
<div class="container green">
<div class="containerRow">
<div><b>where</b> something(x: Number, y:Number) <b>is</b></div>
</div>
<div class="dropContainer">
Some more stuff again
</div>
<div class="dropContainer">
Some more stuff again
</div>
<div class="containerRow">
<b>end</b>
</div>
</div>
<div class="containerRow">
<b>end</b>
</div>
</div>
Use margins or padding styles with percentages to achieve the nth term.
How to create div with 2 element's (text and img) on two oppoiste sides? Length of text is variable (it's a list of months to select). So the text should be on the left side of the div or "p" and img should be on the right. Between them is gap. Like on this page:
https://zapodaj.net/acb40b1461eaf.jpg.html
There's multiple ways to do this, either using float or a margin on each object in the container.
The CSS-Property Float could help you!
.parent {
width: 90%;
height: 100px;
background: #EFEFEF;
}
.left-child {
width: 80px;
height: 80px;
margin: 10px;
background: #DDDDDD;
float: left;
}
.right-child {
width: 80px;
height: 80px;
margin: 10px;
background: #DDDDDD;
float: right;
}
<div class="parent">
<div class="left-child"></div>
<div class="right-child"></div>
<div>
You can achieve it by using float as below:
<!DOCTYPE html>
<html>
<head>
<style>
.left {
float:left;
}
.right {
float:right;
}
img {
margin:0.5em;
}
</style>
<body>
<div class="container">
<p class="left">Text will come here</p>
<img src="" width="" height="" class="right" />
</div>
</body>
</html>
Please specify image properties.
Thanks!
There are many ways, including margin, float or even position: absolute in some cases, but it's worth noting that there is a fairly new set of css properties - flex:
.container {
display: flex;
justify-content: space-between;
}
<div class="container">
<div>a</div>
<div>b</div>
</div>
I have a main div under which there can be one or two sub divs. When there are two sub-divs, I would want them to be displayed side-by-side. But If I have only one sub div, then I'd want it to be displayed in the center. Can this be achieved by using CSS or should I take help of JavaScript? Using the following CSS I'm able to achieve the side-by-side part of it. But I'm not sure how to go forward when there is only one sub div
HTML:
<div id="maindiv">
<div class="subdiv">
<p>Div One</p>
</div>
<div class="subdiv">
<p>Div Two</p>
</div>
</div>
CSS:
div.subdiv {
float: left;
padding: 20px;
}
div#maindiv {
border: 2px solid black;
height: 120px;
width: 200px;
}
Use display:inline-block instead of float:left. Try to remove the second sub div in my example fiddle and you can see the desired result.
div.subdiv {
display:inline-block;
padding: 20px;
}
div#maindiv {
border: 2px solid black;
height: 120px;
width: 200px;
text-align:center;
}
DEMO
Objective
To have the page the page on my website to expand in height according to the dynamic data pushed into the container.
Background
The page has a set of images and text that is populated via a JSON feed. The text is overflowing into the footer because it is not expanding its containing div which would subsequently expand its containing div which would subsequently expand the body. So I need for a specific child div to push its multiple parent divs.
I have searched similar problems on Stackoverflow and attempted various CSS solutions such as giving all of the parent divs a CSS rule of clear:both or even in the HTML inserting a <div style="clear:both"></div> but none of those solutions worked.
So now I am experimenting with jQuery to see if I could find a solution to this problem.
I know I need to create a variable of some sort like
var newHeight = $("#carousel").height();
And that it needs to have push out the height with something like
$(".case").height(newHeight);
This is my current HTML
<body>
<div class="container">
<div class="block push">
<div id="mainContent" class="row">
<div class="large-12 columns">
<h1>Before & After Case Gallery</h1>
<div id="casesContainer">
<div id="carousel"></div>
</div>
<script id="casestpl" type="text/template">
{{#cases}}
<div class="case">
<div class="gallery_images_container">
<div class="item_container">
<div class="gallery_heading">BEFORE</div>
<img src="/assets/img/content/images-bruxzir-zirconia-dental-crown/cases/{{image}}_b_300.jpg" alt="Photo of {{alt}}" />
</div>
<div class="item_container">
<div class="gallery_heading">AFTER</div>
<img src="/assets/img/content/images-bruxzir-zirconia-dental-crown/cases/{{image}}_a_300.jpg" alt="Photo of {{alt}}" />
</div>
</div>
<div class="description_container">
<p>
<span><strong>Case Number {{{number}}} {{version}}:</strong></span>
{{{description}}}
</p>
</div>
</div>
{{/cases}}
</script>
The {{{description}}} in the <p> is overflowing into its parent divs <div class="description_container"> then <div class="case"> then <div id="carousel"> then <div class="casesContainer"> then <div class="large-12"> (which is a container in Foundation) then <div class="mainContent"> and so on.
Here is my CSS
html, body { height: 100%; }
.container { display: table; height: 100%; width: 100%; margin: 0 auto; }
.block { display: table-row; height: 1px; }
.push { height: auto; }
#mainContent {}
#casesContainer {
min-width:310px;
}
.image-navigation {
background: rgb(6,6,6);
color: #fff;
width:100%;
max-width: 640px;
height: 24px;
}
.image-navigation a {
color: #fff;
padding: 6px;
}
.image-navigation-previous, .image-navigation-next{
float:left;
width: 50%;
}
.image-navigation-previous {
text-align: right;
}
.image-navigation-next {
text-align: left;
}
#carousel {
height:auto;
min-height:600px;
overflow-y: auto;
}
.case {
max-width: 640px;
height:auto;
}
.gallery_images_container {
clear: both !important;
}
.item_container{
max-width: 320px;
float: left;
}
.gallery_heading {
background: black;
color: white;
width: 100%;
text-align: center;
}
.description_container {
background: none repeat scroll 0% 0% white;
min-width: 308px;
max-width: 640px;
padding: 6px 6px 12px 6px;
clear: both !important;
}
I realize that #carousel { height:auto; min-height:600px; overflow-y: auto; } is an ugly hack. It was just an experiment.
I hope that I am just completely missing something and this is an easy jQuery fix. Or maybe my HTML and CSS could use a different structure?
Not a complete fix but maybe helpful.
I've used this function but Internet Explore increases the heights on resize.
$(document).on('ready', function() {
// $(window).on('resize', function() {
var height1 = $("#r1c1").height();
if (height1 < $("#r1c2").height()) { height1 = $("#r1c2").height() }
if (height1 < $("#r1c3").height()) { height1 = $("#r1c3").height() }
$("#r1c1").height(height1);
$("#r1c2").height(height1);
$("#r1c3").height(height1);
// }).trigger('resize'); // Trigger resize handlers not working correctly with IE8.
});//ready