I want to set a margin for text, next to my checkbox. In my HTML it looks like it's one line, but on my site, because of font, it takes two (and that's very ok with me).
No matter what I do: if I do it with padding, margin, or border, every time, only the first row of my text goes a little bit to right, but the second line is stying exactly next to my checkbox. Could you help me?
jsFiddle
.contact input {
width: 50px;
height: 50px;
background-color: #ffffff;
outline: 1px solid #24ba9f;
float: left;
}
.contact label {
font-size: 18px;
text-align: left;
color: #b2b2b2;
text-align: left;
line-height: normal;
padding-left: 10px;
}
<div class="contact">
<label>
<input type="checkbox" checked>Lorem ipsum, lorem ipsum, lorem ipsum
</label>
</div>
here you go
.contact input {
width: 50px;
height: 50px;
background-color: #ffffff;
outline: 1px solid #24ba9f;
float: left;
}
.contact label {
font-size: 18px;
text-align: left;
color: #b2b2b2;
text-align: left;
line-height: normal;
padding-left: 10px;
}
.contact span {
display:inline-block;
margin-top:10px;
}
<div class="contact">
<label>
<input type="checkbox" checked>
<span>Lorem ipsum, lorem ipsum, lorem ipsum</span>
</label>
</div>
I hope this works
<div class="contact">
<input type="checkbox" id="test" checked/>
<label for="test">Lorem ipsum, lorem ipsum, lorem ipsum</label>
</div>
.contact input{
width:50px;
}
.contact label{
cursor:pointer;
}
Try like this: Demo
You have to place checkbox outside label and you can give margin-right for checkbox.
Update: Demo
You can even place the checkbox inside the label as here margin right has been specified with same css only HTML structure changed
<div class="contact">
<label><input type="checkbox" checked>
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
</label>
</div>
So output will be like this:
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>
This question already has answers here:
flexbox space-between and align right
(3 answers)
Closed 2 years ago.
I am trying to avoid float, and have some trouble moving the image to the right.
Trying my best to use flexbox but nothing is working. The thing is used here is a flex direction row. I can't come up with any idea's to do it.
Could someone please help me with this?
Thank you so much.
Here is an example of the code in codepen.io
https://codepen.io/wingho/pen/oNYXoLR
.why-us-column {
margin-left: 10px;
width: 90%;
flex: 1 0 65%;
position: relative;
display: flex;
flex-direction: row;
}
.car-home {
width: 30%;
margin-top: 30px;
display: flex;
flex: 1 0 55%;
position: relative;
}
.text-column {
position: relative;
}
.text-home {
margin-left: 30px;
margin-top: 50px;
line-height: 1.4;
}
.text-afq {
color: dodgerblue;
font-weight: bold;
}
.why-title {
font-weight: bold;
}
.contact-button {
color: white;
font-weight: bold;
background-color: dodgerblue;
border: 1px solid dodgerblue;
padding: 7px 9px 7px 9px;
border-radius: 5px;
}
.title-graph-first {
color: dodgerblue;
margin-top: 10px;
display: block;
font-weight: bold;
font-size: 18px;
}
.offer-title-second {
margin-top: -3px;
color: rgb(74, 75, 75) !important;
font-weight: bold;
font-size: 30px;
}
.bg2 {
background-color: #f1f1f1;
}
<div class="bg-1">
<div class="why-us-container">
<div class="why-us-column">
<img src="img/car-home.jpg" alt="test auto" class="car-home">
<div class="text-home">
<h5 class="title-graph-first"> Lorem ipsum </h5>
<h3 class="offer-title-second"> Lorem ipsum </h3>
<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
</p>
<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.
</p>
<div class="button-container">
<button class="contact-button"> Lorem ipsum </button>
</div>
</div>
</div>
</div>
</div>
You can use position:absolute and text-align:right as an alternative of float.
div{background:red; text-align:right; position:relative}
#ab1{ position:absolute; left:0; background:yellow;}
#ab2{background:yellow; }
#ab3{background:yellow; }
<div><span id="ab1" style="display: inline-block;">A</span>
<span id="ab2" style="display: inline-block;">B</span>
<span id="ab3" style="display: inline-block;">C</span>
</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.
I have element with Bootstrap collapse but sadly it is jumping up instead of just animating.
HTML:
<section class="row faq-item">
<h3 class="col-xs-11 col-md-10 faqalign" onclick="expand_faq(this);" data-toggle="collapse" data-target="#faq1" aria-expanded="false" aria-controls="faq1">
Czy wystawiają państwo fakturę z odroczonym terminem płatności?
</h3>
<div class="collapse" id="faq1">
<p class="col-xs-12">
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
</p>
</div>
</section>
CSS
div.faq-list {
border-top: 1px solid #d6dae3;
overflow: hidden;
}
.faq-item {
border-bottom: 1px solid #d6dae3;
}
.faq-item p {
margin-top: 9px;
}
.faqalign {
vertical-align: middle;
float: none;
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
cursor: pointer;
}
.faq .icon-plus, .faq .icon-minus {
font-size:20px;
}
.faq .icon-plus::before, .faq .icon-minus::before{
float: right;
}
.faq a {
text-decoration: underline;
}
.faq h3 {
font-size: 14px;
}
Second version
Also I have code without wrapper - this animates in both directions, but have ugly jump at the end of hidding :/
HTML
<section class="row faq-item">
<h3 class="col-xs-11 col-md-10 faqalign" onclick="expand_faq(this);" data-toggle="collapse" data-target="#faq3" aria-expanded="false" aria-controls="faq3">Jaki jest czas realizacji zamówienia?</h3>
<p class="col-xs-12 collapse" id="faq3">
Lorem ipsum lorem ipsum lorem upsumasdasdasd adas dasd asd ipsum.
</p>
</section>
CSS is the same.
Can someone help me figure out why it is not animating well?
This is because all the elements of your collapse content are all floated. This is happening due to the col-xs-12 class on your p element. You can either remove that or set its float to none. Additionally, margin does not work well with Bootstrap's collapse either. A fix is to change it to padding.
.faq-item p {
float: none;
padding-top: 9px;
}
Live example here: http://www.bootply.com/XwYztUl4u5
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