I got the following situation:
My page contains a panel that looks like that in a normal situation.
Text 1 Text text lorem ipsum lorem ipsum lorem ipsum
Here's the HTML:
<div class="ui-g">
<div class="ui-g-6">
Text 1
</div>
<div class="ui-g-6">
Text text lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</div>
</div>
Now, on low resolutions, I want the columns to reflow to a single one what I accomplished by using flexbox:
.ui-g {
display: flex;
flex-wrap: wrap;
}
.ui-g > div {
min-width: 180px;
max-width: 100%;
box-sizing: border-box;
margin: 0 auto;
}
This means: normally, both columns have a width of 50% (because of ui-g-6) and a min-width of 180px -> if the panel has a lower resolution than ~360px, the reflow happens.
My problem's the following:
When lowering the resolution, the page changes from
Text 1 Text text lorem ipsum lorem ipsum lorem ipsum
to
Text 1 Text text lorem ipsum lorem ipsum
lorem ipsum
and after the reflow:
Text 1
Text text lorem ipsum lorem ipsum
lorem ipsum
As you can see, the content is now unnecessarily narrow, I'd prefer it to look like that:
Text 1
Text text lorem ipsum lorem ipsum lorem ipsum
I know about flex-grow, but this overrides any width attribute and totally messes up my page layout on normal resolutions. Also, it didn't have the desired effect anyway.
Any tips are much appreciated!
Using flex-basis instead of min-width and adding flex-grow should get you there:
.ui-g {
display: flex;
flex-wrap: wrap;
outline: #0FF6 solid;
outline-offset: 3px;
margin: 1em;
}
.ui-g>div {
flex-basis: 180px;
flex-grow: 1;
box-sizing: border-box;
margin: 0 auto;
outline: #F0F6 solid;
outline-offset: 0px;
}
<div class="ui-g">
<div class="ui-g-6">
Text 1
</div>
<div class="ui-g-6">
Text text lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</div>
</div>
<div class="ui-g" style="width: 300px">
<div class="ui-g-6">
Text 1
</div>
<div class="ui-g-6">
Text text lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</div>
</div>
I might have misunderstood your question, but :
.ui-g {
display: flex;
flex-wrap: wrap;
}
.ui-g > div {
min-width: 180px;
max-width: 100%;
box-sizing: border-box;
margin: 0 auto;
}
#media only screen and (max-width: 360px) {
.ui-g {
white-space: nowrap; /* text wont go to next line if it refactors */
}
}
Related
I am trying to make a side-by-side table with 2 divs column, that contains many <p> elements inside.
That would be easy if these two Divs and their contents are horizontal, but in this case, they are vertical, two sides' heights are not the same.
Is there any way to do it without using JavaScript?
*EDIT:
The reason I put two separate divs side by side is that I put new content to them using JavaScript Prepend.
On the left side are the English texts, and on the right side are translated texts.
It would be easier for me if the English texts were together inside a div and the same for the translated texts.
I have done it by using Javascript and setting one side's style. height = the other side's clientHeight, it would be much better if I was able to do this with only CSS and HTML
for (let i = 0; i < document.querySelectorAll('#div1 p').length; i++) {
document.querySelectorAll('#div1 p')[i].style.height = "auto";
document.querySelectorAll('#div2 p')[i].style.height = "auto";
if (document.querySelectorAll('#div1 p')[i].clientHeight > document.querySelectorAll('#div2 p')[i].clientHeight )
{
document.querySelectorAll('#div2 p')[i].style.height = document.querySelectorAll('#div1 p')[i].clientHeight-3+'px'
}
else
{
document.querySelectorAll('#div1 p')[i].style.height = document.querySelectorAll('#div2 p')[i].clientHeight-3+'px'
}
}
body {
font-family: Consolas,Menlo,"courier new",monospace;
font-size: 18px;
}
.grid-container {}
#div1{
width: 50%;
display: table-cell;
}
#div2{
width: 50%;
display: table-cell;
}
p{
margin-top: 0px;
padding-bottom: 3px;
padding-left: 3px;
margin-bottom: 6px;
border-bottom: 1px dashed #0000ff00;
border-color: gray;
}
<div class="grid-container">
<div id="div2" class="skiptranslate">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.</p>
<p> the second cell</p>
<p> the 3rd cell </p>
<p> the 4th cell </p>
</div>
<div id="div1" >
<p> I want this cell's height same as the left "lorem ipsum" cell </p>
<p> the second cell</p>
<p> the 3rd cell</p>
</div>
</div>
Here how i would do it, with rows taking 100% and cells taking 50%
.cell {
width: 50%
}
.row {
width: 100%;
height: auto;
display: flex;
margin-top: 0px;
padding-bottom: 3px;
padding-left: 3px;
margin-bottom: 6px;
border-bottom: 1px dashed #0000ff00;
border-color: gray;
}
body {
font-family: Consolas, Menlo, "courier new", monospace;
font-size: 18px;
}
<div class=" grid-container">
<div class="row">
<div class="cell">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.</p>
</div>
<div class="cell">
<p> I want this cell's height same as the left "lorem ipsum" cell </p>
</div>
</div>
<div class="row">
<div class="cell">
<p> the second cell</p>
</div>
<div class="cell">
<p> the second cell</p>
</div>
</div>
<div class="row">
<div class="cell">
<p> the 3rd cell </p>
</div>
<div class="cell">
<p> the 3rd cell </p>
</div>
</div>
<div class="row">
<div class="cell">
<p> the 4th cell </p>
</div>
<div class="cell"></div>
</div>
</div>
just to add to LK77s good answer - is there any reason why you can't just use a <table> element here? That's the simplest solution.
failing that, a more modern solution is to refactor the HTML to take out the column divs, then you could use display: flex or display: grid to accomplish this:
.flex-table {
display: flex;
flex-wrap: wrap;
width: 600px;
border: 1px solid;
}
.flex-table p {
margin: 0;
flex: 0 0 50%;
max-width: 50;
}
.grid-table {
display: grid;
grid-template-columns: repeat(2, 1fr);
width: 600px;
border: 1px solid;
}
.grid-table p {
margin: 0;
padding: 5px;
}
/**
Just to show the different columns
**/
.table p:nth-child(2n) {
background-color: rgba(255,0,0,.5);
}
<div class="flex-table table">
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
<p>Lorem ipsum second cell</p>
<p>Lorem ipsum third cell</p>
<p>Lorem ipsum fourth cell</p>
<p>Lorem ipsum fifth cell</p>
<p>Lorem ipsum sixth cell</p>
</div>
<div style="margin-bottom: 30px"></div>
<div class="grid-table table">
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
<p>Lorem ipsum second cell</p>
<p>Lorem ipsum third cell</p>
<p>Lorem ipsum fourth cell</p>
<p>Lorem ipsum fifth cell</p>
<p>Lorem ipsum sixth cell</p>
</div>
I am building a message box with title, description, and answers.
I have been struggling for days with that, even played with a Codepen, but can't figure to handle this correctly.
I need:
Title to expand to a maximum of 300px before scrolling
Description to expand to a maximum to left space if no answer (or few), distribute space say 80% of space otherwise (I will add a button to hide this space) before scrolling also
Fixed height for message number title
Messages div to expand to a maximum space left
Input area to stay at bottom and able to size up if any user input (again let's say 20% before scrolling?)
Codepen link
<div class="demoContainer">
<div class="page">
<div class="title">
<h1>My awesome title that is so long i will move everything down</h1>
<button>Some stuff to click</button>
</div>
<div class="row">
<div class="colLeft">
<div class="description">
<h2>Author</h2>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
</div>
<div class="between">
<p>Answers</p>
</div>
<div class="messages">
<ul>
<li>
toto
</li>
<li>
tAta
</li>
<li>
tAta
tAta
</li>
<li>
tAta
</li>
<li>
tAta
</li>
<li>
tAta
</li>
>
<li>
tAta
</li>
>
<li>
tAta
</li>
>
<li>
tAta
</li>
>
<li>
tAta
</li>
</ul>
</div>
<div class="input">
<textarea placeholder="Input height adapt to size until a maximum"></textarea>
</div>
</div>
<div class="colRight">
<ul>
<li>
some
</li>
<li>
stuff
</li>
</ul>
</div>
</div>
</div>
<div class="divider"></div>
<div class="page">
<div class="title">
<h1>My awesome short title</h1>
<button>Some stuff to click</button>
</div>
<div class="row">
<div class="colLeft">
<div class="description">
<h2>Author</h2>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
</div>
<div class="between">
<p>Answers</p>
</div>
<div class="messages">
<ul>
<li>
toto
</li>
<li>
tAta
</li>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</ul>
</div>
<div class="input">
<textarea placeholder="Input height adapt to size until a maximum"></textarea>
</div>
</div>
<div class="colRight">
<ul>
<li>
some
</li>
<li>
stuff
</li>
</ul>
</div>
</div>
</div>
</div>
* {
box-sizing: border-box;
}
.demoContainer {
display: flex;
flex-direction: row;
}
.divider {
width: 8px;
}
.page {
height: 600px;
width: 550px;
background-color: lightgrey;
display: flex;
flex-direction: column;
overflow: auto;
}
.title {
display: inline-flex;
justify-content: space-between;
align-items: center;
max-height: 200px;
}
.title button {
width: 90px;
height: 30px;
}
.row {
display: flex;
/*flex: 1 1 100%;*/
min-height: 0;
height: 100%;
}
.colLeft {
flex: 3 1 auto;
min-height: 0;
height: 100%;
border: 1px solid blue;
display: block;
flex-direction: column;
position: relative;
/*align-items: stretch;
align-content: stretch;*/
}
.description {
border: 1px dashed black;
/*flex: 4 1 100%;*/
max-height: 60%;
overflow: scroll;
}
.between {
border: 1px solid green;
height: 1, 1em;
}
.between>p {
margin: 0;
}
.messages {
border: 1px dashed red;
/*flex: 2 100 auto;*/
overflow: scroll;
}
ul {
max-width: 100%;
}
.input {
width: 100%;
min-height: 1rem;
flex: 1 1 3rem;
display: flex;
border: 1px solid yellow;
position: relative;
bottom: 0;
}
.input>textarea {
width: 100%;
}
.colRight {
flex: 1 1 auto;
border: 1px solid black;
min-width: 150px;
overflow: scroll;
}
The one on the right is a short example of what I would like, but remove <br/> to see the problem.
I tried with display: grid, isplay: block display: flex. I can't seem to find anything satisfying my needs.
My question is: is that even possible? With CSS only?
For everyone wondering, i discovered a few things while digging into css.
First of all is you can set a 100% height on a div to take up the free space if another element is in, but if and only if you set the parent element display: flex; !
With that in mind, it comes easier.
After that, I decided to dive into JS as my problem does not seem to be solvable with CSS only.
I took advantage of the "new" position: sticky; property, and my JS can take care of position it top: 0; or bottom: 0; depending on the scrolling position.
CSS Added :
.stickyBottom{
position: sticky;
bottom: 0;
}
.stickyTop{
position: sticky;
top: 0;
}
JS Code added:
var colLeft = document.getElementsByClassName("messagesInput")[0];
colLeft.onscroll = function(){myFunction()};
// Get the navbar
var between = document.getElementsByClassName("between")[0];
var desc = document.getElementsByClassName("description")[0];
// Get the offset position of the navbar
var sticky = between.offsetTop;
//between.classList.remove("stickyBottom")
function myFunction() {
if (colLeft.scrollTop >= sticky) {
between.classList.remove("stickyBottom")
between.classList.add("stickyTop")
} else {
between.classList.add("stickyBottom")
between.classList.remove("stickyTop");
}
}
It ends up in a way better UX than I initially wanted ! :)
CodePen Link updated accordingly.
Same as the heading, really. I have two divs, each 50% width. An image might end up in either one and if the right image is too wide it simply overflows right. Perfect. But so does the image on the left. Needless to say this messes up the 50/50 appearance of the two divs.
So -- is there any way to force an overflow to the LEFT?
Thanks.
HTML:
<div class="container">
<div class="content_1">
<img>
</div>
<div class="content_1">
<img>
</div>
</div>
CSS:
.container {
width: 100%;
max-width: 1100px;
}
.container > div {
width: 50%;
}
.container_1 {
overflow: left /* I know this doesn't exist... yet */
}
You can use the css property direction:rtl to force the right-to-left behaviour of text which in the context of overflowing an image gives the impression that it is being overflowed to the left.
Basic example:
HTML:
<div class="container">
<div class="image image1"><img src="http://placehold.it/800x300"/></div>
<div class="image image2"><img src="http://placehold.it/800x300"/></div>
</div>
CSS:
* {
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
.container {
width:100%;
}
.image {
width:50%;
border:1px solid red;
float:left;
overflow:auto;
}
.image1 {
direction: ltr;
}
.image2 {
direction: rtl;
}
Demonstration: http://jsfiddle.net/n5LyR/1/
You could use direction to show a scrollbar that goes opposite direction or use float:right on content to hide it on the left side
DEMO
HTML
<div class="ovfleft">
<p> lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem</p>
</div>
<div class="hidetoleft">
<p> lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem</p>
</div>
CSS
div {
width:300px;
margin:3px auto;
border:solid;
}
.ovfleft {
direction:rtl;
overflow:auto;
}
p {
width:500px;
direction:ltr;
}
.hidetoleft {
overflow:hidden;
}
.hidetoleft p {
float:right;
}
I am trying to place elements in my header. I would like to have 3 elements inline - button, image and simple text. The height of the header should be equal height of image. All elements should be centered vertically. Here's my HTML:
<div class="btn">
...
</div>
<img src="image.jpg">
<span style="float:none; display: inline-block; vertical-align: middle">lorem ipsum lorem ipsum</span>
On image "a" I present expected behavior. On image "b" and "c" my results were shown.
So, the expected result is to wrap text if it doesn't fit the page. But it still should be on the right side.
Legend:
red rectangle - button
orange rectangle - image
Does anyone know what styles I should use?
You should make them:
display: inline-block
Here is pretty simple demo:
HTML:
<div class="row">
<div class="btn">...</div>
<img src="http://www.ibm.com/developerworks/data/library/techarticle/dm-0504stolze/test_1.jpg" />
<span>lorem ipsum<br/> lorem ipsum</span>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
.row > * {
display: inline-block;
vertical-align: middle;
}
.btn {
width: 30px;
height: 30px;
background-color: red;
}
Demo
Another way.
HTML:
<div class="row">
<div class="btn">...</div>
<img src="http://www.ibm.com/developerworks/data/library/techarticle/dm-0504stolze/test_1.jpg" /> <span>lorem ipsum<br/> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum</span>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
.row > * {
display: table-cell;
vertical-align: middle;
}
.btn {
width: 30px;
height: 30p;
background-color: red;
}
.row { display: table-row; }
Demo
Try giving your span a width. That would force the line breaks in your "a" example.
HTML
<div class="header">
<div class="btn">BUTTON</div>
<img src="http://lorempixel.com/200/200" /><span>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</span>
</div>
CSS
.header {
width: 500px;
background: dimgrey;
}
.btn, img, span {
display:inline-block;
vertical-align: middle;
}
span {
width:200px;
text-align: center;
}
http://jsfiddle.net/abN39/1
Just want to ask a few questions about this example:
What is the best way to do this 3 column layout these days? Of course there were tables and now there are divs etc etc. What the latest greatest way to accomplish this? If it was totally up to me I'd have a container div, containing 3 other ones. Set to width: 33%; and display: inline;
Also, how does one get those vertical dividers? Again as far as I know you use that in a table and only display certain borders by which you get a vertical rule effect.
But what's the best way these days to get this effect? Having html5 and css3 in your toolbox..
Thanks in advance!
Try this
HTML
<div class="outer">
<div class="wrap">
<div class="sub">Lorem Ipsum</div>
<div class="sub">Lorem Ipsum </div>
<div class="sub">Lorem Ipsum </div>
</div>
</div>
CSS
.outer {
background: #734e91;
padding: 12px;
}
.wrap {
margin: 0 auto;
}
.sub {
padding: 12px;
width: 32%;
height: 150px;
background: #734e91;
display: table-cell;
border-right: solid #a175c4 1px;
}
.sub:last-child {
border: 0px;
}
DEMO UPDATED
jsFiddle demo: http://jsfiddle.net/yDXLp/3/
<style>
footer {
background-color: #eee;
margin: 10px auto;
}
footer h2 {
font-size: 1.5em;
font-weight: bold;
}
footer > div,
footer > .divider {
display: inline-block;
vertical-align: middle;
}
footer > div {
padding: 1%;
text-align: center;
width:30%;
}
footer > .divider {
font-style: normal;
height: 240px;
border: 1px solid #888;
-webkit-box-shadow: 1px 2px 1px #ccc;
box-shadow: 1px 2px 1px #ccc;
}
</style>
<footer>
<div>
<h2>Our Client</h2>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
<button>Read more</button>
</div>
<i class="divider"></i>
<div>
<h2>Pay Rates</h2>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
<button>Read more</button>
</div>
<i class="divider"></i>
<div>
<h2>About US</h2>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
<button>Read more</button>
</div>
</footer>
I recommend using box-sizing: border-box; (an alternative way to the standard css box model).
What does box-sizing: border-box; do? If you define the width of a div (e.g. 33%) and add borders and paddings it longer affects the calculated with of your div. It remains 33% of the parent with (33% - (borders + paddings)).
The standard box model adds them to the calculated with of 33% (33% + borders + paddings in our case).
HTML markup:
<div class="footer">
<div class="footer-item item1"></div>
<div class="footer-item item2"></div>
<div class="footer-item item3"></div>
</div>
CSS:
.footer {
box-sizing: border-box; /* will need vendor prefixes for webkit and mozilla */
}
.footer-item {
width: 33%;
float: left;
}
.footer-item + .footer-item {
border-left: 1px solid black;
}
Checkout Twitter Bootstrap(http://twitter.github.com/bootstrap/), Gumby Framework(http://gumbyframework.com/)
These frameworks may provide you readymade functionality for the horizontal bar. Else use borders. Set all borders except right as transparent in color
The css3 way of doing columns is using "column-*" family of properties
They are now supported by all major browsers and there should be no problems with them.
Personally I use these styles in my home site and they provide pretty flexible (perhaps with some small shortcomings) layout formatting.
The best way depends on what you want to achieve. How should the columns behave to resizing of the window etc.
If I was doing something like in the picture I would probably use a fixed width so I could have control of the line width for the text.
By using inline-block you can achieve columns that are collapsed and put under each other on a smaller screen (like a phone)
Try to figure aout the desired behavior first.
EDIT: Oops, I misread and confused horizontal with vertical ;-) I think the other answers explains his enough though.
Correct me if I'm wrong but I think that the css3 column property is for multiple columns for the same text body.