If I create a pdf with JsPDF the browser size seems to effect the size of the text inside the pdf. The code to create te pdf.
var pdf = new jsPDF();
//To split on multiple pages
var options = {
pagesplit: true
}
pdf.addHTML(document.getElementById("test"), options,function() {
pdf.save('test.pdf');
});
And the html
<div id="pdf_container">
<div id="pdf_top">
<h1>My report</h1>
</div>
<div>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
</div>
</div>
The link to the result of both pdf.save: http://imgur.com/XyDPFFb
Anyone know how to solve this?
JsPDF uses the current size of the div that you are sending to the function.
You must to give a fixed style and size to each element that you wants to convert to PDF, to get always the same file. Try with this css, and you can play with differents widths and font sizes until you get the style that you want.
myStlye.css
#pdf_container{
width:500px;
font-size:15px;
}
Related
So I'm trying to use tooltip component from BS5. But somehow it doesn't work. Let me show you the html code first.
<div class="row">
<div class="col-12 col-md-4">
<a class="card">
<div class="card-body">
<div class="card-title">this is title. <span class="badge badge-theme" data-bs-toggle="tooltip" data-bs-placement="top" title="this is tooltip">Origiinal content</span></div>
</div>
</a>
</div>
</div>
What's weird is that when I place the tooltip outside the card component, the tooltip works perfectly. What is the problem? Thanks in advance. :)
here is a working example of a tooltip on a whole card:
Working demo
Placing id="example" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top" in my demo on any element will result in the tooltip appearing on that element. In this case, I placed it on on the div with the class .card.
Feel free to change the id name from example to your desired id (in both script.js and index.html).
I'm trying to improve the filtering code I have for filtering input.
The input I have looks like this:
<html>
<body>
<p>Page 1</p>
<p style="display: none">Pagebreak</p>
<p>Page 2</p>
<p style="display: none">Pagebreak</p>
<p>Page 3</p>
</body>
</html>
I use a filter like this in order to replace words "Pagebreak" with actual docx pagebreak XML piece:
function Para (el)
-- Turning paragraphs which contain nothing but a Pagebreak word
-- into line breaks.
if #el.content == 1 and el.content[1].text == "Pagebreak" then
return pandoc.RawBlock('openxml', '<w:p><w:r><w:br w:type="page"/></w:r></w:p>')
end
end
return {
{Para = Para}
}
I control the input HTML, and would like to simplify it by removing <p style="display: none">Pagebreak</p> in favor of an attribute on regular paragraph. What I'd like to have is this:
<html>
<body>
<p>Page 1</p>
<p class="pageBreak">Page 2</p>
<p class="pageBreak">Page 3</p>
</body>
</html>
What lua code should I write to achieve this?
From the "Creating a handout from a paper" example I see that it's possible to inspect the classes of incoming elements. But how do I modify the existing paragraph to have a page break in it?
Unfortunately, pandoc's document model currently doesn't support attributes on paragraphs. However, you can use a div instead:
<div class="pageBreak">Page 3</div>
I see you've already found the open issue about page breaks
I am following the Material Components Web docs. As a template of the page I am using the very basic template as detailed in the quick start - My undertsnading is that this template is a "including all" template:
it uses:
node_modules/material-components-web/dist/material-components-web.css
and,
https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js
(complete code below)
Seem like Persistent Drawer and Permanent Drawer are not displayed as expected. Not slidable, not aside to the left, not stretching its height.
Note that the Temporary drawer does work as expected.
What am I missing?
<!DOCTYPE html>
Material Components for the web
<aside class="mdc-persistent-drawer mdc-typography">
<nav class="mdc-persistent-drawer__drawer">
<header class="mdc-persistent-drawer__header">
<div class="mdc-persistent-drawer__header-content">
Header here
</div>
</header>
<nav id="icon-with-text-demo" class="mdc-persistent-drawer__content mdc-list">
<a class="mdc-list-item mdc-persistent-drawer--selected" href="#">
<i class="material-icons mdc-list-item__start-detail" aria-hidden="true">inbox</i>Inbox
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__start-detail" aria-hidden="true">star</i>Star
</a>
</nav>
</nav>
</aside>
<h2 class="mdc-typography--display2">Hello, Material Components!</h2>
<div class="mdc-textfield" data-mdc-auto-init="MDCTextfield">
<input type="text" class="mdc-textfield__input" id="demo-input">
<label for="demo-input" class="mdc-textfield__label">Tell us how you feel!</label>
</div>
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<script>window.mdc.autoInit();</script>
<script>
let drawer = new mdc.drawer.MDCPersistentDrawer(document.querySelector('.mdc-persistent-drawer'));
drawer.open = true;
</script>
In order to be displayed as expected, meaning: aside to the left, stretching vertically with 100% height, some css style need to be added. Style values can be taken from the demos package: here. Also note the classes added to the body element as detailed in the permanent drawer demo.
I'm trying to create a slider component inside a page in an ionic 2 app. I've gotten it to work as intended with the exception that the pager dots don't show up. The documentation on how to use the pager isn't great. Any ideas where I'm going wrong here?
<div class="slider-container">
<ion-slides pager="true">
<ion-slide>
<div class="slide">
<img src='assets/image/scoping.png' />
<p class="slide-title">TITLE 1</p>
<p class="slide-text">Body text 1</p>
</div>
</ion-slide>
<ion-slide>
<div class="slide">
<img src='assets/image/projectmgmt.png' />
<p class="slide-title">TITLE 2</p>
<p class="slide-text">Body text 2</p>
</div>
</ion-slide>
<ion-slide>
<div class="slide">
<img src='assets/image/satisfaction.png' />
<p class="slide-title">TITLE 3</p>
<p class="slide-text">Body text 3</p>
</div>
</ion-slide>
</ion-slides>
</div>
I have also tried <ion-slides options="{pagination: true}"> and <ion-slides pager="true"> and neither of these have worked.
Edited: Upon inspection in the browser, I'm seeing the pager being rendered with a div container like this:
<div class="swiper-pager hide">
So I'm definitely not using the right parameters to unhide the pager. Or there's a bug. I'm using Ionic v2.0.0.
This work for me in Ionic 3:
<ion-content>
<ion-slides pager>
<ion-slide>
<h1>My Slide 1</h1>
</ion-slide>
<ion-slide>
<h1>My Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>My Slide 3</h1>
</ion-slide>
</ion-slides>
</ion-content>
Finally got it to work with this as the opening tag of the slides:
<ion-slides [options]="{pagination: true}">
You can try adjusting your position of pager dots. Maybe it is appearing behind your image. Include in your .scss file:
.swiper-container-horizontal > .swiper-pagination
{
bottom : 50%; //Change accordingly
z-index : 99 !important;
}
I have tested out your code (minus the image), it is appearing on mine.
If you are using swiper to slide page, there are a lot of parameters to do the same as-
<div class="swiper-pagination"></div>
here is the code of paginatin-
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
spaceBetween: 30,
});
Complete code can have a look here.
We have demo of slider as-
http://idangero.us/swiper/demos/#.WUJGrROGNp8
Hope this will also help you!
EDIT: It would seem all I needed to do was add data-position="fixed" to the header and that ensured it was encapsulated by a separate wrapper than content.
According to the panels docs, a panel must be a sibling of the header, content and footer elements within a page. So this is my basic markup (heavily stripped down):
<body>
<div data-role="panel"></div>
<div data-role="header"></div>
<div data-role="content"></div>
<div data-role="footer"></div>
</body>
However, when JQM re-renders the DOM, it creates this:
<body>
<div data-role="page">
<div data-role="panel"></div>
<div class="ui-panel-content-wrap ...">
<div data-role="header"></div>
<div data-role="content"></div>
<div data-role="footer"></div>
</div>
</div>
</body>
As you can see, it wraps the header, content and footer in the content wrap instead of just the content. How can I force it to behave correctly?