On bootstrap 3,I can't make the layout how I want to and I can't see why.
My HTML :
<div class="container">
<div id="row1" class="row">
<div class="col-lg-4 col-lg-push-8 col-md-4 col-md-push-8 col-sm-push-8 col-sm-4">
<div class="round"></div>
</div>
<div class="col-lg-8 col-lg-pull-4 col-md-8 col-md-pull-4 col-sm-8 col-sm-pull-4 intro-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
</div>
</div>
<div id="row2" class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="round"></div>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 intro-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
</div>
</div>
</div>
My CSS :
#row1 {
opacity:0.3;
background-color: red;
}
#row2 {
opacity:0.3;
background-color: yellow;
}
.intro-text {
text-align:center;
}
.round {
background:#bfd70e;
border-radius:50%;
width:160px;
height:160px;
border:2px solid #679403;
margin:0 auto;
}
#media(min-width:767px) {
.intro-text {
margin-top:60px;
}
#row2 {
margin-top:-15px;
}
}
I want to keep the same structure as the first JS fiddle but gain some space by making the row 2 over the first one. So I tried a margin-top but it break all the structure, I don't know why.
This is JS fiddle without :
#row2 {
margin-top:-15px;
}
JS fiddle
This is JS fiddle with
#row2 {
margin-top:-15px;
}
JS fiddle
How do I fix that ?
Change your:
margin-top: -15px;
to:
margin-top: 15px;
Otherwise you're pulling it down.
https://jsfiddle.net/584wcaa5/1/
It's because the elements are positioned statically, therefore colliding with the elements above it.
If you give your second row position:absolute it should stop it colliding with the elements as the position is set regardless of what other elements are doing.
https://jsfiddle.net/584wcaa5/2/
Related
How can i make my div background height at 100% depending on the height of it parent :
that's what i have for now :
and i want to fill all the space with the red color with the background color:
this is my HTML code :
<div class="row" style="margin-bottom: 20px">
<div class="col-6"><img style="width: 100%" src="https://cdn.pixabay.com/photo/2016/09/01/10/23/image-1635747_960_720.jpg"></div>
<div class="col-6 class1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
<div class="row">
<div class="col-12">
<img src="https://cdn.pixabay.com/photo/2016/09/01/10/23/image-1635747_960_720.jpg" style="width:100%">
</div>
</div>
and that's my css :
.class1{
background-color: yellow;
height: 100%;
}
and thanks for help :-)
Please refer to below link:
https://jsfiddle.net/ulric_469/7mh4vs6p/6/
add height 100% to the image
.row {
display: flex;
align-items: stretch;
}
.row > div {
flex: 1
}
My Problem
I'm working on website which has comments that look like Facebook's comments. The text and user's name in the comments can be edited dynamically.
I can't figure out how to break a long text correctly after the user's name.
What I've Tried
Using 'word-break: break-all' on my wrapper div.
Examples
What i'm trying to achieve:
What i get:
My Code (Simplified)
html:
<div class="comment_wrapper">
<div class="name"></div>
<div class="text_wrapper">
<div class="space_holder"></div>
<div class="text"></div>
</div>
</div>
relevant css:
.text_wrapper{
word-break: break-all;
}
.space_holder{
width: /*Equals to name's width + 10px. Changes dynamically with
javascript when the name is edited. */
}
Help much appreciated!
EDITED: SOLUTION
This worked for me:
html:
<div class="comment_wrapper">
<div class="name"></div>
<div class="text_wrapper">
<div class="space_holder"></div>
<div class="text"></div>
</div>
</div>
relevant css:
.text_wrapper{
word-break: break-all;
}
.space_holder{
width: /*Equals to name's width + 10px. Changes dynamically with
javascript when the name is edited. */
float: left;
}
.text{
display: inline;
}
If you add a float: left; to .space_holder you can wrap the floated name.
.text_wrapper {
word-break: break-all;
}
.space_holder {
width: 75px;
float: left;
}
<div class="comment_wrapper">
<div class="name"></div>
<div class="text_wrapper">
<div class="space_holder">John Doe</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
Say I have some divs:
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
<div class="box-4"></div>
If these boxes need to be alternate colours I need to create some CSS which basically does the following:
.box-(odd-number) {
color:#000;
}
.box-(even-number) {
color:#fff;
}
Obviously I know the above is not the correct syntax. Could some one point me in the right direction?
Thanks
You can use the nth-of-type pseudo-class, combined with the keywords odd and even:
.box:nth-of-type(odd) {
background-color:#000;
}
.box:nth-of-type(even) {
background-color:#fff;
}
.box {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid #f00;
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
You can do this using nth-child() with Even and odd rules.
.box:nth-child(odd) {
background: blue;
}
.box:nth-child(even) {
background: green;
}
<div class="box">Lorem ipsum dolor sit amet.</div>
<div class="box">Lorem ipsum dolor sit amet.</div>
<div class="box">Lorem ipsum dolor sit amet.</div>
<div class="box">Lorem ipsum dolor sit amet.</div>
Or you can can do this where :nth-child(2n) represents the even and :nth-child(2n+1) represents the odd
.box:nth-child(2n) {
background: red;
}
.box:nth-child(2n+1) {
background: yellow;
}
<div class="box">Lorem ipsum dolor sit amet.</div>
<div class="box">Lorem ipsum dolor sit amet.</div>
<div class="box">Lorem ipsum dolor sit amet.</div>
<div class="box">Lorem ipsum dolor sit amet.</div>
You're looking for nth-child(odd) and nth-child(even), If you don't want to apply .box classname.
[class^="box-"]:nth-child(odd) {
color:#000;
}
[class^="box-"]:nth-child(even) {
color:#fff;
}
An example: https://jsfiddle.net/8tkcuuwm/
To get this working you need a container of which you can adress the odd and even children like this. You set the class to the container and Format it's children accordingly.
By this you only have to set the class once and can exchange it if needed, without having to modify each child separately:
<style type="text/css">
.container div:nth-child(odd) {
color:#F00;
}
.container div:nth-child(even) {
color:#00F;
}
</style>
<div class="container">
<div class="box-1">Lorem ipsum dolor sit amet.</div>
<div class="box-2">Lorem ipsum dolor sit amet.</div>
<div class="box-3">Lorem ipsum dolor sit amet.</div>
<div class="box-4">Lorem ipsum dolor sit amet.</div>
</div>
See this jsfiddle:
HTML
<div class="box box-1">Hello World</div>
<div class="box box-2">Hello World</div>
<div class="box box-3">Hello World</div>
<div class="box box-4">Hello World</div>
CSS
.box:nth-child(odd) {
background-color: #336699;
}
.box:nth-child(even) {
background-color: #222;
}
Short explaination:
We added another class to the boxes, called box. This is, so we can refer to every element of this type. (My hint: use ID's for the box-1, box-2 stuff, since they appear to be unique).
Using the pseudo-class nth-child in combination with odd or even, will affect every (as you may assume) odd- or even element.
if colours should alternate depending only on the order of the div elements, (no matter the class name) then you could use div:nth-child(2n) and div:nth-child(2n + 1)
On the contrary if it depends only on the last digit of your class name (no matter if your divs are in the right order) then you could write
[class^="box"][class$="2"],
[class^="box"][class$="4"],
[class^="box"][class$="6"],
[class^="box"][class$="8"],
[class^="box"][class$="0"] { ... }
[class^="box"][class$="1"],
[class^="box"][class$="3"],
[class^="box"][class$="5"],
[class^="box"][class$="7"],
[class^="box"][class$="9"] { ... }
Use nth-child in order to achieve this.
HTML
<div class="box"></div>
<div class="box"><div>
<div class="box"></div>
<div class="box"></div>
CSS
.box:nth-child(odd) {
background-color: #000;
}
.box:nth-child(even) {
background-color: #FFF;
}
I'm using twitter-bootstrap framework, and bootstrap touchspin plugin. And I want to align the touchspin at the bottom of an column .col-md-6 which has variable height.
I tried adding the following (like this solution):
.row {
position: relative;
}
.bootstrap-touchspin {
position: absolute;
bottom:0;
right:0;
}
But nothing changes. (see jsfiddle)
Why does it not work? Do you have another way to do it?
Here is a jsfiddle where you can try: http://jsfiddle.net/R5n9j/1/
ACTUAL OUTPUT
DESIRED OUTPUT
HTML
<div class="container">
<div class="row">
<div class="col-md-7">
<div id="form-guardar-medidas">
<ul class="nav nav-tabs">
<li class="active">Tab1
</li>
<li>Tab2
</li>
</ul>
<div id='content' class="tab-content">
<div class="tab-pane active fade in" id="tab1">
<div class="row">
<div class="col-md-6">
<img class="img-responsive" src="http://placehold.it/200x200">
</div>
<div class="col-md-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit mattis pretium. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
<input id="input-cm" type="text" class="input-lg" name="input-cm">
</div>
</div>
</div>
<div class="tab-pane fade" id="tab2">Hello tab2</div>
</div>
</div>
</div>
</div>
</div>
CSS
body{
padding: 20px;
}
.tab-content {
border: 1px solid #ccc;
padding: 15px;
}
JS
$(document).ready(function () {
$("input[name='input-cm']").TouchSpin();
$('.nav-tabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
});
By switching to CSS table layout, you can have columns of same height for free, with the constraint of not being able to relatively position "(visual) cells" (in Firefox, at least) so you must do that on the '(visual) table"
EDIT2: .bootstrap-touchspin is also displayed as table and that fails in Chrome. Adding a div around this component that'll be absolutely positioned (and not the component itself anymore) solves this problem.
Demo: http://jsfiddle.net/R5n9j/9/
Compatibility is IE8+ (because of / thanks to display: table and table-cell)
HTML
<div class="table pos-reference">
<div class="cell">
<img class="img-responsive" src="http://placehold.it/200x200">
</div>
<div class="cell has-touchspin">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit mattis pretium. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
<div class="pos-abs">
<input id="input-cm" type="text" class="input-lg" name="input-cm">
</div>
</div>
</div>
CSS
.table {
display: table;
table-layout: fixed;
}
.pos-reference {
position: relative;
}
.cell {
display: table-cell;
vertical-align: top;
}
.has-touchspin {
height: 100%;
padding-bottom: 50px; /* Avoids superposition of content and absolutely positioned touchspin */
}
.pos-abs {
position: absolute;
bottom: 0;
border: 1px solid #F00;
}
EDIT: Explanation about why your attempt at positioning the .input-group failed: TWBS .col-AZ-NN are already relatively positioned so the closest ancestor to .input-group being positioned isn't the one you set but .col-md-6. See Firebug screenshot below. Otherwise, your attempt was a good one ;)
The easiest way is to use flex:
.tab-pane .row{
display:flex;
}
If you notice the height of the two col-md-6 containers inside the tabs, they are not equal, flex when used applies equal height to its child containers.
DEMO
Limitation:
The Safari browser does not support the flex property.
My solution is:
I've added col1 and col2 ids to each columns, and with js I set the same height.
col1h = $("#col1").height();
col2h = $("#col2").height();
if (col1h > col2h) {
def_height = col1h;
} else {
def_height = col2h;
}
$("#col1,#col2").height(def_height);
And adding left: 15px; to .bootstrap-touchspin.
The result http://jsfiddle.net/R5n9j/16/embedded/result
We have a fix set of CSS rules, but when we modify the HTML markup to include a canvas, a weird padding appears on the neighboring cell. Here is the CSS:
.wrap{
width:100%;
display: table;
}
.row {
display: table-row;
}
.left{
width: 100px;
display: table-cell;
background-color: #0f0;
}
.right{
background-color: #f00;
display: table-cell;
}
Normal case:
See the fiddle here. Note the position of the text in the red cell: top, aligned with the top of the cell.
<div class="wrap">
<div class="row">
<div class="left">
Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
Canvas case:
See the fiddle here. We swapped the Lorem text in the left cell for a 90x90 canvas. See how the text on the red cell is now aligned with the bottom of the canvas and a padding is applied to the cell.
<div class="wrap">
<div class="row">
<div class="left">
<canvas width='90px' height='90x'></canvas>
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
Question: Could you explain why this padding appears on the left cell, and if this is an expected behavior? Also, could you propose a solution that gets rid of this 'bug'?