I have a simple html document (see - https://5fa3b1d135e99.htmlsave.net). When I try to print (cmd/ctrl+P) this document, chrome evaluate the print size as 31,776 pages:
After some research, when removing the gap property from .block-row, it's fixed, but I have no idea what's the cause, plus - I do need the gap.
Any ideas?
In case the link gets expired, this is the output:
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;600;700');
#media print {
* {
-webkit-print-color-adjust: exact;
}
.block-row,
.block-signature {
break-inside: avoid;
}
}
html,
body {
margin: 0;
}
body {
font-size: 10px;
font-family: "Open Sans";
}
.page-header {
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid #eaeaea;
padding-bottom: 8px;
margin: 0 24px 24px;
width: 100%;
}
.page-header > div {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.page-header > div > .a-logo-container,
.page-header > div > .other-logo-container {
flex: 1;
}
.page-header > div > .a-logo-container {
display: flex;
align-items: center;
justify-content: center;
}
.page-header .a-logo {
display: block;
width: 79px;
height: 20px;
}
.page-header .other-logo-container {
display: flex;
align-items: center;
}
.page-header .other-logo {
background: none no-repeat center center / contain;
display: block;
width: 40px;
height: 20px;
}
.page-header .other-logo-container {
gap: 8px;
}
.page-header .other-logo-container h2 {
font-size: 10px;
}
.page-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
font-size: 8px;
font-weight: 400;
width: 100%;
margin: 0 24px;
color: #999;
}
.block-box {
padding: 16px 24px;
background-color: #f9f9f9;
border-radius: 8px;
margin: 16px 0;
}
.block-box .block-column {
gap: 10px;
}
.block-row {
display: flex;
gap: 32px;
}
.block-row > * {
flex: 1;
}
.block-row > * + * {
margin: 16px;
}
.block-column {
display: flex;
flex-direction: column;
}
.block-text,
.block-start-end-time {
display: flex;
flex-direction: column;
gap: 6px;
}
.block-inline-key-value {
display: flex;
gap: 16px;
}
.block-inline-key-value > strong {
font-weight: 600;
}
.block-inline-title {
display: block;
border-bottom: 2px solid;
line-height: 25px;
font-weight: 600;
}
.block-container .label {
white-space: nowrap;
}
.block-title {
background-color: #f9f9f9;
padding: 6px 12px;
border-radius: 8px;
font-weight: 600;
}
.block-item {
display: block;
align-items: center;
}
.block-radios {
display: flex;
flex-direction: column;
gap: 8px;
}
.block-radios .checkbox {
width: 12px;
height: 12px;
border-radius: 100%;
border: 1px solid #c4c4c4;
box-shadow: 0 0 0 1px #fff inset;
}
.block-radios .checkbox[data-checked="true"] {
background-color: #292929;
}
.block-radios > .block-container {
display: flex;
}
.block-radios > .block-container > * {
width: 100%;
}
.block-checkboxes {
display: flex;
flex-direction: column;
gap: 8px;
}
.block-checkboxes > .block-container {
display: grid;
flex-wrap: wrap;
gap: 10px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.block-checkboxes .checkbox {
width: 12px;
height: 12px;
border: 1px solid #c4c4c4;
border-radius: 2px;
}
.block-checkboxes .checkbox[data-checked="true"] {
border-color: #292929;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAHCAYAAADam2dgAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABISURBVHgBfYzBDQAQEASvBCUoQUk6oRSlqIgSlgvigrPJfCaTJVIGwHcMfYKAsSylY46gLsfSTMGkKxBPEXt3cIRFDURoX74BA3ZgYkt9TZoAAAAASUVORK5CYII=) no-repeat center center #292929;
}
.block-signature {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 12px;
min-height: 100px;
}
.block-signature .signature-title {
border-top: 2px solid;
width: 100%;
text-align: center;
padding: 8px;
box-sizing: border-box;
max-width: 50vw;
}
.block-signature .signature-container > img {
transform: translateY(50%);
height: 80px;
}
<!DOCTYPE html>
<html>
<body>
<section class="blocks">
<div class="block-row">
<div class="block-radios">
<div class="block-inline-title">Radio</div>
<div class="block-container">
</div>
</div>
</div>
<div class="block-row">
<div class="block-title">Main Header</div>
</div>
<div class="block-row">
<div class="block-radios">
<div class="block-inline-title">Drop Down</div>
<div class="block-container">
</div>
</div>
</div>
<div class="block-row">
<div class="block-text">
<div class="block-inline-title">Short Text</div>
<div class="block-container">
<div class="block-item">lorem ipsum</div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-text">
<div class="block-inline-title">Number</div>
<div class="block-container">
<div class="block-item">100</div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-row">
<div class="block-signature">
<div class="signature-container"><strong>Tracey Kutch</strong>
</div>
<div class="signature-title">Patient Name</div>
</div>
<div class="block-signature">
<div class="signature-container">None</div>
<div class="signature-title">Signature</div>
</div>
<div class="block-signature">
<div class="signature-container"><strong>2020-11-04T00:00:00Z</strong>
</div>
<div class="signature-title">Date</div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-start-end-time">
<div class="block-inline-title">Time</div>
<div class="block-container">
<div class="block-item">Invalid Date</div>
</div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-title">TODO Image #Newbie012</div>
</div>
<div class="block-row">
<div class="block-title">TODO Chart #Newbie012</div>
</div>
<div class="block-row">
<div class="block-row"></div>
</div>
<div class="block-row">
<div class="block-checkboxes">
<div class="block-inline-title">Multiple Select (check)</div>
<div class="block-container">
</div>
</div>
</div>
<div class="block-row">
<div class="block-radios">
<div class="block-inline-title">Yes/No</div>
<div class="block-container">
</div>
</div>
</div>
<div class="block-row">
<div class="block-title">Sub Header</div>
</div>
<div class="block-row">
<div class="block-text">
<div class="block-inline-title">Long Text</div>
<div class="block-container">
<div class="block-item">TypeScript supports JSX transpilation and code analysis. If you are unfamiliar with JSX here is an excerpt from the official website: JSX is an XML-like syntax extension to ECMAScript without any defined semantics. It's NOT intended
to be implemented by engines or browsers. It's NOT a proposal to incorporate JSX into the ECMAScript spec itself. It's intended to be used by various preprocessors (transpilers) to transform these tokens into standard ECMAScript.
The motivation behind JSX is to allow users to write HTML like views in JavaScript so that you can: Have the view Type Checked by the same code that is going to check your JavaScript Have the view be aware of the context it is
going to operate under (i.e. strengthen the controller-view connection in traditional MVC). Reuse JavaScript patterns for HTML maintenance e.g. Array.prototype.map, ?:, switch etc instead of creating new (and probably poorly typed)
alternatives. This decreases the chances of errors and increases the maintainability of your user interfaces. The main consumer of JSX at this point is ReactJS from facebook. This is the usage of JSX that we will discuss here.</div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-row">
<div class="block-signature">
<div class="signature-container"><strong>Eliya Local</strong>
</div>
<div class="signature-title">Employee Name</div>
</div>
<div class="block-signature">
<div class="signature-container">None</div>
<div class="signature-title">Signature</div>
</div>
<div class="block-signature">
<div class="signature-container"><strong>2020-11-04T00:00:00Z</strong>
</div>
<div class="signature-title">Date</div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-row">
<div class="block-signature">
<div class="signature-container"><strong>Signature</strong>
</div>
<div class="signature-title">Patient Name</div>
</div>
<div class="block-signature">
<div class="signature-container">None</div>
<div class="signature-title">Signature</div>
</div>
<div class="block-signature">
<div class="signature-container"><strong>2020-11-04T00:00:00Z</strong>
</div>
<div class="signature-title">Date</div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-text">
<div class="block-inline-title">Date</div>
<div class="block-container">
<div class="block-item">12/Sa/1996</div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-start-end-time">
<div class="block-inline-title">Time</div>
<div class="block-container">
<div class="block-item">Invalid Date</div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-text">
<div class="block-inline-title">Add Free Text</div>
<div class="block-container">
<div class="block-item"></div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-title">TODO Chart #Newbie012</div>
</div>
<div class="block-row">
<div class="block-text">
<div class="block-inline-title">Blood Pressure</div>
<div class="block-container">
<div class="block-item">100 / 90</div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-row"></div>
</div>
<div class="block-row">
<div class="block-row"></div>
</div>
<div class="block-row">
<div class="block-row"></div>
</div>
</section>
</body>
</html>
As pointed out by #kaiido the culprit seems to be the empty .block-row with the gap property.
We encountered the same issue and posted a bug in Chrome see link.
Our solution was to remove the gap property when the container is empty.
In your case
.block-row { display: flex; gap: 32px; }
.block-row:empty { gap: unset; }
I didn't have any empty tags and was still getting this issue. So I just removed gap entirely when in print mode and that worked.
#media print {
* {
gap: 0 !important;
}
}
Related
I managed to make a mockup of a timeline with blocks. It has a look that is ok. You can run the snippet to take a look or see this image:
.list {
display: flex;
flex-direction: column;
}
.item {
display: flex;
}
.item:not(:last-child) {
margin-bottom: 10px;
}
.left {
display: flex;
flex-direction: column;
}
.right {
flex: 1;
margin-left: 10px;
}
.border {
width: 1px;
border-radius: 10px;
background: black;
height: 100%;
margin: 2px auto;
}
.bubble,
.big-bubble {
padding: 10px 20px;
border: 1px solid black;
border-radius: 5px;
}
.big-bubble {
padding: 30px 0;
border: 1px solid black;
border-radius: 5px;
}
<div class="list">
<div class="item">
<div class="left">
<div class="bubble"></div>
<div class="border"></div>
</div>
<div class="right">
<div class="big-bubble"></div>
</div>
</div>
<div class="item">
<div class="left">
<div class="bubble"></div>
<div class="border"></div>
</div>
<div class="right">
<div class="big-bubble"></div>
</div>
</div>
<div class="item">
<div class="left">
<div class="bubble"></div>
<div class="border"></div>
</div>
<div class="right">
<div class="big-bubble"></div>
</div>
</div>
</div>
But I'm not satisfied with the result. I would like to align my timeline like this. The idea would be that the info bubble on the right starts in the vertical middle of the bubble on the left.
I don't see how to do it with flex.
Why not just give .right a margin-top that is equal to half the height of .left (11px)?
.list {
display: flex;
flex-direction: column;
}
.item {
display: flex;
}
.item:not(:last-child) {
margin-bottom: 10px;
}
.left {
display: flex;
flex-direction: column;
}
.right {
flex: 1;
margin-left: 10px;
margin-top: 11px;
}
.border {
width: 1px;
border-radius: 10px;
background: black;
height: 100%;
margin: 2px auto;
}
.bubble,
.big-bubble {
padding: 10px 20px;
border: 1px solid black;
border-radius: 5px;
}
.big-bubble {
padding: 30px 0;
border: 1px solid black;
border-radius: 5px;
}
<div class="list">
<div class="item">
<div class="left">
<div class="bubble"></div>
<div class="border"></div>
</div>
<div class="right">
<div class="big-bubble"></div>
</div>
</div>
<div class="item">
<div class="left">
<div class="bubble"></div>
<div class="border"></div>
</div>
<div class="right">
<div class="big-bubble"></div>
</div>
</div>
<div class="item">
<div class="left">
<div class="bubble"></div>
<div class="border"></div>
</div>
<div class="right">
<div class="big-bubble"></div>
</div>
</div>
</div>
Alteratively, if you don't want the increased gap, you can just give .left a margin-top of -11px:
.list {
display: flex;
flex-direction: column;
}
.item {
display: flex;
}
.item:not(:last-child) {
margin-bottom: 10px;
}
.left {
display: flex;
flex-direction: column;
margin-top: -11px;
}
.right {
flex: 1;
margin-left: 10px;
}
.border {
width: 1px;
border-radius: 10px;
background: black;
height: 100%;
margin: 2px auto;
}
.bubble,
.big-bubble {
padding: 10px 20px;
border: 1px solid black;
border-radius: 5px;
}
.big-bubble {
padding: 30px 0;
border: 1px solid black;
border-radius: 5px;
}
<div class="list">
<div class="item">
<div class="left">
<div class="bubble"></div>
<div class="border"></div>
</div>
<div class="right">
<div class="big-bubble"></div>
</div>
</div>
<div class="item">
<div class="left">
<div class="bubble"></div>
<div class="border"></div>
</div>
<div class="right">
<div class="big-bubble"></div>
</div>
</div>
<div class="item">
<div class="left">
<div class="bubble"></div>
<div class="border"></div>
</div>
<div class="right">
<div class="big-bubble"></div>
</div>
</div>
</div>
I'm trying to clone the Google home page and I designed the footer using flexbox, but now I can't position it at the bottom of the page. How can I fix that or is there any other technique to tackle this problem.
Here is the screenshot and code of the page. I know it's messy and lack of design. First I just want to get the structure right.
screenshot of the page
```html
<body>
<div class="heading">
<div></div>
<div class="gmail">
<p>Gmail</p>
</div>
<div class="images">
<p>images</p>
</div>
<div class="gapps">
<button></button>
</div>
<div class="dp">
<p>dp</p>
</div>
</div>
<div class="container">
<div class="google-logo">
<img
src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
alt="Google logo"
/>
</div>
<div class="search-bar">
<input
type="search"
name="q"
aria-label="Search through site content"
/>
</div>
<div class="search-buttons">
<div class="search-button">
<button>Google Search</button>
</div>
<div class="feeling-lucky">
<button>I'm Feeling Lucky</button>
</div>
</div>
</div>
<div class="footer">
<div class="srilanka">
<p>Sri Lanka</p>
</div>
<div class="footer-bottom">
<div class="footer-bottom-left">
<div class="about">
<p>About</p>
</div>
<div class="advertising">
<p>Advertising</p>
</div>
<div class="business">
<p>Business</p>
</div>
<div class="how-search-works">
<p>How Search Works</p>
</div>
</div>
<div class="footer-bottom-right">
<div class="privacy">
<p>Privacy</p>
</div>
<div class="terms">
<p>Terms</p>
</div>
<div class="settings">
<p>Settings</p>
</div>
</div>
</div>
</div>
</body>
```
```css
body {
height: 100%;
}
body {
font-size: 14px;
font-family: arial, sans-serif;
color: #222;
}
.heading {
display: flex;
justify-content: flex-end;
padding-bottom: 100px;
}
.gmail {
padding: 0 15px;
}
.images {
padding: 0 15px;
}
.gapps {
padding: 0 15px;
}
.dp {
padding: 0 15px;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.google-logo {
padding-bottom: 3vh;
}
.search-bar {
padding-bottom: 3vh;
}
.search-buttons {
display: flex;
justify-content: center;
}
.feeling-lucky {
padding-left: 2vh;
}
.footer {
display: flex;
flex-direction: column;
}
.footer-bottom {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.footer-bottom-left {
display: flex;
}
.srilanka {
padding: 0 15px;
}
.about {
padding: 0 15px;
}
.advertising {
padding: 0 15px;
}
.business {
padding: 0 15px;
}
.how-search-works {
padding: 0 15px;
}
.privacy {
padding: 0 15px;
}
.terms {
padding: 0 15px;
}
.settings {
padding: 0 15px;
}
.footer-bottom-right {
display: flex;
justify-items: flex-end;
}
```
Come on broh, add a lil bit of semantics there
<html>
<head></head>
<body>
<header></header>
<main></main>
<footer class=“footer”></footer>
</body>
It doesn’t matter if you use: flex, flow, grid
as those properties are defined with display. If you want to set your element at the bottom, we are talking about a position.
So you need to set its position
.footer {
position: fixed;
left:0;
bottom:0;
width:100%;
}
It's better to post your code as well, not just a screenshot.
btw you can use the following code on your footer and it will stick to the bottom of your page
footer{
position:fixed;
bottom: 0
width: 100%
}
So iam a first time HTML and CSS user, and was making a website using a YouTube video, however i reached a stage where i want to show the backround image onto the screen however ive followed the video exactly and it only shows my logo image and not the background image.
This was the youtube video : https://youtu.be/5bMdjkfvONE
I got up to 1:00:0 into the video after that it no longer worked like in the video.
/* Master Styles */
body {
margin: 0px;
}
.container {
display: grid;
grid-template-columns: 1fr;
}
/* Nav Styles*/
.nav-wrapper{
display:flex;
justify-content: space-between;
padding: 40px;
}
.left-side{
display:flex;
}
.nav-wrapper > .left-side > div {
margin-right: 20px;
font-size: 0.9em;
text-transform:uppercase;
}
.nav-link-wrapper {
height: 22px;
border-bottom: 1px solid transparent;
transition: border-bottom 0.5s;
}
.nav-link-wrapper a {
color:blue;
text-decoration: none;
transition: color 0.5s;
}
.nav-link-wrapper:hover{
border-bottom: 1px solid black;
}
.nav-link-wrapper a:hover{
color: black;
}
/* Portfolio Styles */
.portfolio-items-wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.portfolio-item-wrapper {
position: relative;
}
.portfolio-img-background {
height: 350px;
width: 100%;
background-size: cover;
background-position: center;
}
.img-text-wrapper {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
padding-left: 100px;
padding-right: 100px;
}
.logo-wrapper img {
width: 50%;
margin-bottom: 20px;
}
.subtitle {
font-weight: 600;
color: darkblue;
}
<!DOCTYPE html>
<html>
<head>
<title>Mathews Joy</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="nav-wrapper">
<div class="left-side">
<div class="nav-link-wrapper">
Personal LinkedIn Page
</div>
<div class="nav-link-wrapper">
Personal Instagram Page
</div>
</div>
<div class="right-side">
<div class="brand">
MATHEWS JOY
</div>
</div>
</div>
<div class="content-wrapper">
<div class="portfolio-items-wrapper">
<div class="portfolio-item-wrapper">
<div class="portfolio-img-backround" style="background-image:url(images/portfolio1.jpg)"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/network.jpg">
</div>
<div class="subtitle">
Technology Intership at the Bright Network (December 2020)
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-backround" style="background-image:url(images/portfolio3.jpg)"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/network.jpg">
</div>
<div class="subtitle">
Certications completed during time at university (2020 - 2023)
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-backround" style="background-image:url(images/portfolio2.jpg)"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/network.jpg">
</div>
<div class="subtitle">
Volunteering and Work Experiences
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
It's because there are no images at the URL's you are using. What's more, you need to apply a height to the elements that have the background images. I only did it for one of them below.
/* Master Styles */
body {
margin: 0px;
}
.container {
display: grid;
grid-template-columns: 1fr;
}
/* Nav Styles*/
.nav-wrapper{
display:flex;
justify-content: space-between;
padding: 40px;
}
.left-side{
display:flex;
}
.nav-wrapper > .left-side > div {
margin-right: 20px;
font-size: 0.9em;
text-transform:uppercase;
}
.nav-link-wrapper {
height: 22px;
border-bottom: 1px solid transparent;
transition: border-bottom 0.5s;
}
.nav-link-wrapper a {
color:blue;
text-decoration: none;
transition: color 0.5s;
}
.nav-link-wrapper:hover{
border-bottom: 1px solid black;
}
.nav-link-wrapper a:hover{
color: black;
}
/* Portfolio Styles */
.portfolio-items-wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.portfolio-item-wrapper {
position: relative;
}
.portfolio-img-background {
height: 350px;
width: 100%;
background-size: cover;
background-position: center;
}
.img-text-wrapper {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
padding-left: 100px;
padding-right: 100px;
}
.logo-wrapper img {
width: 50%;
margin-bottom: 20px;
}
.subtitle {
font-weight: 600;
color: darkblue;
}
<!DOCTYPE html>
<html>
<head>
<title>Mathews Joy</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="nav-wrapper">
<div class="left-side">
<div class="nav-link-wrapper">
Personal LinkedIn Page
</div>
<div class="nav-link-wrapper">
Personal Instagram Page
</div>
</div>
<div class="right-side">
<div class="brand">
MATHEWS JOY
</div>
</div>
</div>
<div class="content-wrapper">
<div class="portfolio-items-wrapper">
<div class="portfolio-item-wrapper">
<div class="portfolio-img-backround" style="background-image:url(images/portfolio1.jpg)"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="https://via.placeholder.com/150
C/O https://placeholder.com/">
</div>
<div class="subtitle">
Technology Intership at the Bright Network (December 2020)
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-backround" style="background-image:url(https://via.placeholder.com/150); height: 200px"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="https://via.placeholder.com/150
C/O https://placeholder.com/">
</div>
<div class="subtitle">
Certications completed during time at university (2020 - 2023)
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-backround" style="background-image:url(images/portfolio2.jpg)"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="https://via.placeholder.com/150
C/O https://placeholder.com/">
</div>
<div class="subtitle">
Volunteering and Work Experiences
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I'm trying to make a layout using flex box and i've tried every combination but i'm not able to achieve what i want to have.
I want this whole "<div class="swpm-login-widget-logged">" to at the center of the container wihout any change in the structutre.
Is that possible to achieve using flex-box.
Current structure:
Required structure:
.swpm-logged-username,
.swpm-logged-status,
.swpm-logged-membership,
.swpm-logged-expiry {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
font-size: 15px;
margin-bottom: 5px;
}
.swpm-logged-username-label,
.swpm-logged-status-label,
.swpm-logged-membership-label,
.swpm-logged-expiry-label {
-webkit-flex-basis: 150px;
-ms-flex-preferred-size: 150px;
flex-basis: 150px
}
.swpm-logged-logout-link a {
display: inline-block;
padding: 5px 15px;
color: #fff;
background-color: #83a83d;
text-decoration: none;
border-radius: 3px;
margin-top: 15px;
}
<div class="swpm-login-widget-logged">
<div class="swpm-logged-username">
<div class="swpm-logged-username-label swpm-logged-label">Logged in as:</div>
<div class="swpm-logged-username-value swpm-logged-value">vikrant negi</div>
</div>
<div class="swpm-logged-status">
<div class="swpm-logged-status-label swpm-logged-label">Account Status:</div>
<div class="swpm-logged-status-value swpm-logged-value">Active</div>
</div>
<div class="swpm-logged-membership">
<div class="swpm-logged-membership-label swpm-logged-label">Membership:</div>
<div class="swpm-logged-membership-value swpm-logged-value">Paid Members</div>
</div>
<div class="swpm-logged-expiry">
<div class="swpm-logged-expiry-label swpm-logged-label">Account Expiry:</div>
<div class="swpm-logged-expiry-value swpm-logged-value">Never</div>
</div>
<div class="swpm-logged-logout-link">
Logout
</div>
</div>
you can add to your css
.swpm-login-widget-logged {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
Try This
.swpm-login-widget-logged {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.swpm-login-widget-inner {
width: auto;
}
.swpm-logged-username,
.swpm-logged-status,
.swpm-logged-membership,
.swpm-logged-expiry {
display: -webkit-box;
font-size: 15px;
margin-bottom: 5px;
}
.swpm-logged-username-label,
.swpm-logged-status-label,
.swpm-logged-membership-label,
.swpm-logged-expiry-label {
-webkit-flex-basis: 150px;
-ms-flex-preferred-size: 150px;
flex-basis: 150px
}
.swpm-logged-logout-link a {
display: inline-block;
padding: 5px 15px;
color: #fff;
background-color: #83a83d;
text-decoration: none;
border-radius: 3px;
margin-top: 15px;
}
<div class="swpm-login-widget-logged">
<div class=".swpm-login-widget-inner">
<div class="swpm-logged-username">
<div class="swpm-logged-username-label swpm-logged-label">Logged in as:</div>
<div class="swpm-logged-username-value swpm-logged-value">vikrant negi</div>
</div>
<div class="swpm-logged-status">
<div class="swpm-logged-status-label swpm-logged-label">Account Status:</div>
<div class="swpm-logged-status-value swpm-logged-value">Active</div>
</div>
<div class="swpm-logged-membership">
<div class="swpm-logged-membership-label swpm-logged-label">Membership:</div>
<div class="swpm-logged-membership-value swpm-logged-value">Paid Members</div>
</div>
<div class="swpm-logged-expiry">
<div class="swpm-logged-expiry-label swpm-logged-label">Account Expiry:</div>
<div class="swpm-logged-expiry-value swpm-logged-value">Never</div>
</div>
<div class="swpm-logged-logout-link">
Logout
</div>
</div>
</div>
I added
{
margin:auto;
width: 255px;
}
to .swpm-login-widget-logged
.swpm-login-widget-logged{
margin:auto;
width: 255px;
}
.swpm-logged-username,
.swpm-logged-status,
.swpm-logged-membership,
.swpm-logged-expiry {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
font-size: 15px;
margin-bottom: 5px;
}
.swpm-logged-username-label,
.swpm-logged-status-label,
.swpm-logged-membership-label,
.swpm-logged-expiry-label {
-webkit-flex-basis: 150px;
-ms-flex-preferred-size: 150px;
flex-basis: 150px
}
.swpm-logged-logout-link a {
display: inline-block;
padding: 5px 15px;
color: #fff;
background-color: #83a83d;
text-decoration: none;
border-radius: 3px;
margin-top: 15px;
}
<div class="swpm-login-widget-logged">
<div class="swpm-logged-username">
<div class="swpm-logged-username-label swpm-logged-label">Logged in as:</div>
<div class="swpm-logged-username-value swpm-logged-value">vikrant negi</div>
</div>
<div class="swpm-logged-status">
<div class="swpm-logged-status-label swpm-logged-label">Account Status:</div>
<div class="swpm-logged-status-value swpm-logged-value">Active</div>
</div>
<div class="swpm-logged-membership">
<div class="swpm-logged-membership-label swpm-logged-label">Membership:</div>
<div class="swpm-logged-membership-value swpm-logged-value">Paid Members</div>
</div>
<div class="swpm-logged-expiry">
<div class="swpm-logged-expiry-label swpm-logged-label">Account Expiry:</div>
<div class="swpm-logged-expiry-value swpm-logged-value">Never</div>
</div>
<div class="swpm-logged-logout-link">
Logout
</div>
</div>
I am trying to display outbound and inbound flight by visualising it using CSS/LESS. The problem is that when Outbound flight has more airport changes then Inbound then line stays at the level of first flight. I want line adjust height dynamically based on the longest route.
Could you please help me to figure out how do achieve required results?
UPDATE: Prepared Plunker example (make a screen wider in order to see it properly)
This is what I've got:
This is what I am trying achive:
LESS:
.time-slice {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
margin-left: 20px;
}
.time-slice > * {
padding: 20px;
}
.circle {
width: 16px;
height: 16px;
box-sizing: content-box;
border-color: #29a8bb;
background: #ffffff;
border-radius: 32px;
display: block;
border: 2px solid blue;
}
.circle-wrap {
position: absolute;
top: 0px;
left: 91px;
z-index: 2;
}
.circle-wrap > .circle {
position: relative;
left: 20px;
}
.date-time {
box-sizing: content-box;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-flex-basis: 100px;
-ms-flex-preferred-size: 100px;
flex-basis: 100px;
text-align: center;
margin-top: -5px;
}
.date,
.time {
max-width: 90px;
color: #999999;
font-size: 13px;
margin-top: 0px;
margin-bottom: 10px;
margin-left: 20px;
}
.time-slice.row:not(:last-child) .point-title {
border-left: 2px solid blue;
padding-left: 15px;
padding-top: 0;
position: relative;
top: 20px;
}
.duration {
margin-left: 50px;
max-width: 90px;
color: #999999;
font-size: 13px;
margin-bottom: 10px;
}
.stop-transit {
border-width: 2px;
color: red;
padding-left: 5px;
margin-left: 20px;
margin-bottom: 10px;
table-layout: fixed;
}
.stop-transit, .transit-path, .wait-time{
padding-right: 10px;
padding-left: 20px;
}
.transit-path {
border-right-style:dotted;
width: 140px;
}
.wait-reason{
text-align: center;
}
.searchResult{
padding: 0px 15px;
}
HTML:
<div id="{{ticket.id}}" style="display:none">
<div class="col-md-6 line">
<h3>OUTBOUND</h3>
<div ng-repeat="departureFlight in ticket.route.departureFlights">
<div class="timeline">
<div class="time-slice row">
<div class="date-time">
<p class="date">{{departureFlight.departureTime | date:"EEE d MMM"}}</p>
<p class="time">{{departureFlight.departureTime | date:"h:mma"}}</p>
</div>
<div class="circle-wrap">
<div class="circle"></div>
</div>
<div class="point-title">
<span>
<b>{{departureFlight.cityFrom}} ({{departureFlight.flyFrom}})</b>
</span>
</div>
</div>
<div class="time-slice row">
<div class="date-time">
<p class="time duration">{{departureFlight.arrivalTime-departureFlight.departureTime | date:"h:mm"}}h</p>
</div>
<div class="point-title">
</div>
</div>
<div class="time-slice row">
<div class="date-time">
<p class="date">{{departureFlight.arrivalTime | date:"EEE d MMM"}}</p>
<p class="time">{{departureFlight.arrivalTime | date:"h:mma"}}</p>
</div>
<div class="circle-wrap">
<div class="circle"></div>
</div>
<div class="point-title">
<span>
<b>{{departureFlight.cityTo}} ({{departureFlight.flyTo}})</b>
</span>
</div>
</div>
</div>
<div ng-if="departureFlight.transferFlight">
<table class="stop-transit">
<tr>
<td class="transit-path">
<div class="wait-reason">Connection change<br>
Long wait <span class="glyphicons glyphicons-airplane">✈</span></div>
</td>
<td class="wait-time">{{departureFlight.departureTime | date:"h:mm"}} hours</td>
</tr>
</table>
</div>
</div>
</div>
<div class="col-md-6">
<h3>INBOUND</h3>
<div ng-repeat="returnFlight in ticket.route.returnFlights">
<div class="timeline">
<div class="time-slice row">
<div class="date-time">
<p class="date">{{returnFlight.departureTime | date:"EEE d MMM"}}</p>
<p class="time">{{returnFlight.departureTime | date:"h:mma"}}</p>
</div>
<div class="circle-wrap">
<div class="circle"></div>
</div>
<div class="point-title">
<span>
<b>{{returnFlight.cityFrom}} ({{returnFlight.flyFrom}})</b>
</span>
</div>
</div>
<div class="time-slice row">
<div class="date-time">
<p class="time duration">{{returnFlight.arrivalTime-returnFlight.departureTime | date:"h:mm"}}h</p>
</div>
<div class="point-title">
</div>
</div>
<div class="time-slice row">
<div class="date-time">
<p class="date">{{returnFlight.arrivalTime | date:"EEE d MMM"}}</p>
<p class="time">{{returnFlight.arrivalTime | date:"h:mma"}}</p>
</div>
<div class="circle-wrap">
<div class="circle"></div>
</div>
<div class="point-title">
<span>
<b>{{returnFlight.cityTo}} ({{returnFlight.flyTo}})</b>
</span>
</div>
</div>
</div>
<div ng-if="returnFlight.transferFlight">
<table class="stop-transit">
<tr>
<td class="transit-path">
<div class="wait-reason">Connection change<br>
Long wait <span class="glyphicons glyphicons-airplane">✈</span></div>
</td>
<td class="wait-time">{{returnFlight.departureTime | date:"h:mm"}} hours</td>
</tr>
</table>
</div>
</div>
</div>
</div>
That just screams flexbox. Support level is already at 94.82%. You will need to use all those ugly prefixes, but you can help yourself with STYLUS/LESS and the rest of 'em.
Here's a quick outline of what you might end up with:
.roundtrip {
display: inline-flex;
flex-direction: row;
align-items: stretch;
background-color: #909090;
}
.trip {
width: 100px;
text-align: center;
border: 1px solid black;
margin: 0px 3px;
display: flex;
flex-direction: column;
}
.flight {
background-color: #B0B0B0;
white-space: nowrap;
}
.flight-path {
width: 6px;
min-height: 15px;
flex-grow: 1;
align-self: center;
background-color: #6090FF;
}
.connection {
height: 40px;
color: red;
border: 1px solid red;
display: flex;
flex-direction: column;
justify-content: center;
}
<span class="roundtrip">
<div class="trip">Outbound
<div class="flight">Los Angeles</div>
<div class="flight-path"></div>
<div class="flight">Chicago</div>
<div class="connection">5hr wait</div>
<div class="flight">Chicago</div>
<div class="flight-path"></div>
<div class="flight">New York</div>
<div class="connection">2hr wait</div>
<div class="flight">New York</div>
<div class="flight-path"></div>
<div class="flight">Amsterdam</div>
</div>
<div class="trip">Inbound
<div class="flight">Amsterdam</div>
<div class="flight-path"></div>
<div class="flight">Los Angeles</div>
</div>
</span>