I have an ion-slides page:
<ion-content padding>
<ion-slides pager="true">
<ion-slide class="step-one">
<h1>Welcome</h1>
<p>Lorem ipsum dolor sit amet, massa nam ante. Vel lacus viverra volutpat tortor ligula ornare, varius ut mauris ipsum mus torquent, scelerisque suspendisse penatibus, purus et arcu ipsum vehicula quam luctus. Consectetuer sed urna accumsan. Nec viverra felis varius pretium, volutpat in et cras, odio consectetuer lacinia risus feugiat sit etiam, commodo pulvinar, dolor non et inventore.</p>
<p> </p> <!-- TODO: figure out how to add spacing properly -->
</ion-slide>
<ion-slide class="step-two">
<h1>Heading</h1>
<p>blah, blah</p>
</ion-slide>
<ion-slide class="step-three">
<h1>Heading</h1>
<p>blah, blah</p>
<ion-button (click)='finish()'>FINISH!</ion-button>
</ion-slide>
</ion-slides>
</ion-content>
How can I vertically centre the ion-slide? Currently it sits at the top of the page.
The solution for me was to add this css:
.slides {
display: flex !important;
justify-content: center !important;
align-items: center !important;
height: 100%;
}
Related
I am practicing with css-grid and media queries. When I add the media query for max-width 768px nothing happens when I shrink the screen to that size and I still see the 4 columns instead of the 2 I am trying to apply.
I am using Visual Studio Code and the live server. I already tried opening the html directly in Finder (I am using mac os), i have refreshed the page and still have the same issue.
Something is overriding that media query when I have a screen size under 768px and when I inspect the file I see these messages below. How can I solve this or what am I doing wrong here?
Very thankful for any help!
body {
background: green;
}
.grid {
display: grid;
grid-template-columns: repeat(4, auto);
grid-gap: 1rem;
}
#media (max-width: 768px) {
.grid {
display: grid;
grid-template-columns: repeat (2, auto);
}
}
<body>
<div class="grid">
<div class="item">
<h3>Heading 1</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem debitis nesciunt eum accusamus corrupti voluptates officiis. Molestiae deleniti pariatur ipsum rerum facilis dicta fugiat quibusdam, nulla quo suscipit, consectetur ratione.</p>
</div>
<div class="item">
<h3>Heading 2</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem debitis nesciunt eum accusamus corrupti voluptates officiis. Molestiae deleniti pariatur ipsum rerum facilis dicta fugiat quibusdam, nulla quo suscipit, consectetur ratione.</p>
</div>
<div class="item">
<h3>Heading 3</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem debitis nesciunt eum accusamus corrupti voluptates officiis. Molestiae deleniti pariatur ipsum rerum facilis dicta fugiat quibusdam, nulla quo suscipit, consectetur ratione.</p>
</div>
<div class="item">
<h3>Heading X</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem debitis nesciunt eum accusamus corrupti voluptates officiis. Molestiae deleniti pariatur ipsum rerum facilis dicta fugiat quibusdam, nulla quo suscipit, consectetur ratione.</p>
</div>
</div>
</body>
There is a space between the word repeat and the opening bracket. Remove that and all should be OK.
The yellow warning triangle shows that something was wrong with that line.
I want to have a vertical stack of blocks; each block has an image on the left and text (heading and paragraphs) on the right.
I would like the image to be its natural width and the text to use the remaining width in the parent element.
This is similar to a table, but the images in different blocks have different widths. So the first "column" in the table is not of constant width.
Floating the image left does not work, because if the text has a greater height than the image, the text wraps underneath the image.
CSS tables don't seem to work, because the CSS does not know the differing image widths from block to block.
My "block" element CSS includes 'display: table-row;'. My image element and my text element CSS include 'display: table-cell;'. The result is that some images are their natural sizes; others are smaller than their natural sizes.
This seems to be related to the amount of text: one line of text gets a natural size image; two lines squeezes the image a few pixels; 15 lines squeezes the image to about one-half size.
I would welcome suggestions for how to accomplish my goal.
I think that can be resolved by display flex. Documentation W3C: https://www.w3schools.com/css/css3_flexbox.asp
Try this:
HTML
<div class="row" style="width: 100%">
<img src="https://image.shutterstock.com/image-photo/salesman-offering-cheese-samples-customers-600w-414153787.jpg"/>
<div>
<h2>Head</h2>
<p>
Suspendisse eu scelerisque odio. Quisque hendrerit malesuada risus ut imperdiet. Nulla facilisi. Aenean bibendum risus et mi rutrum convallis. Phasellus ornare orci leo, eget faucibus tortor egestas at. Aliquam iaculis, metus dignissim vulputate dignissim, est metus condimentum nulla, at maximus neque tellus non erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor, magna ut lacinia blandit, est ligula sagittis nulla, nec interdum erat velit sit amet velit. Sed ut ante at enim accumsan ultricies porta quis neque. Vestibulum volutpat ipsum eget libero malesuada volutpat. Praesent sed porta tellus. Praesent ac volutpat justo.
</p>
</div>
</div>
<div class="row" style="width: 70%">
<img src="https://image.shutterstock.com/image-photo/salesman-holding-cutting-board-assorted-260nw-407934532.jpg"/>
<div>
<h2>Head</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse luctus massa nec fermentum egestas. Sed feugiat, nisl vitae dictum accumsan, felis odio elementum eros, imperdiet faucibus mi nisi convallis dolor. Mauris interdum maximus neque, in convallis erat facilisis porttitor. Sed ac tortor imperdiet, efficitur nisi nec, efficitur massa. Integer consectetur nec nunc ac porta. Proin non ultricies lorem, rhoncus laoreet ligula. Donec condimentum mauris id urna placerat dapibus. Cras consequat, quam vitae semper luctus, mi tortor finibus augue, sed vestibulum odio lorem at tellus. Fusce eu urna eget ante mollis vestibulum. Nullam ante eros, convallis vitae hendrerit at, volutpat id dui.
</p>
</div>
</div>
<div class="row" style="width: 80%">
<img src="https://image.shutterstock.com/image-photo/salesman-offering-cheese-samples-customers-600w-414153787.jpg"/>
<div>
<h2>Head</h2>
<p>
Suspendisse eu scelerisque odio. Quisque hendrerit malesuada risus ut imperdiet. Nulla facilisi. Aenean bibendum risus et mi rutrum convallis. Phasellus ornare orci leo, eget faucibus tortor egestas at. Aliquam iaculis, metus dignissim vulputate dignissim, est metus condimentum nulla, at maximus neque tellus non erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor, magna ut lacinia blandit, est ligula sagittis nulla, nec interdum erat velit sit amet velit. Sed ut ante at enim accumsan ultricies porta quis neque. Vestibulum volutpat ipsum eget libero malesuada volutpat. Praesent sed porta tellus. Praesent ac volutpat justo.
</p>
</div>
</div>
CSS:
.row {
display: flex;
}
.row img {
flex-grow: 1;
height: max-content;
}
.row div {
margin-left: 10px;
}
https://jsfiddle.net/ymuxdtg6/
Is there any way to avoid this flicker on page refresh, it's a modal component which takes HTML as slot, but when I refresh the page it flashes. My app is not using a router so it's not complete SPA.
see the gif.
Here is the code.
.body {
padding: 2em;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.modal-mask {
position: absolute;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
display: table;
transition: opacity .3s ease;
}
.modal-wrapper {
display: table-cell;
vertical-align: middle;
}
.modal-container {
width: 70%;
margin: 1em auto;
padding: 20px 30px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
transition: all .3s ease;
font-family: Helvetica, Arial, sans-serif;
}
.modal-header h3 {
margin-top: 0;
color: #42b983;
}
.modal-body {
margin: 20px 0;
}
.modal-default-button {
float: right;
}
/*
* The following styles are auto-applied to elements with
* transition="modal" when their visibility is toggled
* by Vue.js.
*
* You can easily play with the modal transition by editing
* these styles.
*/
.modal-enter {
opacity: 0;
}
.modal-leave-active {
opacity: 0;
}
.modal-enter .modal-container,
.modal-leave-active .modal-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
<!-- template for the modal component -->
<script type="text/x-template" id="modal-template">
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header">
default header
</slot>
<button class="modal-default-button" #click="$emit('close')">Close</button>
</div>
<div class="modal-body">
<slot name="body">
default body
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
default footer
<button class="modal-default-button" #click="$emit('close')">
OK
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</script>
<!-- app -->
<div id="app">
<button id="show-modal" #click="showModal = true">Show Modal</button>
<!-- use the modal component, pass in the prop -->
<modal v-if="showModal" #close="showModal = false">
<!--
you can use custom content here to overwrite
default content
-->
<div slot="body">
<div class="modal-body">
<h4>Text in a modal</h4>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<h4>Popover in a modal</h4>
<p>This button should trigger a popover on click.</p>
<h4>Tooltips in a modal</h4>
<p>This link and that link should have tooltips on hover.</p>
<hr>
<h4>Overflowing text to show scroll behavior</h4>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
</div>
<h3 slot="header">custom header</h3>
</modal>
</div>
<script src="https://unpkg.com/vue#latest/dist/vue.js"></script>
<script>
// register modal component
Vue.component('modal', {
template: '#modal-template'
})
// start app
new Vue({
el: '#app',
data: {
showModal: false
}
})
</script>
Most usually this is due to the fact that your vue.js requires to load until it is able to do what you want.
You basically load html content which is by default visible.
After the html you load vue and vue will hide your content due to your v-if or v-show statements. The most simple way to ensure something like this is not happening is to use the v-cloak directive plus a little bit of css.
Place it at a very high level as given in this example
<div id="app"><!-- vue mounted at this div -->
<div v-cloak>
<!-- your actual code / content -->
</div>
</div>
And the css
[v-cloak] { display: none; }
The v-cloak property will be removed as soon as vue is done with loading. Therefore everything is hidden until vue is done with loading. This should ensure your content is not flashing.
I'm generating a very basic PDF with header and footer like this:
<cfdocument format="PDF" pagetype="A4" unit="cm" scale="100">
<cfset template_stlye = fileRead(expandPath('love.css'))>
<cfdocumentitem type="header" evalatprint="true">
<cfif cfdocument.currentpagenumber eq 1>
<style type="text/css" media="screen">
<cfoutput>
#template_stlye#
</cfoutput>
</style>
<div class="pdf_header">
<div class="header_text">
I'm a lovely header
</div>
</div>
</cfif>
</cfdocumentitem>
<cfdocumentitem type="footer" evalatprint="true">
<cfif cfdocument.currentpagenumber eq 1>
<style type="text/css" media="screen">
<cfoutput>
#template_stlye#
</cfoutput>
</style>
<div class="pdf_footer">
<div class="footer_text">
I'm a lovely footer
</div>
</div>
</cfif>
</cfdocumentitem>
<style type="text/css" media="screen">
<cfoutput>
#template_stlye#
</cfoutput>
</style>
<div class="pdf_content">
<h1>Foo bar</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dictum egestas lorem sed ultricies. Aliquam in orci eu massa semper tempor ac at nisi. Proin vestibulum dictum rhoncus. Mauris blandit congue auctor. Vestibulum sed fermentum nibh. Donec non nibh risus. Mauris vestibulum magna libero. Pellentesque vel lectus congue, eleifend sapien id, porttitor tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus eget imperdiet eros, in congue massa. Curabitur eget massa aliquam, rhoncus ipsum vitae, rhoncus felis. Integer a aliquet sapien. Donec lacinia sem sed turpis pellentesque ultrices.
</p>
<p>
Aenean eget magna sodales eros ullamcorper consectetur. Maecenas varius est ac rhoncus gravida. Donec posuere rhoncus massa nec suscipit. Nullam vestibulum nunc quis nisi pharetra dignissim. Maecenas lobortis placerat sapien porta cursus. Pellentesque aliquet a massa id sodales. Curabitur massa felis, pellentesque volutpat molestie vel, mollis sit amet purus. Donec faucibus felis ut neque tristique vulputate. Phasellus facilisis lectus ac vestibulum vulputate. Vivamus quis convallis nibh. Pellentesque commodo dolor et velit volutpat ultricies. Vestibulum pharetra at nulla a pulvinar. Donec non rhoncus justo. Sed tempus, tellus sed consequat dictum, est lectus ultrices ante, a sagittis urna eros non lorem. Fusce quis sagittis diam, quis sollicitudin leo. Nulla ut dolor iaculis, fermentum turpis eu, fringilla tellus.
</p>
</div>
</cfdocument>
The CSS file:
.pdf_content {
font-size: 11pt;
font-family: Arial, Tahoma;
}
.header_text, .footer_text {
font-size: 10pt;
font-family: Arial, Tahoma;
line-height: 9pt;
text-align: center;
}
.pdf_header, .pdf_footer {
position: absolute;
top: 0.5cm;
width: 18cm;
}
And I end up with the regular content in a wrong scale:
While it's supposed to look like this:
Any idea, why this is happening?
I'm working with:
Windows 10, Version 1511, Build 10586.164
Coldfusion 10.0.20.283922, Tomcat 7.0.68.0
After some debugging efforts and further comparison with a co-workers setup we found out that the included Java version is so old that it doesn't even know Windows 10.
Settings before:
After pointing ColdFusion the the most recent JDK it worked.
Settings after:
PS: "fun fact" when changing back to the included Java version the scaling issue wasn't reproducible anymore. wtf
I've used the previous version of Bootstrap and had no problem with this, but I'm trying with 3.0 and my classes just lie on top of each other rather than floating from keft to right, what am I doing wrong?
I followed this tutorial http://www.w3resource.com/twitter-bootstrap/grid-system-tutorial.php and even copied it across as it was driving me insane, but it didn't even work.
This is my current HTML
<!DOCTYPE html>
<html>
<head>
<title>Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="./css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="./css/global.css" rel="stylesheet" media="screen">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<nav class="navbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#emproium-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Branding</a>
</div>
<div class="collapse navbar-collapse" id="emproium-navbar-collapse">
<ul class="nav navbar-nav">
<li>Core Collection</li>
<li>Antiques</li>
<li>Art</li>
<li>Furniture</li>
<li class="dropdown">
Home Decor <b class="caret"></b>
<ul class="dropdown-menu">
<li>Rugs</li>
<li>Throws</li>
<li>Quilts</li>
<li>Accent Pillows</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li>Cart</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<div class="banner span12">
</div>
<div class="tile span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div>
<div class="tile span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div>
<div class="tile span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div>
</div><!-- end of row-->
</div><!-- container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="./js/bootstrap.min.js"></script>
That's my full code, if anyone could point out what is wrong here i'd be grateful. I'm sure it's pretty simple.
Jonny
span* have been replaced by the col-xs|sm|md|lg-* naming convention. Just looking at your code, that is probably your main issue in migrating to BS3. See http://getbootstrap.com/getting-started/#migration for a full list of what has changed.