Our project used Angular 5 and ngx-bootstrap.
When I used tooltip of ngx-bootstrap, found that the tooltip always is under some layers, event it has the highest z-index, it is too strange....
Is there someone know how to fix this issue?
Thanks a lot.
Did you already try to use "Append to Body"?
<button type="button" class="btn btn-success"
tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
container="body">
Tooltip appended to body
</button>
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 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)?
I'm having a tough time getting basic (very basic) html pages to output anything with the Scrapy spiders I'm using, hoping someone can put me on the right path.
Example of the html I'm trying to scrape:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<link rel="shortcut icon" href="../images/favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="../include/default.css" type="text/css">
<meta name="Author" content="Author">
<title>Article Title</title>
</head>
<body>
<h3>Month Day, Year</h3>
<hr size="1">
<h4>Article Title Here:</h4>
<p>paragraph 1, Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo</p>
<p>paragraph 2. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
<p>paragraph 3, Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
<p>closing, Sed ut perspiciatis unde omnis iste natus </p>
<hr size="1">
</body>
</html>
I'm trying to scrape it with the following Scrapy spider
from scrapy.contrib.spiders import CrawlSpider, Rule
from scrapy.contrib.linkextractors.sgml import SgmlLinkExtractor
from scrapy.selector import HtmlXPathSelector
from basic.items import BasicItem
class BasicSpider(CrawlSpider):
name = "basiccrawl"
allowed_domains = ["example.com"]
start_urls = [
"http://example.com/articles/",
]
def parse(self, response):
hxs = HtmlXPathSelector(response)
date = hxs.xpath('//h3')
title = hxs.xpath('//h4')
body = hxs.xpath('//p')
yield item
I assume I'm oversimplifying the xpath rules?
If your spider is a subclass of CrawlSpider, it should not override the default parse callback (it is used internally by the CrawlSpider class). This is a bit confusing when you're getting started using Scrapy, it will probably be addressed in a future release.
In the code you posted, you are not using the CrawlSpider rules, so maybe you could ask yourself if you really need to inherit from CrawlSpider. You can go far inheriting only from scrapy.Spider.
The XPath expressions look fine, but the .xpath() method only returns a selector, you're missing the call to the .extract() method. Also, you probably don't need to instantiate the selector, if you're using Scrapy 0.24+ you can simply do:
def parse(self, response):
date = response.xpath('//h3').extract()
title = response.xpath('//h4').extract()
body = response.xpath('//p').extract()
yield item
You may want to go through the Scrapy tutorial I've written, that tries to get you started pretty quickly: http://hopefulramble.blogspot.com/2014/08/web-scraping-with-scrapy-first-steps_30.html
You are almost on the correct path, you need to use the method extract(), that method will return a list of element(s), if you are on begining of learning, maybe an slideshare that I create about Scrapy can help you :D
http://www.slideshare.net/franciscoyes/scrapy-42681497
I am trying to get a bootstrap accordion running, where my panels are React classes. Somehow this doesn't work:
<ReactBootstrap.Accordion>
<WontWorkPanel pkey={1} />
<WontWorkPanel pkey={2} />
</ReactBootstrap.Accordion>
http://jsfiddle.net/3azxcquh/
The WontWorkPanel is React class that renders the single panel with the key this.props.pkey .
Could someone explain me what I'm doing wrong, or how to do it better?
Thanks!
The Accordion clones its children with new props, and those props control the showing/hiding of the Panel component. To allow that to still work with a custom Panel wrapper, you need to transfer props from the wrapper to the Panel child:
Fiddle: http://jsfiddle.net/ssorallen/3azxcquh/6/
var WontWorkPanel = React.createClass({
render: function() {
return this.transferPropsTo(
<ReactBootstrap.Panel header={"WontWork " + this.props.key} key={this.props.key}>
Anim pariatur cliche reprehenderit, enim eiusmod high life
accusamus terry richardson ad squid. 3 wolf moon officia aute,
non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt
laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua pu
</ReactBootstrap.Panel>
);
}
});