<div class="row text-center mt8" >
<span style="border-bottom: 1px solid #e7e7e7;">
<span>Familiarized with the production process</span>
<span></span>
</span>
<div class="small8">
<span>(signature)</span>
</div>
</div>
Hi, I want to make this work. There must be text "Familiarz...." then there should be space, then border and it should be as long as the text is and after that signature. I tried adding spans and brs after text but it's not working.
as a trick you can add a fixer div. after the 'Familiarized...' span add a div class fixer with a little text:
<div class="fixer">fix</div>
and give to him style:
.fixer {
display: inline-block;
visibility: hidden;
padding-bottom: 10px;
}
now you can add a padding-bottom:10px to a span and it will work fine.
the whole code is:
<div class="row text-center mt8">
<span style="border-bottom: 1px solid #e7e7e7; padding-bottom: 10px;">Familiarized with the production process</span>
<div class="fixer" style="display: inline-block;visibility:hidden;padding-bottom: 10px;">fix</div>
<div class="small8">
<span>(signature)</span>
</div>
</div>
Related
Currently I'm creating a product box with two columns near each other, left one have the product image and right one product description.
The main problem is, I'm trying to make the product description the same height as the image, but after few tries I didn't get close to solve it, because it needs to be responsive. I tried a lot of solutions but still stuck, the closest one was using media queries and apply height to the .product-det but seems like it's not the good way.
I have create a Bootply as a demo.
The blue border must reach the bottom of the wrapper.
HTML
<div class="container">
<div class="col-xs-6">
<div class="col-xs-12 padding-15 margin-b-15 border-default padding-t-0 padding-b-0">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-4 col-sm-3 nopadding">
<img class="img-responsive" src="http://placehold.it/250x250">
</div>
<div class="col-xs-8 col-sm-9 border-l-default">
<div class="row"> <h4 class="col-xs-10 margin-t-15 text-ellipsis">Article pokeball superpotion lighting boltubertext pokemon pikachu</h4>
<div
class="col-xs-2 padding-t-15"> <span class="pointer pull-right">
<i class="glyphicon glyphicon-remove"></i>
</span>
</div>
<div class="product-det col-xs-12 line-h-35">
<div class="row">
<div class="col-xs-4">ITEMID</div>
<div class="col-xs-4">
<div class="input-group">
<input class="form-control" placeholder="qnt" type="text"> <span class="input-group-btn">
<button class="btn btn-secondary" type="button">
<span class="glyphicon glyphicon-refresh"></span>
</button>
</span>
</div>
</div>
<div class="col-xs-4"><span class="pull-right">3.203 €</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="">Right content</div>
</div>
CSS
.text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.padding-15 {
padding: 15px;
}
.padding-t-15 {
padding-top: 15px;
}
.margin-b-15 {
margin-bottom: 15px;
}
.border-default{
border: 1px solid #e0e0e0;
}
.padding-t-0 {
padding-top: 0px;
}
.padding-b-0 {
padding-bottom: 0px;
}
.nopadding {
padding: 0;
}
.line-h-35 {
line-height: 35px;
}
.border-l-default {
border-left: 1px solid blue;
}
Try the following:
Html:
<div class="row row-eq-height">
<!--The div columns you want them to be same height should be here-->
</div>
CSS:
/*
Row with equal height columns
*/
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
you can try javascript to do this. because bootstrap col is changing width overtime when you change your devices. I like it, it typeless and you can put the class in your image wrap and your product descript wrap like so:
var st = $('.squarethis').width();
$('.squarethis').css({'height':st+'px'});
$('.sameheight').css({'height':st+'px'});
.wrapper{
background:#ccc;
width:100%;
height:100%;
display:flex;
flex-wrap:wrap;
flex-direction:row;}
.prodImage{
width:30%;
background:red;}
.prodDesc{
width:70%;
background:green;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="prodImage squarethis"></div>
<div class="prodDesc sameheight"></div>
</div>
it will apply on your bootstrap. try to input this.
let me explain what happened:
$('.squarethis').css({'height':st+'px}); it will make your image always square, and it don't care what devices you using.
$('.sameheight').css({'height':st+'px'}); and this thing will make your next bootstrap col following the height of your previous col.
don't forget to input a class in your image wrapper and description wrapper
I'd suggest you to look at bootstrap v4 which comes with awesome features, like flexbox grid.
It does just what you need - example:
#foo{
background-color: aqua;
height: 300px;
}
#bar{
background-color: yellow;
}
<link href="https://cask.scotch.io/bootstrap-4.0-flex.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-6" id="foo">foo</div>
<div class="col-sm-6" id="bar">bar</div>
</div>
</div>
JSFiddle
You can tune this cell (product description) using plain css. Just a little modify class .border-l-default:
.border-l-default {
border-left: 1px solid blue;
height: 100%;
position: absolute;
right: 0;
}
bootply
Try to change the text ellipsis like that, it is a bit rude because i didn't use bootstrap classes, but it works fine to me:
.text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 71px;
}
Try to set min-height in different mediaquery
.border-l-default {
border-left: 1px solid blue;
min-height: 135px;
I am trying to set a vertical line with buttons in the middle with bootstrap.
Using Bootstrap simple vertical line:
<div class="row">
<div class="col-md-6" style="padding-right:20px; border-right: 1px solid #ccc; " >
Area 1
</div>
<div>
Area 2
</div>
</div>
Above only shows a vertical line, but I wanted to be able to add these right in the middle of that vertical line.
<span class="glyphicon glyphicon-arrow-left"></span>
<span class="glyphicon glyphicon-arrow-right"></span>
I couldn't really figure out how to position it using CSS. Is there a good way to go about this?
Any suggestions?
Edit:
I added -
<div class="round" style="position: absolute; top: 40%; right: -13px;">
<span class="glyphicon glyphicon-chevron-right" style="font-size: 1.2em; cursor: pointer;"></span>
</div>
<div class="round" style="position: absolute; top: 55%; right: -14px;">
<span class="glyphicon glyphicon-chevron-left" style="font-size: 1.2em; cursor: pointer;"></span>
</div>
It works, but the vertical line is in between the buttons.. Any suggestions on updating this?
Try this something like this
<div class="row">
<div class="col-md-6">
<div style="padding-right:20px; border-right: 1px solid #ccc; " >Area 1</div>
</div>
<div>
Area 2
</div>
You could use the after selector in css: http://www.w3schools.com/cssref/sel_after.asp
Using it you could do something like:
<div class="row">
<div class="col-md-6 myStyle" style="" >
Area 1
</div>
<div>
Area 2
</div>
</div>
.myStyle {
padding-right:20px; border-right: 1px solid #ccc; }
.myStyle::after{
font-family: 'Glyphicons Halflings';
content: "whatever the icon you want is";
}
You can then use CSS to position the icons however you want.
If you'd like to use more than one Icon you could use the :before selector on the button on the right, and the after on the button on the left.
In my html I get 'response' from controller. Number of lines in the response varies (max is 3).
What is the best way to 'reserve' 3 lines on my html page so the next div with 'SOMETHING' paragraph is not scrolled down by 'response' ?
<div class="row">
<p ng-bind-html="response"></p>
</div>
<div class="row">
<p>SOMETHING</p>
</div>
Using CSS, fix the height occupied by your 3 rows and use overflow to scroll within that fixed height div.
CSS Overflow might help you.
.row-fixed-height {
height: 150px;
overflow: scroll;
}
and in HTML:
<div class="row-fixed-height">
<p ng-bind-html="response"></p></div>
Since the height of the lines varies based on font and font size, I would use line breaks to "reserve" the three lines. If you were to use for instance a fixed height on the div or p, it might jump around on a different browser that uses a different font.
Live Demo:
#response {
background: red;
}
<div class="row">
<p id="response" ng-bind-html="response">
<br />
<br />
<br />
</p>
</div>
<div class="row">
<p>SOMETHING</p>
</div>
JSFiddle Version: https://jsfiddle.net/rspyho74/
As oori pointed you, this is is about CSS, not Angular. The easiest way to fix the height to 3 lines is using the em unit:
.row{
margin: 10px;
padding: 5px;
border: 1px solid #000;
border-radius: 5px;
}
p{
float: left;
margin: 0 5px;
padding: 5px;
border: 1px solid #000;
height: 3em;
}
<div class="row">
<p ng-bind-html="response"></p>
<p ng-bind-html="response">Line 1</p>
<p ng-bind-html="response">Line 1<br>Line 2</p>
<p ng-bind-html="response">Line 1<br>Line 2<br>Line 3</p>
<div style='clear: both;'></div>
</div>
<div class="row">
<p>SOMETHING</p>
<div style='clear: both;'></div>
</div>
As you can see, the paragraph keeps its height no matter how many lines there are. If you remove the height property you can see the difference.
This is my code and I want the alignment to be the same
When I insert a border-left my text goes a bit to the right side but I want all the text to align in the same way.
When I hover it also there the same case.
If I remove the border-left then the text alignment is fine, but how do i get the same alignment when there is border?
<div class="set-leftcol">
<div class="leftcol-box">
<div class="leftcol active">
<div class="sett-i"><i class="fa fa-cog "></i></div>
<div class="sett-title">General</div>
</div>
<div class="leftcol">
<div class="sett-i"><i class="fa fa-key"></i></div>
<div class="sett-title">Security</div>
</div>
</div>
<div class="leftcol-box">
<div class="leftcol">
<div class="sett-i"><i class="fa fa-lock"></i></div>
<div class="sett-title">Privacy</div>
</div>
<div class="leftcol">
<div class="sett-i"><i class="fa fa-cog"></i></div>
<div class="sett-title">Timeline</div>
</div>
<div class="leftcol">
<div class="sett-i"></div>
<div class="sett-title">Blocking</div>
</div>
</div>
<div class="leftcol-box">
<div class="leftcol">
<div class="sett-i"><i class="fa fa-bell"></i></div>
<div class="sett-title">Notification</div>
</div>
<div class="leftcol">
<div class="sett-i"><i class="fa fa-mobile"></i></div>
<div class="sett-title">Mobile</div>
</div>
<div class="leftcol">
<div class="sett-i"><i class="fa fa-rss-square"></i></div>
<div class="sett-title">Followers</div>
</div>
</div>
</div>
http://codepen.io/anon/pen/NqGRqG
change your .leftcol to this :
.leftcol {
float: left;
clear: both;
width: 250px;
cursor: pointer;
background-color: #EBF9FF;
border-left: 4px solid transparent;
}
codepen
The wrong alignment is caused by the :hover state adding a 4px border, so the element is a bit wider when hovered.
One way to prevent that is to add a transparent border to the .leftcol elements, so that when they are hovered only the border color changes but not the width:
.leftcol {
border: 4px solid transparent;
}
Another option would be to use 4px padding on it, and remove that on hover. This is essentially the same trick as above, but uses a padding placeholder for non-hovered elements:
.leftcol {
padding-left: 4px;
}
.leftcol:hover {
padding-left: 0;
}
I don't know if you have intentionally complicated the markup to this extent because you need to do something further with the empty <div>s or have done so accidentally.
In case you didn't have a better way to figure it out, I suggest you take a look at my pen below:
Codepen link to simplify the above markup
I have stripped down your markup to the minimal level and yet achieved the same result you were expecting. Hope it helps you out. Cheers!
Hello guys I am using boostrap for my website and I want a border to take the whole width of a specific div. This is what I have so far:
and I want to make it on the whole div. I tried display:block width:100%, it just doesn't want to work.
Anyone for a solution ?
CSS
.borders {
border-top: 1px solid #dedbdb;
}
HTML
<div class="row">
<div class="col md-4 borders">
<p><span class="glyphicon glyphicon-user"></span>{numberAttending} {numberMaybe} {numberNotAttending}</p>
</div>
</div>
The reason that your border is not taking up the entire width is because your row has padding on it.
<div class="row no-padding">
<div class="col md-4 my-styles">
<p><Content here.</p>
</div>
</div>
.no-padding {
padding: 0;
}
.my-styles {
border-top: 1px solid #dedbdb;
padding: 15px;
}