I am working on a simple tool that display stats.
We want to display 2 panels, of the same height width small boxed inside, all of the same height.
My result is very close to what we want to produce, but the boxes has weird padding.
<div class="col-md-6 greybox">
<div class="row">
<div class="col-md-12">
<div class="col-md-12">
<h2>Title of the box</h2>
</div>
</div>
</div>
<div class="col-md-12 flex">
<div class="row flex">
<div class="col-md-6">
<div class="statbox">
<div class="absolute-center">
<h3>Revelant</h3>
<p>lorem</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="statbox">
<div class="absolute-center">
<h3>Revelant data</h3>
<p>Lorem ipsum</p>
</div>
</div>
</div>
</div>
</div>
</div>
The full script is availlable at http://codepen.io/joe_desmeules/pen/LRBKEp
We are using Bootstrap 3.7.
We are using Scss.
Im not interested using Jquery to fix the issue (we use Angular2)
The data will be dynamic. I can't use fixed height to fix the issue.
The provided codepen is a prototype, with placeholder color, i promise the result will have prettier colors :).
The weird padding is probably caused by the title of the box, but i dont know how to fix it.
Removing the title, and edit the CSS of the .greybox fix the issue
We need to keep the title in the final result.
Thank you for helping me, im out of ideas!
(Sorry, english isn't my first language)
I have update your css(scss), it dont have any padding or white space which u were pointing in ur image, see codepen here
h2{
margin: 0;
}
html,
body {
padding: 10px;
.greybox {
background-color: #c7c7c7;
padding-bottom: 20px;
margin: 0 10px 300px;
border-radius: 10px;
}
.statbox {
background-color: #f1f1f1;
padding: 10px;
border-radius: 10px;
height: 100%;
width: 100%;
text-align: center;
display: table;
bottom: 0px;
h3 {
font-weight: bold;
color: #1155cc;
margin: 0;
}
}
.flex {
display: flex;
//flex-direction: row;
//justify-content: space-around;
height: 100%;
width: 100%;
margin: 0;
}
.absolute-center {
display: table-cell;
vertical-align: top;
text-align: center;
height: 100%;
padding: 0;
margin: 0;
}
}
Related
I am trying to put a line of text underneath the first image in an horizontal scroll. However, each time I try, it inserts the text mid way down the page and doesn't line up with the image.
I have attached my code below. Would someone be able to help and let me know the best way to achieve the above.
Edit Please find an image attached of what I am trying to achieve.
Thank you in advance. Esmé
* {
margin: 0;
padding: 0;
line-height: inherit;
}
.horizontal_slider {
display: block;
width: 100%;
overflow-x: scroll;
padding: 0px;
box-sizing: border-box;
background-color: #fff;
line-height: 25em;
}
.horizontal_slider_video {
display: block;
width: 100%;
overflow-x: hidden;
padding: 0px;
box-sizing: border-box;
background-color: #fff;
line-height: 25em;
}
.horizontal_slider::-webkit-scrollbar {
display: none;
}
/* for ms*/
.horizontal_slider {
-ms-overflow-style: none;
}
.slider_container {
display: block;
white-space: nowrap;
}
.item {
display: inline-block;
margin-right: 10px;
}
.item img {
width: px;
height: 850px;
object-fit: cover;
}
<div class="slider_container">
<div class="horizontal_slider">
<div class="slider_container">
<div style="text-align: left">
<h2>Side by side sisters</h2>
</div>
<div class="item">
<img src="https://freight.cargo.site/t/original/i/0b6e5d416b8d2666e95ad95076f5a051e7c744345a0c66f43667f08f1a2619d6/0007-copy.jpg">
</div>
<div class="item">
<img src="https://freight.cargo.site/t/original/i/21fae0988d8a0ae94a7dabcf10286fd8fc6e0488a3801de8017c2932024f46bb/0008-copy.jpg">
</div>
<div class="item">
<img src="https://freight.cargo.site/t/original/i/d045fce91bf44d863d7e5221f7ec9b61dbfe8d74145cb65120cbf7302f0ebbab/0006.jpg">
</div>
<div class="item">
<img src="https://freight.cargo.site/t/original/i/d045fce91bf44d863d7e5221f7ec9b61dbfe8d74145cb65120cbf7302f0ebbab/0006.jpg">
</div>
<div class="item">
<img src="https://freight.cargo.site/t/original/i/d045fce91bf44d863d7e5221f7ec9b61dbfe8d74145cb65120cbf7302f0ebbab/0006.jpg">
</div>
<img src="https://freight.cargo.site/t/original/i/d045fce91bf44d863d7e5221f7ec9b61dbfe8d74145cb65120cbf7302f0ebbab/0006.jpg">
</div>
</div>
</div>
The semantically correct way to do this is to wrap each image in a figure element and include a figcaption for the text. So something like:
<figure>
<img src="image.jpg" alt="image descriptor">
<figcaption>The caption that goes below the image</figcaption>
</figure>
You will no doubt need to adjust the css to make this look correct.
I have mat dialog box in Angular project and I want to make 1 row at the top and 3 row at the bottom just like the picture below but some reason I can't make it work. Also I don't want horizontal scroll bar and trying to hide it by playing with the width but I'm not sure why it's still there. Any suggestion
HTML
<div mat-dialog-content class="dialog-container">
<div class="column">
<div class="header">Tops</div>
</div>
<div class="parent">
<div class="left">
<div class="sub-header">Left</div>
<div style="background-color: darkblue;">
<div></div>
</div>
</div>
<div class="center">
<div class="sub-header">Center</div>
</div>
<div class="right">
<div class="sub-header">Right</div>
</div>
</div>
</div>
CSS
.dialog-container{
width: 1000px;
height:1000px;
overflow-x:hidden;
}
.header{
position: relative;
font-size: 20px;
text-align: center;
font-family: 'Raleway';
}
.button{
margin-top: 15px;
align-items: center;
}
.clickable {
cursor: pointer;
}
.parent {
display: flex;
overflow: hidden;
}
.column{
display: flex;
flex-direction: column;
background-color: blue;
}
.left {
width: 200px;
background-color: green;
}
.right {
width: 300px ;
background-color: blue;
}
.center{
width: 300px;
background-color: red;
}
.header{
font-size: 30px;
font-family: "Raleway-ExtraLight";
padding: 30px;
}
.sub-header{
font-size: 20px;
margin-top: 25px;
font-weight: bold;
}
Right now it look like this
The final design I want to achieve
I'm not sure how many columns or rows will be needed to achieve it like the final design but I playing around for now. Any suggestion will be really helpful.
You could use mat-grid. You just have to define your row and cols and that's it.
You will have 4 cols and 4rows. Your buttons at the bottom will go in the mat-dialog-actions div made for this.
Here is how you could do with mat-grid-list : Demo on StackBlitz
If the demo is nto working, here the code so you can try it :
html:
<mat-grid-list cols="18" rowHeight="1:3">
<mat-grid-tile [colspan]="3">Map Insights</mat-grid-tile>
<mat-grid-tile [colspan]="7">
<input type="text" placeholder="blablabla" />
</mat-grid-tile>
<mat-grid-tile></mat-grid-tile>
<mat-grid-tile [colspan]="7"><i>Blablablabla your text in italic</i></mat-grid-tile>
<mat-grid-tile [rowspan]="5" [colspan]="3">Your side bar</mat-grid-tile>
<mat-grid-tile [rowspan]="5" [colspan]="7"></mat-grid-tile>
<mat-grid-tile [rowspan]="5">=></mat-grid-tile>
<mat-grid-tile [rowspan]="5" [colspan]="7"></mat-grid-tile>
</mat-grid-list>
css:
mat-grid-tile {
background: lightblue;
}
Css is just here to show the blocks ;)
I have no idea why does this happen. The only way I could fix this is to put a load of breaks after the text, but obviously this is not an acceptable solution.
Isolated CSS:
.center_column {
max-width: 892px;
float: left;
}
.content {
width: 892px;
background-color: #FFF;
background-image: url("style/contentpost.png");
background-repeat: no-repeat;
border-style: solid;
border-width: 2px;
border-color: #7699bb;
border-radius: 10px;
}
.content_wrap {
margin-top: 40px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
text-align: left;
}
.text {
width: 100%;
margin-top: 20px;
text-align: justify;
text-justify: distribute;
font-weight: normal;
font-size: 16px;
}
Isolated HTML:
<div class="center_column">
<div class="content">
<div class="content_wrap">
<div class="text">
<img src="image">Text
</div>
</div>
</div>
</div>
Why does this happen? Could anybody tell me how to fix that?
Thank you in advance :)
This will force the browser to calculate the height of a div containing float:
.text{
overflow: hidden;
}
Also, google for clearfix, if you don't want overflow:hidden for some reason.
float: left; is your problem ,
add :
<div class="clear"></div>
css:
.clear {
clear: both;
}
See you are not done with your entire layout yet. Try this layout and style..
<div class="center_column">
<div class="content">
<div class="content_wrap">
<img class="pic" />
<div class="text">TEXT</div>
</div >
</div>
<div class="footer" >FOOTER</div>
</div>
Add this to your existing styles
.pic {
float:left;
}
.footer {
clear: both;
}
FLOAT will actually float everything after it, adding CLEAR both, left or right, will clean floating problems. In other words, ends the floating effect.
It's because of your
float : left;
You need to add this
<div class="clear"></div>
below your image.
And add this to your css file
.clear { clear : both; }
You can use a fixed image width and height in CSS, or use background position and size property in CSS.
Add a <div> that clears the floating:
<div class="center_column">
<div class="content">
<div class="content_wrap">
<div class="text">
<img src="image">Text
<div style="clear: both;"></div>
</div>
</div>
</div>
</div>
I get an unwanted margin between block1 and block2 with display: inline-block style. See this jsFiddle.
HTML
<div id="container">
<div id="innercontainer">
<div id="block1">
block1
</div>
<div id="block2">
block2
</div>
</div>
</div>
CSS
* {
margin: 0px;
padding: 0px;
}
#container {
background-color: #f00;
width: 100%;
height: 200px;
}
#innercontainer {
background-color: #0f0;
width: 200px;
height: 200px;
margin: 0px auto;
}
#block1, #block2 {
display: inline-block;
background-color: #00f;
height: 200px;
}
The margin disappears when I change the HTML to this:
<div id="container">
<div id="innercontainer">
<div id="block1">
block1
</div><div id="block2">
block2
</div>
</div>
</div>
or this:
<div id="container">
<div id="innercontainer">
<div id="block1">
block1
</div><!--
--><div id="block2">
block2
</div>
</div>
</div>
While I prefer the latter, I still do wonder if anyone knows a solution so I can use the original HTML, but no whitespace shows up in innercontainer. Also note that I want to avoid setting float: left; on both block1 and block2 or making them floating by position: absolute|relative because that generates other problems in my layout. Any ideas?
EDIT
Ok, so I had more trouble with my layout. When I added an image to block1, the whole block moved down, very strange (see jsFiddle). I am now using float: left and will have to figure out how I can add a div that consumes the free-space on the right.
Update this part of css :
#block1, #block2 {
display: block;
float: left;
background-color: #00f;
height: 200px;
}
When you are inline, spaces take space!
EDIT :
To be safe change this part of HTML
<div id="container">
<div id="innercontainer">
<div id="block1">
block1
</div>
<div id="block2">
block2
</div>
<div style="clear: both"></div>
</div>
If you want to use display: inline-block;. You need to close gap between tags like you mention. Because The it self are treated as inline-elements also. When you have a space or line-break between two tags would create a gap between them.
You can fix this by set font-size of a surrounding container to 0 and set them back in child node.
#innercontainer {
background-color: #0f0;
width: 200px;
height: 200px;
margin: 0px auto;
font-size: 0px;
}
#block1, #block2 {
display: inline-block;
background-color: #00f;
height: 200px;
font-size: 15px;
}
http://jsfiddle.net/SbUwt/27/
In my code below, case #1 works correctly. The "advice-area" div stays to the right of the "rating-box".
However, case #2 does not work when the text extends beyond one line. This causes the "advice-area" div to move below the "rating-box"
What is the best way to fix this? Thanks.
<html>
<head>
<style type="text/css">
.wrapper {
width: 400px;
list-style: none;
}
.row {
border-bottom: 1px solid #E5E5E5;
padding: 15px 0;
font-size: 14px;
clear: both;
}
.rating-box {
float: left;
height: 70px;
position: relative;
width: 60px;
}
.thumbs {
float: right;
width: 20px;
}
.number {
position: absolute;
top: 16px;
left: 5px;
}
.advice-area {
display: inline-block;
margin-left: 35px;
}
.advice-content {
font-size: 16px;
margin: 0 0 10px 0;
}
.advice-action {
display: inline-block;
}
.add-box {
display: inline;
margin-left: 30px;
}
.add-box a {
display: inline-block;
}
.share-button {
display: inline;
margin-left: 30px;
cursor: pointer;
}
.flag {
display: inline;
margin-left: 30px;
cursor: pointer;
}
</style>
</head>
<body>
<ul class="wrapper">
<li class="row">
<div class="rating-box">
<div class="thumbs">
<div> Up </div>
<div> Down </div>
</div>
<div class="number">1</div>
</div>
<div class="advice-area">
<div class="advice-content">Case #1: This is correct</div>
<div class="advice-action">
<div class="add-box">Plan</div>
<div class="share-button"> Share </div>
<div class="flag"> Flag </div>
</div>
</div>
</li>
<li class="row">
<div class="rating-box">
<div class="thumbs">
<div> Up </div>
<div> Down </div>
</div>
<div class="number">2</div>
</div>
<div class="advice-area">
<div class="advice-content">Case #2: But this really long text does not want to stay right next to the "Up" and "Down" links</div>
<div class="advice-action">
<div class="add-box">Plan</div>
<div class="share-button"> Share </div>
<div class="flag"> Flag </div>
</div>
</div>
</li>
</ul>
</body>
I'd restrict the width for the .advice-content or .advice-area div (or whatever div is around the content you're floating).
When you enter text into a floated div the div will auto-size its width accordingly, and if it expands too wide it'll automatically wrap over to the next line. Think about how wrapping works for words in text.
So, all you need to do is to restrict the width of that particular div, and it'll never grow wide enough to wrap to the next line.
Unless if you're in IE: in which case it'll do whatever the hell it wants ;)
Floating elements, rather than inline blocks, are probably what you want in this situation. I managed to get what looks like a useful outcome by moving the number div above the up/down div in the code, and then floating both to the left. I then tweaked the margins until the spacing looked decent.
CSS changes:
.number {
float: left;
}
.thumbs {
float: left;
width: 20px;
margin-left: 20px;
}
.advice-area {
margin-left: 80px;
}
HTML changes:
<div class="rating-box">
<div class="number">1</div>
<div class="thumbs">
<div> Up </div>
<div> Down </div>
</div>
</div>
limit the width on .advice-content and it will show how you want it to.
.advice-content {
font-size: 16px;
margin: 0 0 10px 0;
width:300px;
}
worked for me in IE7 & 8 / Firefox / Opera / Chrome / Safari