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)?
Related
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.
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;
}
I am unable to get ScrollView in Kivy to scroll through paragraphs of text. I have attached a code example below. Can anyone state what is wrong? Thank you.
import kivy
import string
from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.gridlayout import GridLayout
from kivy.uix.scrollview import ScrollView
class longTextLabelApp(App):
def build(self):
scrollViewLayout = ScrollView(do_scroll_x=False)
childLayout = GridLayout(cols = 1, size_hint_x = 1, size_hint_y = None)
childLayout.bind(minimum_height=childLayout.setter('height'))
def longTextLabel():
_long_text = """
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus odio nisi, pellentesque molestie adipiscing vitae, aliquam at tellus. Fusce quis est ornare erat pulvinar elementum ut sed felis. Donec vel neque mauris. In sit amet nunc sit amet diam dapibus lacinia. In sodales placerat mauris, ut euismod augue laoreet at. Integer in neque non odio fermentum volutpat nec nec nulla. Donec et risus non mi viverra posuere. Phasellus cursus augue purus, eget volutpat leo. Phasellus sed dui vitae ipsum mattis facilisis vehicula eu justo.
Quisque neque dolor, egestas sed venenatis eget, porta id ipsum. Ut faucibus, massa vitae imperdiet rutrum, sem dolor rhoncus magna, non lacinia nulla risus non dui. Nulla sit amet risus orci. Nunc libero justo, interdum eu pulvinar vel, pulvinar et lectus. Phasellus sed luctus diam. Pellentesque non feugiat dolor. Cras at dolor velit, gravida congue velit. Aliquam erat volutpat. Nullam eu nunc dui, quis sagittis dolor. Ut nec dui eget odio pulvinar placerat. Pellentesque mi metus, tristique et placerat ac, pulvinar vel quam. Nam blandit magna a urna imperdiet molestie. Nullam ut nisi eget enim laoreet sodales sit amet a felis.
"""
reallyLongText = _long_text + _long_text + _long_text + _long_text +_long_text
myLabel = Label(text = reallyLongText, text_size = (700,None), line_height=1.5)
return myLabel
childLayout.add_widget(longTextLabel())
scrollViewLayout.add_widget(childLayout)
return scrollViewLayout
if __name__ == '__main__':
longTextLabelApp().run()
The default size of a Label (and Widget) is (100,100). It doesn't matter if you are seeing all the text on the screen. If you print myLabel.size you will realize of this. You need to be sure to set the height of the Label (myLabel.height: 2200) but first set the size_hint_y to None first (myLabel.size_hint_y=None). The following code should work:
import kivy
import string
from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.gridlayout import GridLayout
from kivy.uix.scrollview import ScrollView
from kivy.graphics import Rectangle, Color
class longTextLabelApp(App):
def build(self):
scrollViewLayout = ScrollView(do_scroll_x=False)
childLayout = GridLayout(cols = 1, size_hint_x = 1, size_hint_y = None)
childLayout.bind(minimum_height=childLayout.setter('height'))
def longTextLabel():
_long_text = """
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus odio nisi, pellentesque molestie adipiscing vitae, aliquam at tellus. Fusce quis est ornare erat pulvinar elementum ut sed felis. Donec vel neque mauris. In sit amet nunc sit amet diam dapibus lacinia. In sodales placerat mauris, ut euismod augue laoreet at. Integer in neque non odio fermentum volutpat nec nec nulla. Donec et risus non mi viverra posuere. Phasellus cursus augue purus, eget volutpat leo. Phasellus sed dui vitae ipsum mattis facilisis vehicula eu justo.
Quisque neque dolor, egestas sed venenatis eget, porta id ipsum. Ut faucibus, massa vitae imperdiet rutrum, sem dolor rhoncus magna, non lacinia nulla risus non dui. Nulla sit amet risus orci. Nunc libero justo, interdum eu pulvinar vel, pulvinar et lectus. Phasellus sed luctus diam. Pellentesque non feugiat dolor. Cras at dolor velit, gravida congue velit. Aliquam erat volutpat. Nullam eu nunc dui, quis sagittis dolor. Ut nec dui eget odio pulvinar placerat. Pellentesque mi metus, tristique et placerat ac, pulvinar vel quam. Nam blandit magna a urna imperdiet molestie. Nullam ut nisi eget enim laoreet sodales sit amet a felis.
"""
reallyLongText = _long_text + _long_text + _long_text + _long_text +_long_text
myLabel = Label(text = reallyLongText, text_size = (700,None), line_height=1.5)
print "The label size is ", myLabel.size
myLabel.size_hint_y = None
myLabel.height = 2200
return myLabel
childLayout.add_widget(longTextLabel())
scrollViewLayout.add_widget(childLayout)
return scrollViewLayout
if __name__ == '__main__':
longTextLabelApp().run()
EDIT - RST Document
Depending on your objectives it might be better to use a RSTDocument. Label are just that, labels. They don't adjust to content or text. Think of them as stickers. The (RSTDocment)[http://kivy.org/docs/api-kivy.uix.rst.html], still indicated as highly experimental though is more suitable for long texts, specially if they are dynamic. They actually includes the Scroll.
from kivy.app import App
from kivy.uix.rst import RstDocument
class RstDocumentApp(App):
def build(self):
_long_text = """
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus odio nisi, pellentesque molestie adipiscing vitae, aliquam at tellus. Fusce quis est ornare erat pulvinar elementum ut sed felis. Donec vel neque mauris. In sit amet nunc sit amet diam dapibus lacinia. In sodales placerat mauris, ut euismod augue laoreet at. Integer in neque non odio fermentum volutpat nec nec nulla. Donec et risus non mi viverra posuere. Phasellus cursus augue purus, eget volutpat leo. Phasellus sed dui vitae ipsum mattis facilisis vehicula eu justo.
Quisque neque dolor, egestas sed venenatis eget, porta id ipsum. Ut faucibus, massa vitae imperdiet rutrum, sem dolor rhoncus magna, non lacinia nulla risus non dui. Nulla sit amet risus orci. Nunc libero justo, interdum eu pulvinar vel, pulvinar et lectus. Phasellus sed luctus diam. Pellentesque non feugiat dolor. Cras at dolor velit, gravida congue velit. Aliquam erat volutpat. Nullam eu nunc dui, quis sagittis dolor. Ut nec dui eget odio pulvinar placerat. Pellentesque mi metus, tristique et placerat ac, pulvinar vel quam. Nam blandit magna a urna imperdiet molestie. Nullam ut nisi eget enim laoreet sodales sit amet a felis.
"""
reallyLongText = _long_text + _long_text + _long_text + _long_text +_long_text
return RstDocument(text = reallyLongText)
if __name__ == '__main__':
RstDocumentApp().run()
You can set the Label to be of the size of the texture inside it like this.
FloatLayout:
Label:
# adding a background to see the amount of space the label takes
canvas.before:
Color:
rgba: .5, .5, .5, .5
Rectangle:
size: self.size
pos: self.pos
text: "How can the only thing constant in the universe be `change` when\nchange itself is by it's very nature `not constant`?"
pos_hint: {'center_x': .5, 'center_y': .5}
size_hint: None, None
size: self.texture_size
However with this you would only get a label that just expands how much text is in it and would require you to add \n yourself to make it wrap. A better approach would be to let the text inside the label auto wrap at a certain width by setting text_size something like the following::
FloatLayout:
ScrollView:
# take half of parents size
size_hint: .5, .5
pos_hint: {'center_x': .5, 'center_y': .5}
Label:
canvas.before:
Color:
rgba: .5, .5, .5, .5
Rectangle:
size: self.size
pos: self.pos
text: "\n1. Two hunters are out in the woods when one of them collapses. He doesn't seem to be breathing and his eyes are glazed. The other guy whips out his phone and calls the emergency services. He gasps, `My friend is dead! What can I do?`\n\n The operator says `Calm down. I can help. First, let's make sure he's dead.`\n\n There is a silence, then a gun shot is heard. Back on the phone, the guy says `OK, now what?`\n\n\n2. Sherlock Holmes and Dr Watson were going camping. They pitched their tent under the stars and went to sleep. Sometime in the middle of the night Holmes woke Watson up and said:\n\n `Watson, look up at the sky, and tell me what you see.`\n\n Watson replied: `I see millions and millions of stars.`\n\n Holmes said: `And what do you deduce from that?`\n\n Watson replied: `Well, if there are millions of stars, and if even a few of those have planets, it’s quite likely there are some planets like Earth out there. And if there are a few planets like Earth out there, there might also be life.`\n\n And Holmes said: `Watson, you idiot, it means that somebody stole our tent.`\n\n\n3. Three women talk about their husband is performance as lovers.\n\nThe first woman says, `My husband is a marriage counselor, so he always buys me flowers and candy before we make love.`\n\nThe second woman says, `My husband is a motorcycle mechanic. He likes to play rough and use leather sometimes.`\n\nThe third woman shakes her head and says, `My husband works for an Internet company. He just sits on the edge of the bed and tells me how great it's going to be when I get it.` \n\n\n4. As within, so outside. Fractals equations show the possibility of having infinity within minutia. Each and every cell can be a image of the whole; merging the micro and the macro into one.\n"
pos_hint: {'center_x': .5, 'center_y': .5}
size_hint: 1, None
text_size: self.width, None
height: self.texture_size[1]
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.
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.