I'm having trouble aligning text when the window is resized, e.g. on mobile.
Here's the HTML:
.count-panel {
float: left;
width: 64px;
border: 1px #888 solid;
}
.count {
font: 15px/18px Roboto, sans-serif;
font-size: 42px;
}
.message {
font-size: 20px;
}
.row {
clear: both;
margin-bottom: 16px;
}
<div class='table'>
<div class='row'>
<div class='count-panel'>
<span class='count'>1</span>
</div>
<div class='message'>This is line one</div>
</div>
<div class='row'>
<div class='count-panel'>
<span class='count'>2</span>
</div>
<div class='message'>This is line two which is longer than the rest so it can test wrapping</div>
</div>
<div class='row'>
<div class='count-panel'>
<span class='count'>3</span>
</div>
<div class='message'>This is line three</div>
</div>
At larger sizes: Larger
At smaller sizes: Smaller
I need the text in the second line to align with the others and not wrap hard left as in the image. Thanks.
That behaviour on mobile is due to the float applied to the .count-panel element. You could instead use flexbox and clean a bit the css code, like so:
Codepen demo
.count-panel {
border: 1px #888 solid;
flex: 0 0 64px;
}
.count {
font: 15px/18px Roboto, sans-serif;
font-size: 42px;
}
.message {
font-size: 20px;
}
.row {
margin-bottom: 16px;
display: flex;
}
It's just your float: left that's taking the count-panel out of sync.
I have replaced your example with display: flex instead. I would suggest avoiding float when positioning your elements as it was never intended to be used for layout. Flex is a much cleaner solution and I think it gives you more flexibility of layout choices. :-)
I've also amended the HTML layout slightly to include the border on the number itself so that it doesn't stretch the full size of the text content on smaller devices.
.count {
font: 42px Roboto, sans-serif;
min-width: 64px;
border: 1px #888 solid;
text-align: center;
max-height: max-content;
}
.message {
font-size: 20px;
}
.row {
display: flex;
flex-direction: row;
margin: 0 10px 16px 0;
}
<div class='table'>
<div class="row">
<span class="count">1</span>
<div class="message">This is line one</div>
</div>
<div class="row">
<span class="count">2</span>
<div class="message">This is line two which is longer than the rest so it can test wrapping</div>
</div>
<div class="row">
<span class="count">3</span>
<div class="message">This is line three</div>
</div>
</div>
Related
I have an HTML structure with many divs next to each other or below each other that all have an outline. The problem is, these outlines do not overlap, but are shown next to each other (or on top of each other). To illustrate, this is what happens:
This is my code, with added nth-child() selectors to clearly show the issue:
.wrapper {
/* getting rid of the 'inline-block whitespace' */
font-size: 0;
white-space: nowrap;
}
.cell {
display: inline-block;
font-size: 2rem;
padding: 2px;
width: 100px;
}
.cell:nth-child(even) {
outline: 6px solid blue;
}
.cell:nth-child(odd) {
outline: 6px solid red;
}
<div class="wrapper">
<div>
<div class="cell">
one
</div>
<div class="cell">
two
</div>
</div>
<div>
<div class="cell">
three
</div>
<div class="cell">
four
</div>
</div>
</div>
My question is: How to make these outlines overlap so no 'doubles' are shown?
Update: using half the margin of the width of the outline on the cells does not always work when the outline width is 1px. For example, when the padding of .cell is 4px this is the result (when you zoom in you will see the two lines).
Update2: it seems this is a bug with Firefox on a 4k display. Running this in Firefox on a display with a HD resolution or in another browser (tested Chrome) works.
apply a margin equal to half the outline:
.wrapper {
/* getting rid of the 'inline-block whitespace' */
font-size: 0;
white-space: nowrap;
}
.cell {
display: inline-block;
font-size: 2rem;
padding: 2px;
width: 100px;
margin: 3px; /* added */
}
.cell:nth-child(even) {
outline: 6px solid blue;
}
.cell:nth-child(odd) {
outline: 6px solid red;
}
<div class="wrapper">
<div>
<div class="cell">
one
</div>
<div class="cell">
two
</div>
</div>
<div>
<div class="cell">
three
</div>
<div class="cell">
four
</div>
</div>
</div>
Or use margin on one side:
.wrapper {
/* getting rid of the 'inline-block whitespace' */
font-size: 0;
white-space: nowrap;
}
.cell {
display: inline-block;
font-size: 2rem;
padding: 2px;
width: 100px;
margin:0 6px 6px 0; /* added */
}
.cell:nth-child(even) {
outline: 6px solid blue;
}
.cell:nth-child(odd) {
outline: 6px solid red;
}
<div class="wrapper">
<div>
<div class="cell">
one
</div>
<div class="cell">
two
</div>
</div>
<div>
<div class="cell">
three
</div>
<div class="cell">
four
</div>
</div>
</div>
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 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;
}
}
This jsFiddle shows the problem.
The spacing (shown in white) between the innermost divs (shown in blue) should be the same as the outermost div's padding (20px, shown in green), but it's not hard to see that it's greater.
This is can be seen even more clearly in the lower series, in which a translucent 20px outline (in light orange) has been added to the even-numbered innermost divs.
Why is there extra spacing between the innermost divs?
And now, the obligatory code:
<div class="outermost">
<div class="row">
<div class="innermost"></div>
<div class="innermost"></div>
<div class="innermost"></div>
<div class="innermost"></div>
<div class="innermost"></div>
<div class="innermost"></div>
</div>
</div>
<div class="outermost">
<div class="row">
<div class="innermost"></div>
<div class="innermost"></div>
<div class="innermost"></div>
<div class="innermost"></div>
<div class="innermost"></div>
<div class="innermost"></div>
</div>
</div>
html {
font-family: consolas, monaco, courier, monospace;
font-size: 16px;
}
body {
padding: 5px;
max-width: 530px;
}
div {
margin: 0;
border: 0;
}
div:not(.row) {
display: inline-block;
vertical-align: top;
overflow: auto;
padding: 20px;
cursor: default;
}
.outermost {
background: #c3cd84;
}
.row {
display: block;
padding: 0;
white-space: nowrap;
background: #fff;
}
div.row > :not(:first-child) {
margin-left: 20px;
}
.innermost {
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
background: #90b2c0;
}
.outermost:last-child {
margin-top: 20px;
}
.outermost:last-child .innermost:nth-child(even) {
outline: 20px solid rgba(243, 204, 152, 0.6);
}
Inline elements are sensitive to the white space in your code. One way to deal with this is to simply remove the white space:
</div><div class="innermost">
jsFiddle example
Another option is to use HTML comments:
</div><!--
--><div class="innermost">
jsFiddle example
Yet another way is to set the font size on the parent element to zero:
.row {
display: block;
padding: 0;
white-space: nowrap;
background: #fff;
font-size:0;
}
jsFiddle example
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