How to change the layout of ion-slide? - ionic4

I'm trying to use ion-slides:
<ion-content>
<ion-slides pager="true" [options]="slideOpts">
<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>
</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)="end()">END</ion-button>
</ion-slide>
</ion-slides>
</ion-content>
However, I was expecting the flow of content to be top-to-bottom rather than having the "Welcome" header to the left.
I've looked at the slider layout documentation but I couldn't see how to change the layout to flow vertically down the page.
By inspecting the css in the browser debugger, I figured out that I could change the flex model and by adding the following to my page.scss it appears to fix the problem. Is there a more 'ionic' way to solve this?
.swiper-slide {
flex-direction: column;
}
Apologies if this question is very basic, I'm a data specialist so front end development is not (yet) a strength of mine.

The solution for me was to add the following css:
.swiper-slide {
flex-direction: column;
}

Related

How Print Vue Component W/ Styles

I'm trying to print a component using VueJS all style is in the same file, but it's not getting the CSS Styling. Also I use Quasar framework, don't know if it can affect the final result.
<div style="margin: 12px 12px">
<div class="central-layout">
<p>
<strong
><a href="https://www.nightprogrammer.com/" target="_blank"
>Nightprogrammer.com</a
></strong
>: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
posuere, tellus lobortis posuere tempor, elit sem varius libero, ac
vulputate ante orci vel odio. Nam sit amet tortor malesuada tellus
rutrum varius vel a mauris. Integer volutpat neque mauris, vel imperdiet
mi aliquet ac. Proin sed iaculis ipsum. Vivamus tincidunt egestas
sapien, vitae faucibus velit ultricies eget. Donec mattis ante arcu, a
pretium tortor scelerisque et. Morbi sed dui tempor, consectetur turpis
sed, tristique arcu.
</p>
</div>
</div>
<style scoped>
.central-layout{
flex-direction: column-reverse;
}
</style>
exportToPDF() {
const content = this.$refs.printInteraction.innerHTML
let cssHtml = ''
for (const node of [...document.querySelectorAll('style')]) {
cssHtml += node.outerHTML
}
const winPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0')
winPrint.document.write(`<!DOCTYPE html>
<html>
<head>
${cssHtml}
</head>
<body>
${content}
</body>
</html>`)
winPrint.document.close()
winPrint.focus()
winPrint.print()
winPrint.close()
}
}
}
Can anyone help me?
I need to print with the styling set in the page
Exporting that properly may be quite difficult because not all the things are properly supported. I recommend the usage of this: https://github.com/niklasvh/html2canvas
Then you could convert the image into a PDF. But anyway, such thing is quite heavy and should be handled by some backend: convert, host the file on AWS/alike and sent back as a callback.

Generating PDF in next.js

Hii i am trying to generate PDF in next.js. I tried many libraries like react-pdf, jsPDF etc. but all they are client side library they need window to perform their action. Is There any solution for generating pdf in next.js. If Present then please suggest with code example.
i recommend to use the api routes of next.js and use a node.js pdf library. On the frontend you access the api with the correct path to return the pdf and just render it.
next.js api routes
pdf-lib
Example:
import { PDFDocument, StandardFonts, rgb } from 'pdf-lib'
export default async (req, res) => {
const pdfDoc = await PDFDocument.create();
// do pdf stuff
const buffer = await pdfDoc.save();
res.send(buffer);
};
export const config = {
api: { bodyParser: false, },
};
Using jsPDF, I found this tutorial with Next.js.
pages/index.tsx:
import * as React from "react";
import Image from "next/image";
import dynamic from "next/dynamic";
const GeneratePDF = dynamic(()=>import("./../src/components/GeneratePDF"),{ssr:false});
const app =()=>{
const ref = React.useRef();
return(<div className="main">
<div className="content" ref={ref}>
<h1>Hello PDF</h1>
<img id="image" src="/images/image_header.jpg" width="300" height="200"/>
<p id="text">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quisquam animi, molestiae quaerat assumenda neque culpa ab aliquam facilis eos nesciunt! Voluptatibus eligendi vero amet dolorem omnis provident beatae nihil earum!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, est. Magni animi fugit voluptates mollitia officia libero in. Voluptatibus nisi assumenda accusamus deserunt sunt quidem in, ab perspiciatis ad rem.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil accusantium reprehenderit, quasi dolorum deserunt, nisi dolores quae officiis odio vel natus! Pariatur enim culpa velit consequatur sapiente natus dicta alias!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, asperiores error laudantium corporis sunt earum incidunt expedita quo quidem delectus fugiat facilis quia impedit sit magni quibusdam ipsam reiciendis quaerat!
</p>
</div>
<GeneratePDF html={ref}/>
</div>);
}
export default app;

#media queries being ignored when viewing html emails via iOS Mail

i am dealing with very strange problem. I have tested on iphone6s and iphone6
1) the email is sent to a non-gmail account that is configured on the iphone
2) the html message is viewed from iOS Mail
3) here is where it gets weird and i will try to describe best as possible
a) if i view the email directly from the client by click on the email from the list of emails. The media query is not respected.
b) if i view the message, click the down arrow to view the previous message and then click the up to view the original message, the media query is respected.
4) i have tried both icloud and yahoo accounts and two different iphones (6 and 6s)
i have got it down to this simple example.
of course all the simple emulators work as you would expect and not exhibit the problem
<!DOCTYPE html>
<html lang="en">
<head>
<title>this is a test</title>
<meta charset="UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* ----------- iPhone 5 and 5S ----------- */
/* Portrait */
#media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
#main-wrapper{
max-width: 320px;
margin: 2px auto;
background-color: red;
}
}
</style>
</head>
<body>
<div id="main-wrapper" style=" background-color: #ffffff;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in ante velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas imperdiet erat metus, sed maximus tortor dignissim vel. Fusce luctus eget turpis a pretium. Nunc sagittis vulputate risus et porta. Cras eros nisl, placerat id ultricies sit amet, eleifend vel augue. Nullam dignissim sodales rhoncus. Morbi hendrerit aliquam tortor.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla tellus massa, accumsan ac ex a, congue lobortis ipsum. Sed vitae ultrices purus. Nam vulputate lacus vitae massa laoreet scelerisque. Duis in risus non elit sodales pharetra. Nunc ultrices nisl quis leo mollis, sed consectetur tortor placerat. Fusce ultricies eleifend nisi, in congue metus iaculis ut.
</div>
</body>
</html>
Assuming that by the default IOS email reader you mean iOS Mail, media queries should be supported. Two things
You shouldn't need an initial-scale attribute in your viewport tag, have you tried <meta name="viewport" content="width=device-width">?
Depending on how specific an environment you want this CSS to impact, you might not need such a loaded #media tag either. Have you tried something like #media screen and (max-device-width: 568px)?

inline tag in haml

In html, you can do something like this
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget
aliquet odio. Fusce id quam eu augue sollicitudin imperdiet eu ac eros.
<em>Etiam nec nisi lorem</em>, ac venenatis ipsum. In sollicitudin,
lectus eget varius tincidunt, felis sapien porta eros, non
pellentesque dui quam vitae tellus.
</p>
It is nice, because the paragraph of text still looks like a paragraph in the markup. In haml, it looks like this
%p
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget
aliquet odio. Fusce id quam eu augue sollicitudin imperdiet eu ac eros.
%em Etiam nec nisi lorem
, ac venenatis ipsum. In sollicitudin,
lectus eget varius tincidunt, felis sapien porta eros, non
pellentesque dui quam vitae tellus.
Is there any way to totally inline a tag in haml?
Haml excels for structural markup, but it's not really intended for inline markup. Read: Haml Sucks for Content. Just put your inline tags as HTML:
.content
%p
Lorem ipsum <em>dolor</em> sit amet.
Or else use a filter:
.content
:markdown
Lorem ipsum *dolor* sit amet.
I know this is old. But figured I'd post this in case anyone lands here. You can also do this sort of thing in haml (And maybe more what the OP was looking for?).
%p Here is some text I want to #{content_tag(:em, "emphasize!")}, and here the word #{content_tag(:strong, "BOLD")} is in bold. and #{link_to("click here", "url")} for a link.
Useful for those situations where doing it on multiple lines adds spaces you don't want
I.E. When you have a link at the end of a sentence, and don't want that stupid space between the link and the period. (or like in the OP's example, there would be a space between the and the comma.
Just don't get carried away like i did in the example :)
You can inline HTML in any HAML doing
%p!= "Lorem ipsum <em>dolor</em> sit amet"
The != operator means that whatever the right side returns it will be outputted.
As a hybrid of these nice answers by others, I think you can define a Helper method in your application_helper.rb for some inline markups you'd frequently use. You don't need to mix HTML with HAML, nor do you have to type much.
In your helper;
def em(text)
content_tag(:em, text)
end
#def em(text)
# "<em>#{text}</em>".html_safe
#end
In your haml;
%p
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget
aliquet odio. Fusce id quam eu augue sollicitudin imperdiet eu ac eros.
#{em 'Etiam nec nisi lorem'}, ac venenatis ipsum. In sollicitudin,
lectus eget varius tincidunt, felis sapien porta eros, non
pellentesque dui quam vitae tellus.
It's all about indentation:
%p
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget aliquet odio. Fusce id quam eu augue sollicitudin imperdiet eu ac eros.
%em
Etiam nec nisi lorem, ac venenatis ipsum. In sollicitudin, lectus eget varius tincidunt, felis sapien porta eros, non pellentesque dui quam vitae tellus.

How to set left margin in PowerPoint textbox using VSTO

I'm taking some user data and adding it to a PowerPoint presentation using VSTO. To get the formatting to look right, though I need to be able to set the left margin of some of the text in the textbox. There will be an initial block of text followed by another, indented block. For example (underlines added to emphasize spacing):
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Sed
vestibulum elementum neque id rhoncus.
In fermentum eros nec dolor lobortis
sit amet fermentum est consequat.
Curabitur eleifend nunc eu odio
vehicula ut elementum erat aliquam. Ut
adipiscing ipsum sit amet leo pulvinar
hendrerit. Cum sociis natoque
penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Nulla
non neque in velit lacinia tempor et a
lacus.
___________Cras auctor bibendum urna, a facilisis lacus
lacinia non.
___________Nullam at quam a mauris consequat vulputate sed eu
sapien.
___________Fusce sed urna nulla, ut sagittis lacus. Pellentesque
tortor
___________augue, scelerisque at aliquet a, pretium ac
ipsum.
I can get this effect by setting Shape.TextFrame.TextRange.IndentLevel = 2 on the lower block of text. However, I cannot figure out how to programmatically set the value of the margin. Does anyone know how to do this?
This is taken care of via Shape.TextFrame.MarginRight and Shape.TextFrame.MarginLeft and the like.