**There is a paragraph in the div class container, how can i hide the text before "-"? **
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
in js
var element = document.querySelector('.container p')
if(element){
element.innerText = element.innerText.replace(/.*- /, '');
// if you need non greedy regexp use /.*?- / instead
}
just put the content before - in a span.
and then apply display: none to span.
span{
display: none;
}
Hide when, show again when? Take up space or not?
CSS
.hide { color:white }
span:hover { color:black }
<div class="container">
<p><span class="hide">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor </span>- incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
Plain JS
var container = document.querySelector("div>p");
var text = container.innerText;
container.innerHTML = '<span class="hide">'+text.substring(0,text.indexOf("-"))+'</span>'+
text.substring(text.indexOf("-"))
container.addEventListener("mouseover",function() { this.querySelector("span").classList.toggle("hide")});
.hide { color:white }
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
I assume that you want to hide this text dynamically in which case you will need javascript, otherwise as Nitin implied you could just insert a <span class="hidden"> manually into your text?
const container = document.querySelector('.container')
const txt = container.querySelector('p').innerHTML.split('-')
const newMarkup = `<span class="hidden">${txt[0]}</span> ${txt[1]}`
container.innerHTML = newMarkup
.hidden {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
Related
I have created the below navigation menu:
enter image description here
I want the each sub menu to redirect to a particular section of the same page:
<section class="sec-1">text</section>
<section class="sec-2">text</section>
<section class="sec-2">text</section>
Sub menu 1 redirects to section 1, sub menu 2 to section 2, etc..
I've tried:
enter image description here
Neither works. I also tried using HTML only with putting the section ID in the href field of the a attribute:
This kinda works, but is not the desired result. It doesn't redirect exactly to the beginning of the section and after I close the sub menu, it returns back at the beginning.
Also I want the sub menu to be automatically closed, after the redirection, since it's being opened by click and not by hovering over it.
<section id="sec-1">text</section>
<section id="sec-2">text</section>
<section id="sec-3">text</section>
<!--id, not class..-->
<!--At the nav:-->
<li>text</li>
<li>text2</li>
<li>text3</li>
> it redirects below the headline
put a headline in section part, not before.
**
The menu is not closing 'automatically'.
**
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<nav>
<li>
<a href="#" id="sub-click" onclick="show()" >menu1</a>
<ul id="sub-menu" onclick="hide()">
<li>sub-menu</li>
<li>sub-menu2</li>
<li>sub-menu3</li>
</ul>
</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</nav>
<script>
function hide(){
document.getElementById('sub-menu').style.display = "none";
}
function show(){
document.getElementById('sub-menu').style.display = "block";
}
</script>
</body>
</html>
Deyan this will work now:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
#navbar{
position:sticky;
top:0;
background-color: red;
}
section{
height: 100vh;
background-color: blue;
}
</style>
</head>
<body onmousemove="visible()">
<nav id="navbar">
<li>
<a href="#" id="sub-click" onclick="show()" >menu1</a>
<ul id="sub-menu" onclick="hide();transparent()">
<li>sub-menu</li>
<li>sub-menu2</li>
<li>sub-menu3</li>
</ul>
</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</nav>
<section id="one">
<h1>bla la</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sin
t occaecat cupidatat non proident, sunt in culpa qui officia deserunt molli
t anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="two">
<h1>bla la</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sin
t occaecat cupidatat non proident, sunt in culpa qui officia deserunt molli
t anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="three">
<h1>bla la</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sin
t occaecat cupidatat non proident, sunt in culpa qui officia deserunt molli
t anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<script>
function hide(){
document.getElementById('sub-menu').style.display = "none";
}
function show(){
document.getElementById('sub-menu').style.display = "block";
}
function transparent(){
document.getElementById('navbar').style.opacity="0.0";
}
function visible(){
document.getElementById('navbar').style.opacity="1.0";
}
</script>
</body>
</html>
The header is transparent until you move your mouse. You can change the event (onmousemove), if you want, in the body tag.
I am using text-transform in the root to capitalize in my css file. Is there a way to text-transform lower-case a part of text in the middle of a div or p?
You can see the example with word "dolor".
:root {
text-transform: capitalize;
}
.lowercase {
text-transform: lowercase;
}
<p>Lorem ipsum <span class="lowercase">dolor</span> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div>Lorem ipsum <span class="lowercase">dolor</span> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8" />
<style>
.lower-case {
text-transform: lowercase;
color: red;
}
</style>
</head>
<body>
<div>HELLO <span class="lower-case">WORLD</span> TEST</div>
</body>
</html>
. I need to create a section wherein the pink box is between a white and blue section. So I decided that maybe flex is the best way to do this (correct me otherwise). When seen in mobile I'm expecting the whole pink box width will be 100% and the left and right (white /blue) section will be hidden.
somehow related to codepen.io/Paulie-D/pen/LNQMML but I need the bigger box in the middle. and the left and right boxes hides on mobile.
Appealing to your statement: So I decided that maybe flex is the best way to do this (correct me otherwise)
That is really easy to do with modern CSS3 and HTML5 semantic tags.
body{
margin: 0;
padding: 0;
}
section{
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
div:nth-child(2){
grid-row: span 2;
}
.colorp{background-color: #fd79a8;}
.colorw{background-color: white;
}
.colorb{background-color: #0984e3
}
#media only screen and (max-width: 600px){
section{
display: grid;
grid-template-columns: 1fr;
}
div:nth-child(2){grid-row: span 2;}
.colorb{display: none;}
.colorw{display: none;}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<main class=" color">
<section>
<div id="element1" class=" colorw"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div id="element2" class=" colorp"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div id="element3" class=" colorw"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div id="element4" class=" colorb"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div id="element5" class=" colorb"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</section>
</main>
</body>
</html>
You can see how it works in this pen GO TO CODEPEN
So I'm new to web-oriented coding and learning HTML/CSSfrom a book, I've come to the chapter about creating columns and using their properties.
I'm testing my code on a 3-pages website and when it came to editing the text into columns I am stuck for how to set column-witdh.
Here is the code I used and the css
section {
column-count: 3;
column-width: 3em;
}
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Test colonne</title>
<link rel="stylesheet" type="text/css" href="css_colonne.css">
</head>
<body>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</body>
</html>
Can anyone see what's wrong (it doesn't work either with -moz-column-width)
Column division works but it never works
The column-width CSS property specifies the minimum column width.
https://developer.mozilla.org/en-US/docs/Web/CSS/column-width
Demo
.wrapper {
width: 9em;
}
section {
column-count: 3;
}
Instead of explicitly setting column width, use a container element.
I am exporting an html to pdf using Kendo UI and the problem I am facing is html content gets cut weirdly in the pdf. You can try it on the link
Below is the page with shortened content which works fine
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
<style>
button{
margin: 5px;
}
.k-pdf-export{
font-size: 70%;
font-family: "DejaVu Sans", "Arial", sans-serif;
}
</style>
</head>
<body>
<button onclick="export_pdf()"> Export PDF </button>
<div class="pdf-page">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<script>
function export_pdf(){
kendo.drawing.drawDOM($('.pdf-page'), {
paperSize : "A4",
margin : {
top : "2cm",
left : "1cm",
right : "1cm",
bottom : "1cm"
}
}).then(function(group) {
kendo.drawing.pdf.saveAs(group, "export.pdf");
});
}
</script>
</body>
</html>
The problem is when the content is larger, it gets cut weirdly. Try it into the snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
<style>
button{
margin: 5px;
}
.k-pdf-export{
font-size: 70%;
font-family: "DejaVu Sans", "Arial", sans-serif;
}
</style>
</head>
<body>
<button onclick="export_pdf()"> Export PDF </button>
<div class="pdf-page">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<script>
function export_pdf(){
kendo.drawing.drawDOM($('.pdf-page'), {
paperSize : "A4",
margin : {
top : "2cm",
left : "1cm",
right : "1cm",
bottom : "1cm"
}
}).then(function(group) {
kendo.drawing.pdf.saveAs(group, "export.pdf");
});
}
</script>
</body>
</html>
How do I get my content displayed nice in an A4 format like it is specified in the js export function? What is causing this issue?
The problem is caused by changing font styles on the fly, just for the exported content. For most predictable results, use the same styles for the content displayed by the browser, and the exported content. In addition, it is recommended to register the pako deflate library and fonts for embedding in the PDF document.
http://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom#configuration-Custom
http://docs.telerik.com/kendo-ui/framework/drawing/pdf-output#configuration-Custom
http://docs.telerik.com/kendo-ui/framework/drawing/pdf-output#configuration-Compression
Here is an updated version of your example that works better:
http://dojo.telerik.com/UWORa/11