I am trying to get a row with equal height columns regardless of content with the link at the bottom with all columns. Here is a JS BIN and code is below.
<div class="container">
<h4 class="report_list__title">Activites</h4>
<div class="row report_list">
<div class="col-xs-3 report_list__item">
Activity 1
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
View
</div>
<div class="col-xs-3 report_list__item">
Activity 2
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
View
</div>
<div class="col-xs-3 report_list__item">
Activity 3
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
View
</div>
<div class="col-xs-3 report_list__item">
Activity 4
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
View
</div>
</div>
<h4 class="report_list__title">Marketing</h4>
<div class="row report_list report_list--last">
<div class="col-xs-3 report_list__item">
Marketing 1
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
View
</div>
</div>
</div>
.report_list {
display: flex;
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
}
.report_list--last {
border: none;
}
.report_list__title {
margin-top: 20px;
}
.report_list__item {
border: 1px solid green;
display: inline-flex;
flex-direction: column;
}
.report_list .report_list__item a {
align-items: flex-end;
}
If you use margin-top: auto; instead for the last anchor it will be positioned at the bottom.
Stack snippet
.report_list {
display: flex;
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
}
.report_list--last {
border: none;
}
.report_list__title {
margin-top: 20px;
}
.report_list__item {
border: 1px solid green;
display: inline-flex;
flex-direction: column;
}
.report_list .report_list__item a:last-child {
margin-top: auto; /* push to bottom */
align-self: center; /* hor. center */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<h4 class="report_list__title">Activites</h4>
<div class="row report_list">
<div class="report_list__item">
Activity 1
<p>List and filter all sales property viewings.</p>
View
</div>
<div class="report_list__item">
Activity 2
<p>List and filter all sales property valuations.</p>
<p>List and filter all sales property valuations.</p>
View
</div>
<div class="report_list__item">
Activity 3
<p>List and filter all sales properties with missing EPCs.</p>
View
</div>
<div class="report_list__item">
Activity 4
<p>List and filter all sales property offers.</p>
View
</div>
</div>
<h4 class="report_list__title">Marketing</h4>
<div class="row report_list report_list--last">
<div class="col-xs-3 report_list__item">
Marketing 1
<p>List and filter all sales property viewings.</p>
View
</div>
</div>
I think if you add this to the .report_list__item it might work:
justify-content: space-between;
flex:0 0 200px;
This article is pretty good too for Flexbox layout examples:
https://medium.com/coderbyte/a-guide-to-becoming-a-full-stack-developer-in-2017-5c3c08a1600c
Related
I'm using this footer as reference to my Website but I've detected a situation when the main content is short, which creates a gap between both elements (See image below).
Anyone can give me a hand in this? :) I'll post the necessary code!
#inherits LayoutComponentBase
<div class="sidebar">
<NavMenu />
</div>
<div class="main">
<div class="top-row px-4 auth">
<LoginDisplay />
</div>
#Body
<!-- footer -->
https://codepen.io/scanfcode/pen/MEZPNd (HTML and CSS of Footer is here)
</div>
main CSS:
You may need to update your HTML structure in right panel.
follow
<div class="content">
<h1>Sticky Footer with Negative Margin 1</h1>
<div class="push">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</p>
</div>
</div>
<footer class="footer">
Footer
</footer>
<style>
html, body {
height: 100%;
margin: 0;
}
.content {
padding: 20px;
min-height: 100%;
margin: 0 auto -50px;
}
.footer,
.push {
height: 50px;
}
* {
box-sizing: border-box;
}
body {
font: 16px Sans-Serif;
}
h1 {
margin: 0 0 20px 0;
}
p {
margin: 20px 0 0 0;
}
footer {
background: #42A5F5;
color: white;
line-height: 50px;
padding: 0 20px;
}
</style>
I am composing a modal component as I learn VueJS. The modal component basically consists of two major elements: the actual box containing all contents and an overlay.
Now the problem I am stuck in is the overlay element is not rendered at all. But if I moved the overlay from the component template to parent scope, everything would be alright.
Here is the code of parent scope:
<my-modal v-show="show" v-on:hide="show = false"></my-modal>
<!-- Overlay will be rendered properly if I put overlay here. -->
<!-- <div class="my-modal-overlay" v-show="show" #click="show = false"></div> -->
And the code of component template:
<template id="tpl-my-modal">
<transition name="modal-fade" enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
<div class="my-modal-box">
<div class="my-modal-content">
<div class="my-modal-header"><h1>Title</h1></div>
<div class="my-modal-body">Body</div>
<div class="my-modal-footer"><button class="btn btn-danger" #click="$emit('hide')">Close</button></div>
</div>
</div>
<!-- Overlay is not rendered at all if I put it here. -->
<div class="my-modal-overlay" #click="show = false"></div>
</transition>
</template>
The Javascript:
Vue.component('my-modal', {
template: '#tpl-my-modal'
})
Two screenshots. The grey layer is the overlay element which covers all the viewport.
Could anyone shed some light upon the problem? Thank you!
Update:
Here come the snippets. Feel free to comment/comment out line 11 / line 26 in HTML to see the difference.
Update:
It turns out that a Vue Component can have no more than one root element, and <transition> tag can only have a single element, which means what I did before was wrong.
Thus I tweaked the code a bit, and now in the console Vue does not complain any more. And both modal box and overlay are rendered.
<template id="tpl-my-modal">
<div>
<transition name="modal-fade" enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
<div class="my-modal-box">
<div class="my-modal-content">
<div class="my-modal-header">
<h1>{{ program.title }}</h1></div>
<div class="my-modal-body"> {{ program.intro }}</div>
<div class="my-modal-footer">
<button class="btn btn-danger" #click="$emit('hide')">Close</button>
</div>
</div>
</div>
</transition>
<div class="my-modal-overlay" #click="show = false"></div>
</div>
</template>
But one problem is unsolved: all transitions are gone. Here are the snippets. What is the problem?
For the transition problem, you should put the transition tag right after the root div of your template like this..
<template id="tpl-my-modal">
<transition name="modal-fade" enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
<div>
//the rest of your code..
because v-show will be applied to the root div when you use it to the component my-modal
<my-modal v-show="show" v-on:hide="show = false" v-bind:program="activeProgram"></my-modal>
check this fiddle https://jsfiddle.net/cihkem/0rmt28y2/
Vue.component('my-modal', {
template: '#tpl-my-modal',
props: ['program', 'show']
})
new Vue({
el: '#app',
data: {
show: false,
activeProgram: {},
programs: [{
title: 'Westworld',
intro: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi cum incidunt ipsum impedit nostrum, repellendus illum, officia labore neque ea quam ad maiores corporis deserunt quos odio distinctio similique in.'
}, {
title: 'Game of Thrones',
intro: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet perspiciatis eos aperiam, veritatis, voluptate eius similique saepe libero consectetur suscipit dolorem molestiae animi nostrum voluptatem quidem sapiente? Fugit, hic, fugiat!'
}, {
title: 'X Files',
intro: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit nobis, nisi ex exercitationem magnam nemo repudiandae dolor maxime odio reprehenderit animi ducimus a consequatur, saepe suscipit dolorem ratione tempore perferendis.'
}]
},
methods: {
showDetails: function(program) {
this.show = true;
this.activeProgram = program;
}
}
})
.my-modal-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000;
opacity: .3;
}
.my-modal-box {
opacity: 1;
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
}
.my-modal-content {
background-color: #fff;
position: relative;
height: auto;
width: 600px;
margin: 30px auto;
padding: 10px;
z-index: 1050;
}
.my-modal-header {
text-align: center;
}
.my-modal-body,
.my-modal-footer {
padding: 10px 0;
}
.my-modal-header,
.my-modal-body {
border-bottom: 1px solid #d0d0d0;
}
.my-modal-footer {
text-align: right;
}
.program-list-item {
padding: 3px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<body>
<div class="container">
<div id="app">
<ol>
<li v-for="program in programs" class="program-list-item">
{{ program.title}}
<button class="btn btn-primary btn-sm" #click="showDetails(program)">Details</button>
</li>
</ol>
<my-modal :show="show" v-on:hide="show = false" v-bind:program="activeProgram"></my-modal>
<!-- <div class="my-modal-overlay" v-show="show" #click="show = false"></div> -->
</div>
</div>
<template id="tpl-my-modal">
<div>
<transition enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
<div v-show="show" class="my-modal-box" key="modal">
<div class="my-modal-content">
<div class="my-modal-header">
<h1>{{ program.title }}</h1></div>
<div class="my-modal-body"> {{ program.intro }}</div>
<div class="my-modal-footer">
<button class="btn btn-danger" #click="$emit('hide')">Close</button>
</div>
</div>
</div>
</transition>
<div v-show="show" class="my-modal-overlay" #click="show = false" key="overlay"></div>
</div>
</template>
</body>
Is it what you need?
Compare how my flexbox looks in chrome or firefox and how it looks in safari. Chrome & Firefox are correct.
In Safari, It's acting like the minimum height of the flex box is calculated based on the bottom position of the last flex item, whereas in other browsers it seems to calculate the minimum height of the flex box based upon any flex item which takes it over the minimum.
Can anybody find out if my code is wrong or confirm that this is a bug?
View snippet in full page to see.
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.wrapper {
margin: 0 auto;
max-width: 984px;
}
.container {
margin: 0 80px;
padding: 30px 0;
}
h1 {
margin: 0;
}
.top {
position: relative;
display: flex;
flex-direction: column;
max-height: 800px;
flex-wrap: wrap;
}
.prod-header {
order: 3;
width: 49%;
padding-left: 30px;
}
.prod-header img {
width: 100%;
}
.my-slider {
order: 1;
width: 51%;
padding-right: 30px;
}
.my-slider img {
width: 100%;
}
.prod-info {
order: 4;
width: 49%;
padding-left: 30px;
}
.prod-video {
order: 2;
width: 51%;
padding-right: 30px;
}
.prod-video iframe {
width: 100%;
}
.prod-review {
position: absolute;
bottom: 0;
right: 0;
order: 5;
padding-left: 30px;
width: 49%;
}
.prod-review img {
width: 100%;
}
<div class="wrapper">
<div class="container">
<div class="top flex">
<header class="prod-header">
<h1><img src="http://placehold.it/608x300"></h1>
<p>Family trivia game</p>
</header>
<div class="my-slider">
<img src="http://placehold.it/608x675">
</div>
<div class="prod-info">
<p>Lorem ipsum Occaecat qui proident aute id voluptate velit nulla anim incididunt.</p>
<p>Lorem ipsum Velit sint dolore dolor irure ullamco eu. Lorem ipsum Aute irure velit ad in sunt Duis sint veniam minim in labore voluptate. Lorem ipsum Laborum dolore eiusmod Ut deserunt occaecat aliquip amet do esse quis tempor et.</p>
</div>
<div class="prod-video">
<div class="videoWrapper">
<iframe width="420" height="315" src="https://www.youtube.com/embed/KqtvA6xo4DE" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="prod-review">
<img src="http://placehold.it/608x375">
<a class="button" href="#">Buy now</a>
</div>
</div>
</div>
</div>
It looks like this is indeed a Safari-specific Bug.
I was wondering how to make this using only Bootstrap ((I'm not sure if I can add an image here, so, this is the image to represent how I need them....))
http://i.imgur.com/pZlR63X.png
I kinda have a code already, which follows
body {
padding-top: 50px;
padding-bottom: 50px;
margin: 0;
}
.text {
background-color: silver;
margin-top: 50px;
margin-left: 30px;
height: 70px;
}
.img-right {
height: 150px;
float: right;
padding-top: -30px;
overflow: auto;
}
.img-left {
height: 150px;
float: left;
padding-top: -30px;
overflow: auto;
}
.box {
width: 45%;
display: inline-flex;
}
<div class="container">
<div class="row">
<div class="container pull-left" style="overflow: auto">
<img src="http://placehold.it/600x400" class="img-left">
<div class="container-fluid box">
<p class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
<div class="container" style="overflow: auto">
<img src="http://placehold.it/600x400" class="img-right">
<div class="container-fluid box">
<p class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
</div>
</div>
But, as you all can see, is not even close from what I want.... someone kindly could help me here? I'm not completely sure if its easy to notice, but there's a small space between each "block"... yes, it's intended to be in this way... it will be 2 containers inside a row inside a container.
The left one is almost what I want, but the right one is not even far =)
Cheers =)
Here's a snippet to get you started:
<div class="container">
<div class="row">
<div class="col-sm-6 text-center">
<div class="row">
<div class="col-sm-6">
<p class="img-text">Text</p>
</div>
<div class="col-sm-6">
<img src="http://placehold.it/150x150">
</div>
</div>
</div>
<div class="col-sm-6 text-center">
<div class="row">
<div class="col-sm-6">
<img src="http://placehold.it/150x150">
</div>
<div class="col-sm-6">
<p class="img-text">Text</p>
</div>
</div>
</div>
</div>
</div>
With only this CSS:
.img-text{
padding:65px 0;
}
See it in action here
HTH,
-Ted
I'm using Bootstrap 3 - and have two columns with content.
Column one is an image.
Column two is some text.
Now what I want to do is to make the "row" take up the entire height of the browser window AND to have the image in column one AND the text inside column 2 centre horizontally and vertically. I've tried all solution from Stackoverflow, but with no luck.
Here the code I'm using:
<div class="container" style="height:100%;">
<div class="row">
<div class="col-sm-6"> <img src="img/logo_frontpage.png" class="img-responsive center-block" style="height:70%; width:70%" alt=""> </div> <!-- should be vertical centre -->
<div class="col-sm-6">
<!-- start -->
<div id="start" style="display:block;"> <!-- should be vertical centre -->
<h1 class="text-center">Welcome!</h1>
<p class="text-venter">to</p>
<h3 class="text-center" >my site<br /></h3>
</div>
</div>
</div>
</div>
I'm having troubles making the container fill the entire screen area, and vertically centring the two columns.
Stackoverflow is not the only source for CSS techniques. You can find lots of information on CSS-Tricks.com and other places.
DEMO: http://jsbin.com/bayoli/1/
CSS
#media (min-width:768px) {
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.container.my-container {
display: table;
height: 100%;
}
.my-container .row {
display: table-cell;
height: 100%;
}
.my-container .col-sm-6 {
display: table-cell;
border: 5px dashed pink;
height: 100%;
}
.my-container .col-sm-6 .inner {
display: table;
height: 100%;
width:100%;
}
.my-container .col-sm-6 .inner > div {
display: table-cell;
vertical-align: middle;
width: 100%:;
}
}
/* fluid image */
img.img-full-width {width:100%;}
HTML
<div class="container my-container">
<div class="row">
<div class="col-sm-6">
<div class="inner">
<div>
<img src="http://placehold.it/600x300/555555/FFFFFF&text=image+1" class="img-full-width img-responsive" />
</div>
</div>
</div>
<div class="col-sm-6 one">
<div class="inner">
<div>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ol>
</div>
</div>
</div>
</div>
</div>