A general starting-question about Jeet, just for learning the system:
How can I get blocks lined up equally in nested blocks in Jeet Framework?
How can something like this be made, with floating width on max-width: 1450px? And within Jeet philosophy with as little id and classes as possible? On my actual site I had to use at least some classes to get there.
<html>
<head>
<style>
#container { width: 950px; margin:0 auto; padding:30px; }
#leftblock { float:left; width:610px; }
.fullwidthleft { clear:both; }
.fullwidthleft-inner { padding:30px; background:#999; }
.left { float:left; padding:30px; width:245px; background:#aaa; }
.right { float:right; padding:30px; width:245px; background:#bbb; }
#sidebar { float:right; width: 280px; padding:30px; background:#ccc; }
.fullwidth { clear:both; padding:30px; background:#ddd; }
</style>
</head>
<body>
<div id="container">
<div id="leftblock">
<div class="fullwidthleft">
<div class="left">
Leftside
<p>
libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
</p>
</div>
<div class="right">
Rightside
<p>
libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
</p>
</div>
</div>
<div class="fullwidthleft">
<div class="fullwidthleft-inner">
Fullwidth leftblock
<p>
libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
</p>
</div>
</div>
</div>
<div id="sidebar">
Sidebar 1
<p>
lis purus auctor posuere. Praesent auctor dolor quis risus tempor sit amet fermentum turpis cursus.
</p>
<p>
Nullam sem dolor, porta nec ultricies eget, eleifend ut lacus? Nullam fermentum placerat erat vitae dapibus. Aliquam adipiscing hendrerit congue. Sed id scelerisque elit. Nunc scelerisque est sed odio accumsan in vehicula turpis tincidunt. Nulla facilisi. Nulla cursus lacinia elit, a lobortis tortor lobortis vel. Vestibulum sed lorem nunc. Curabitur a luctus ligula. In sit amet ullamcorper sapien? Vestibulum id ligula turpis, at sollicitudin justo. Sed ornare ligula malesuada erat molestie ut tempus ipsum molestie. Duis blandit tellus in quam ullamcorper sed fermentum ipsum varius. Nam sit amet eros eget dui condimentum congue eget nec est. In porttitor lacus nec risus molestie commodo. Praesent vitae justo nec odio dapibus sodales sit amet ultrices sem.
</p>
<p>
Nullam sem dolor, porta nec ultricies eget, eleifend ut lacus? Nullam fermentum placerat erat vitae dapibus. Aliquam adipiscing hendrerit congue. Sed id scelerisque elit. Nunc scelerisque est sed odio accumsan in vehicula turpis tincidunt. Nulla facilisi. Nulla cursus lacinia elit, a lobortis tortor lobortis vel. Vestibulum sed lorem nunc. Curabitur a luctus ligula. In sit amet ullamcorper sapien?
</p>
</div>
<div id="leftblock">
<div class="fullwidthleft">
<div class="left">
Leftside
<p>
libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
</p>
</div>
<div class="right">
Rightside
<p>
libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
</p>
</div>
</div>
<div class="fullwidthleft">
<div class="fullwidthleft-inner">
Fullwidth leftblock
<p>
libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
</p>
</div>
</div>
</div>
<div class="fullwidth">
Fullwidth
<p>
libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
</p>
</div>
</div>
</body>
</html>
See http://botanisk-hage-tromso.net/jeet-test.html
Jeet author here. I'm not against classes, but I don't think they need to be used for everything.
I recreated your example in about 2 minutes with a much smaller HTML/CSS footprint. Let me know if it helps or you have any further questions about it, but hopefully it gives you a better understanding of Jeet.
If you learn nth-child, you'll have a much nicer time: http://css-tricks.com/how-nth-child-works/
HTML: http://pastie.org/7949308
Stylus:
div
center()
.left_side
span(2,3)
aside
span(1,3)
padding 15px 30px
background rgba(0,0,0,.25)
article
span(1,2)
padding 15px 30px
background rgba(0,0,0,.1)
&:nth-child(3n+2)
background rgba(0,0,0,.2)
&:nth-child(3n+3)
span(1,1)
background rgba(0,0,0,.15)
.full_width
span(1,1)
padding 15px 30px
background rgba(0,0,0,.3)
h1
margin 0 0 10px
Result: http://jeetframework.com/examples/1/
Related
I cannot figure out the jscript part to show active the tab and its content based on a variable.
Code will be in asp.net core MVC. The view will receive a variable to show which tab should be shown and active.
Here is a simplified version of the code I would like to use: (ie: second tab would be shown in the jscript section).
#{
var selectedtab="tab2";
}
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<section class="content-header">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<h1>To Dos & Done</h1>
</div>
<div class="col-sm-6 d-none d-sm-block">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item active">To Dos & Done</li>
</ol>
</div>
</div>
</div>
</section>
<section class="content ">
<div class="container-fluid ">
<div class="row">
<div class="col-12 col-sm-6">
<div class="card card-primary card-tabs">
<div class="card-header p-0 pt-1">
<ul class="nav nav-tabs" id="custom-tabs-two-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="custom-tabs-two-home-tab" data-toggle="pill" href="#custom-tabs-two-home" role="tab" aria-controls="custom-tabs-two-home" aria-selected="false">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="custom-tabs-two-profile-tab" data-toggle="pill" href="#custom-tabs-two-profile" role="tab" aria-controls="custom-tabs-two-profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="custom-tabs-two-messages-tab" data-toggle="pill" href="#custom-tabs-two-messages" role="tab" aria-controls="custom-tabs-two-messages" aria-selected="false">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" id="custom-tabs-two-settings-tab" data-toggle="pill" href="#custom-tabs-two-settings" role="tab" aria-controls="custom-tabs-two-settings" aria-selected="false">Settings</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content" id="custom-tabs-two-tabContent">
<div class="tab-pane fade show active" id="custom-tabs-two-home" role="tabpanel" aria-labelledby="custom-tabs-two-home-tab">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada lacus ullamcorper dui molestie, sit amet congue quam finibus. Etiam ultricies nunc non magna feugiat commodo. Etiam odio magna, mollis auctor felis vitae, ullamcorper ornare ligula. Proin pellentesque tincidunt nisi, vitae ullamcorper felis aliquam id. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin id orci eu lectus blandit suscipit. Phasellus porta, ante et varius ornare, sem enim sollicitudin eros, at commodo leo est vitae lacus. Etiam ut porta sem. Proin porttitor porta nisl, id tempor risus rhoncus quis. In in quam a nibh cursus pulvinar non consequat neque. Mauris lacus elit, condimentum ac condimentum at, semper vitae lectus. Cras lacinia erat eget sapien porta consectetur.
</div>
<div class="tab-pane fade" id="custom-tabs-two-profile" role="tabpanel" aria-labelledby="custom-tabs-two-profile-tab">
Mauris tincidunt mi at erat gravida, eget tristique urna bibendum. Mauris pharetra purus ut ligula tempor, et vulputate metus facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas sollicitudin, nisi a luctus interdum, nisl ligula placerat mi, quis posuere purus ligula eu lectus. Donec nunc tellus, elementum sit amet ultricies at, posuere nec nunc. Nunc euismod pellentesque diam.
</div>
<div class="tab-pane fade" id="custom-tabs-two-messages" role="tabpanel" aria-labelledby="custom-tabs-two-messages-tab">
Morbi turpis dolor, vulputate vitae felis non, tincidunt congue mauris. Phasellus volutpat augue id mi placerat mollis. Vivamus faucibus eu massa eget condimentum. Fusce nec hendrerit sem, ac tristique nulla. Integer vestibulum orci odio. Cras nec augue ipsum. Suspendisse ut velit condimentum, mattis urna a, malesuada nunc. Curabitur eleifend facilisis velit finibus tristique. Nam vulputate, eros non luctus efficitur, ipsum odio volutpat massa, sit amet sollicitudin est libero sed ipsum. Nulla lacinia, ex vitae gravida fermentum, lectus ipsum gravida arcu, id fermentum metus arcu vel metus. Curabitur eget sem eu risus tincidunt eleifend ac ornare magna.
</div>
<div class="tab-pane fade" id="custom-tabs-two-settings" role="tabpanel" aria-labelledby="custom-tabs-two-settings-tab">
Pellentesque vestibulum commodo nibh nec blandit. Maecenas neque magna, iaculis tempus turpis ac, ornare sodales tellus. Mauris eget blandit dolor. Quisque tincidunt venenatis vulputate. Morbi euismod molestie tristique. Vestibulum consectetur dolor a vestibulum pharetra. Donec interdum placerat urna nec pharetra. Etiam eget dapibus orci, eget aliquet urna. Nunc at consequat diam. Nunc et felis ut nisl commodo dignissim. In hac habitasse platea dictumst. Praesent imperdiet accumsan ex sit amet facilisis.
</div>
</div>
</div>
<!-- /.card -->
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Control sidebar content goes here -->
<div class="p-3">
<h5>Title</h5>
<p>Sidebar content</p>
</div>
</aside>
<!-- /.control-sidebar -->
#section Scripts{
<script>
</script>
}
I try to test the issue on my side with the Asp.Net Core project and I could notice that the line $('#custom-tabs-two-tab a[href="#' + tab + '"]').tab('show'); is not activating the tab.
In further testing, I note that fade is also causing the issue. While using fade it is not showing the content of the tab page while using the workaround below.
If you could remove fade from your code then the below code example can help you workaround the original issue.
Modified JS code:
<script>
$(document).ready(function(){
var url = window.location.href;
var activeTab = "#custom-tabs-two-profile-tab"; // Specify tab ID here...
$(".nav-tabs li a").click(function(){
$(".nav-tabs li a").removeClass("active");
$(this).addClass("active");
$(".tab-pane").removeClass("show active");
});
$(activeTab).trigger('click');
$('#custom-tabs-two-profile').addClass("show active"); // Specify content ID here...
});
</script>
Below is your modified test code.
#{
ViewBag.Title = "FUT Player Cards";
}
<div class="content-wrapper">
<section class="content-header">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<h1>To Dos & Done</h1>
</div>
<div class="col-sm-6 d-none d-sm-block">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item active">To Dos & Done</li>
</ol>
</div>
</div>
</div>
</section>
<section class="content ">
<div class="container-fluid ">
<div class="row">
<div class="col-12 col-sm-6">
<div class="card card-primary card-tabs">
<div class="card-header p-0 pt-1">
<ul class="nav nav-tabs" id="custom-tabs-two-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="custom-tabs-two-home-tab" data-toggle="pill" href="#custom-tabs-two-home" role="tab" aria-controls="custom-tabs-two-home" aria-selected="false">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="custom-tabs-two-profile-tab" data-toggle="pill" href="#custom-tabs-two-profile" role="tab" aria-controls="custom-tabs-two-profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="custom-tabs-two-messages-tab" data-toggle="pill" href="#custom-tabs-two-messages" role="tab" aria-controls="custom-tabs-two-messages" aria-selected="false">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" id="custom-tabs-two-settings-tab" data-toggle="pill" href="#custom-tabs-two-settings" role="tab" aria-controls="custom-tabs-two-settings" aria-selected="false">Settings</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content" id="custom-tabs-two-tabContent">
<div class="tab-pane show active" id="custom-tabs-two-home" role="tabpanel" aria-labelledby="custom-tabs-two-home-tab">
<b>Tab-1</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada lacus ullamcorper dui molestie, sit amet congue quam finibus. Etiam ultricies nunc non magna feugiat commodo. Etiam odio magna, mollis auctor felis vitae, ullamcorper ornare ligula. Proin pellentesque tincidunt nisi, vitae ullamcorper felis aliquam id. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin id orci eu lectus blandit suscipit. Phasellus porta, ante et varius ornare, sem enim sollicitudin eros, at commodo leo est vitae lacus. Etiam ut porta sem. Proin porttitor porta nisl, id tempor risus rhoncus quis. In in quam a nibh cursus pulvinar non consequat neque. Mauris lacus elit, condimentum ac condimentum at, semper vitae lectus. Cras lacinia erat eget sapien porta consectetur.
</div>
<div class="tab-pane " id="custom-tabs-two-profile" role="tabpanel" aria-labelledby="custom-tabs-two-profile-tab">
<b>Tab-2</b> Mauris tincidunt mi at erat gravida, eget tristique urna bibendum. Mauris pharetra purus ut ligula tempor, et vulputate metus facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas sollicitudin, nisi a luctus interdum, nisl ligula placerat mi, quis posuere purus ligula eu lectus. Donec nunc tellus, elementum sit amet ultricies at, posuere nec nunc. Nunc euismod pellentesque diam.
</div>
<div class="tab-pane " id="custom-tabs-two-messages" role="tabpanel" aria-labelledby="custom-tabs-two-messages-tab">
<b>Tab-3</b> Morbi turpis dolor, vulputate vitae felis non, tincidunt congue mauris. Phasellus volutpat augue id mi placerat mollis. Vivamus faucibus eu massa eget condimentum. Fusce nec hendrerit sem, ac tristique nulla. Integer vestibulum orci odio. Cras nec augue ipsum. Suspendisse ut velit condimentum, mattis urna a, malesuada nunc. Curabitur eleifend facilisis velit finibus tristique. Nam vulputate, eros non luctus efficitur, ipsum odio volutpat massa, sit amet sollicitudin est libero sed ipsum. Nulla lacinia, ex vitae gravida fermentum, lectus ipsum gravida arcu, id fermentum metus arcu vel metus. Curabitur eget sem eu risus tincidunt eleifend ac ornare magna.
</div>
<div class="tab-pane " id="custom-tabs-two-settings" role="tabpanel" aria-labelledby="custom-tabs-two-settings-tab">
<b>Tab-4</b> Pellentesque vestibulum commodo nibh nec blandit. Maecenas neque magna, iaculis tempus turpis ac, ornare sodales tellus. Mauris eget blandit dolor. Quisque tincidunt venenatis vulputate. Morbi euismod molestie tristique. Vestibulum consectetur dolor a vestibulum pharetra. Donec interdum placerat urna nec pharetra. Etiam eget dapibus orci, eget aliquet urna. Nunc at consequat diam. Nunc et felis ut nisl commodo dignissim. In hac habitasse platea dictumst. Praesent imperdiet accumsan ex sit amet facilisis.
</div>
</div>
</div>
<!-- /.card -->
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Control sidebar content goes here -->
<div class="p-3">
<h5>Title</h5>
<p>Sidebar content</p>
</div>
</aside>
<!-- /.control-sidebar -->
#section Scripts{
<script>
$(document).ready(function(){
var url = window.location.href;
var activeTab = "#custom-tabs-two-profile-tab"; // Specify tab ID here...
$(".nav-tabs li a").click(function(){
$(".nav-tabs li a").removeClass("active");
$(this).addClass("active");
$(".tab-pane").removeClass("show active");
});
$(activeTab).trigger('click');
$('#custom-tabs-two-profile').addClass("show active"); // Specify content ID here...
});
</script>
}
Output:
Note: You could notice that I have activated the second tab page.
You could modify the code as per your own requirements.
I was able to fix it using:
$(function () {
var t = '#selectedtab';
if (t.length > 0) {
$('#myTabs a[href="#' + t + '"]').tab('show');
}
});
I am attempting to build a search engine with an Elasticsearch backend and a Vue.js front end. It is primarily based upon this tutorial. It was suggested that a nice feature would be to highlight search results with the initial search term ie if I search "foo" in the search bar, then a search result would look something like foobar.
I have tried placing the v-html block into various divs, but usually to no success.
My elastic index records that match this format:
result._source.Title,
result._source.description,
result._source.contact,
result._source.contactEmail
HTML:
<div class="row">
<div class="col-md-6" v-for="result in results" v-html="highlight(result._source.Title)">
<div class="ul">
<ul>
<li>{{ result._source.Title }},</li>
<li>{{ result._source.description }},</li>
<li>{{ result._source.contact }},</li>
<li>{{ result._source.contactEmail }} </li>
JS: highlight function
highlight(text) {
return text.replace(new RegExp(this.query, 'gi'), '<span class="highlight">$&</span>')
}
}
I have been able to implement basic functionality to highlight a single data point, but the rest of the page does not render. For instance, in this example, title will be highlighted, but the description, contact, and contactEmail will not render on the page. Additionally, if the search term does not match the title, the page errors out.
It's likely due to to the function call in your v-html directive: highlight(result._source.Title).
Instead you should be using v-html to bind to each result property, which allows you to replace occurrences in any of the properties before updating the template.
Try updating your code similar to the following:
new Vue({
el: '#app',
data() {
return {
content: [{
title: 'Result 1',
text: `Phasellus euismod neque diam, aliquam commodo neque venenatis in. Sed non eros lorem. Fusce sit amet gravida nunc. Nunc non pulvinar tellus. Donec rutrum sagittis nulla eu commodo. Morbi condimentum molestie tortor venenatis dignissim. Aenean ac ligula at lectus pharetra sagittis. Integer convallis ipsum ex, ut congue urna auctor in. Sed consequat elit ipsum, eu vestibulum nisl egestas sit amet. Aenean eu mi et metus congue porttitor ut vitae augue. Donec congue semper euismod. Nam eget turpis eros. In vitae viverra eros.`
},
{
title: 'Result 2',
text: `Nunc vehicula lorem a enim pharetra pellentesque. Nullam nulla nisi, imperdiet at blandit in, molestie sed ipsum. Curabitur elit nisl, aliquam vel urna at, tincidunt interdum tortor. Sed lacinia urna non tellus consectetur molestie. Cras nunc justo, suscipit eu luctus eget, viverra at nisl. Curabitur ut sodales justo, sit amet varius arcu. Nulla non varius justo, ut mattis diam. Nam venenatis malesuada enim. Ut id convallis augue. Pellentesque pretium aliquam porttitor. Donec at velit pulvinar, consequat eros at, ultrices urna. Sed non nisl tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam dictum ipsum dolor, vitae volutpat dolor porta non.`
},
{
title: 'Result 3',
text: `Morbi bibendum justo enim, aliquam placerat magna euismod in. Sed ullamcorper augue ac nisl efficitur, eget ullamcorper neque rhoncus. Duis ac tristique orci. Curabitur lorem purus, varius eu sodales non, feugiat auctor orci. Pellentesque feugiat, felis eu accumsan ornare, lacus metus ultrices ipsum, vitae consequat velit neque in sapien. Nunc fringilla sollicitudin hendrerit. Vestibulum at massa convallis, finibus lacus ac, venenatis nulla. Nulla in condimentum metus. Donec sagittis nulla sed elit semper tristique. Vivamus facilisis sed lectus sed semper.`
},
{
title: 'Result 4',
text: `Phasellus suscipit eros ex, sed auctor turpis accumsan non. In ultrices convallis sem id tempor. Sed elementum ac lectus et scelerisque. Mauris vel leo a sem elementum volutpat. Vestibulum congue urna id velit porta, id scelerisque nulla pulvinar. Aliquam sit amet iaculis enim. Vestibulum enim tortor, sodales ut pharetra semper, eleifend sed lectus. Phasellus fringilla leo vel turpis feugiat lacinia. Morbi neque dui, vulputate eget molestie non, hendrerit eu felis. Phasellus erat erat, tempus ut mi ut, maximus dapibus nulla. Phasellus dignissim sollicitudin velit sit amet rhoncus. Curabitur commodo magna eget ex consequat, eget sollicitudin metus rhoncus. Aenean enim libero, dictum nec tempus quis, molestie at nulla.`
},
{
title: 'Result 5',
text: `Mauris ullamcorper mauris nec justo sodales, ac facilisis ipsum fringilla. Nam at urna eu ante luctus dignissim. In sit amet magna aliquam nibh tincidunt luctus vitae at arcu. Proin eu cursus tortor. Proin porttitor erat ac tortor ullamcorper lacinia. Curabitur sit amet ullamcorper ligula, rhoncus euismod est. Praesent non quam fermentum, bibendum lectus vel, auctor enim. Fusce eu viverra lectus. In molestie sit amet velit bibendum accumsan. Donec venenatis, urna sed convallis gravida, est est luctus mi, quis maximus ipsum metus sit amet ex. Vestibulum et nisi eu enim faucibus fermentum. Pellentesque pellentesque ultrices risus vel rutrum. Curabitur hendrerit urna in leo finibus rutrum. Maecenas posuere ultricies lectus eget elementum. Sed lacinia efficitur nisl, ac gravida urna ullamcorper consectetur. Aliquam erat volutpat.`
}
],
search: null
}
},
computed: {
blocks() {
if (this.search) {
const regex = new RegExp(this.search, 'g')
return this.content.map(c => {
return {
title: c.title.replace(regex, `<span class="highlight">${this.search}</span>`),
text: c.text.replace(regex, `<span class="highlight">${this.search}</span>`)
}
})
}
return this.content
}
}
})
.highlight {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="text" v-model="search">
<ul>
<li v-for="(block,i) in blocks" :key="i">
<p>Title: <span v-html="block.title"></span></p>
<p>Text: <span v-html="block.text"></span></p>
</li>
</ul>
</div>
I have issue with margin on dompdf using plain html. I have added margin-top to div but adds some extra space at the the end of element.
It works perfectly if no margin-top is added. As shown in following screenshot
As I add margin-top to div it adds extra spacing at the end of that div as shown in following screenshots. HTML is perfect but issue in generated pdf only.
HTML 1:
PDF 1:
HTML 2:
PDF 2:
I searched a lot for the issue but cannot find any solution regarding this why it adds space after the element when I use margin-top:15px; I tried margin: 15px 0 0 0; but no luck with that too.
I am using latest version of dompdf
HTML Code snippest:
*{margin:0; padding:0}
body { padding: 50px 0; margin: 0px; font-family: Georgia; }
ul{padding-left:40px; }
.resume-container {width: 90%;margin:0 auto;background-color: #fff;}
.reasume-header{width: 100%; border-bottom: 1px solid #DADADA}
.reasume-header .head{font-weight: bold;font-size: 28px;}
.small-font {font-size: 12px;}
.header{margin-top:15px; margin-bottom:0;}
h1{font-size: 20px; font-weight: bold; margin: 0px;}
.content{margin-top: 15px}
#template1 .header .title-header h1{background: #769AC2; color: #FFF; padding: 5px 0; text-align:center}
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"><title>Resume</title><style type="text/css">
</style>
</head>
<body>
<div class="resume-container" id="template1">
<div class="header w100 temp6-hidden" border="0" id="expertise_part" style="clear:both;">
<div class="w100 align-top title-header">
<h1>EXPERTISE</h1>
</div>
<div class="inner-content" style="clear:both;">
<div class="content details" style="background: #F0F0F0">
<ul>
<li>Wide range of design experience building mobile sites to E-Commerce front end sites.</li>
<li>Expert in Joomla and WordPress Customization.</li>
<li>Highly proficient in Photoshop, Illustrator, HTML5 and XSLT.</li>
<li>Experienced with social media marketing and search engine optimization.</li>
<li>Highly skilled in layout designs for print in InDesign and custom logotypes.</li>
</ul>
</div>
<div class="content details">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac massa a felis molestie blandit sed a ex. Nullam rutrum mi et ultricies pellentesque. Proin ullamcorper, nunc eget mattis pellentesque, sem urna sagittis lacus, vitae scelerisque metus mauris eu magna. Integer commodo, ipsum ac ullamcorper aliquet, mauris massa imperdiet lorem, eget consectetur turpis quam sed neque. Nulla condimentum sem tortor, non imperdiet nunc fermentum nec. Donec lacus risus, dictum nec sem at, dapibus sagittis lectus. Duis tincidunt elit eu dui placerat pretium. Aliquam elementum urna ex, vel facilisis nunc dictum sit amet.Duis volutpat tincidunt laoreet. Nullam congue, metus vitae dapibus varius, ipsum turpis sollicitudin sapien, ut faucibus tellus erat id magna. Nunc consectetur dolor vel molestie lobortis. Proin volutpat commodo metus, non luctus turpis pulvinar et. Aliquam erat volutpat. Etiam consequat imperdiet ligula. Quisque finibus, nibh sit amet posuere maximus, diam dolor volutpat lacus, ut luctus enim dolor sed urna. Donec nec enim ut risus cursus tincidunt ut et libero.
</div>
</div>
</div>
<div class="header w100 temp6-hidden" border="0" id="education_part">
<div class="w100 align-top title-header">
<h1>EDUCATION</h1>
</div>
<div class="inner-content">
<div class="w100 content " style="background: #F0F0F0">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="lft" style="width:60%">
<strong class="dt_area">ABC University</strong>
</td>
<td align="right" style="width:40%;"><strong class="dt_area">INDIA, Kerala</strong></td>
</tr>
<tr>
<td class="lft" style="width:60%"><strong class="dt_area">MCA</strong></td>
<td align="right" style="width:40%;"><strong class="dt_area"><strong class="dt_area">2/2001 - 3/2004</strong></strong></td>
</tr>
</table>
</div>
<div class="content details" style="width:100%;clear:both;font-size: 14px; font-family:Arial;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac massa a felis molestie blandit sed a ex. Nullam rutrum mi et ultricies pellentesque.<br />
Proin ullamcorper, nunc eget mattis pellentesque, sem urna sagittis lacus, vitae scelerisque metus mauris eu magna. Integer commodo, ipsum ac ullamcorper aliquet, mauris massa imperdiet lorem, eget consectetur turpis quam sed neque.<br />
Nulla condimentum sem tortor, non imperdiet nunc fermentum nec. Donec lacus risus, dictum nec sem at, dapibus sagittis lectus. Duis tincidunt elit eu dui placerat pretium. Aliquam elementum urna ex, vel facilisis nunc dictum sit amet.
</div>
</div>
</div>
</div>
</body>
</html>
What's wrong with my font face here? i cant figure it out and apparently this isn't long enough
#media not print{}
body {color: #635959; font-family: news_cycle; }
header { background-color: #242323;
color: #EFEFEF;
font-family: contail_one;
}
article h3, h4 {color: #8C1018; }
article a {color: #314052;}
}
header h1 {font-size: 4em;}
figure > figcaption {font-size: 0.75em; font-style: italic;}
main figure > figcaption ::before { content: pictured above; font-weight: bold; }
article > time {float: right; font-size: 0.75em; font-weight: lighter; }
#media not print {
main > h3 {
font-size: 2em;
}
}
header {padding: 20px 50px;}
main padding: {5px 10px;}
#font-face { font-family: news_cycle; src: url('../css/news_cycle.ttf') format('truetype')}
#font-face {font-family: contail_one; src: url('../css/contail_one.ttf') format('truetype')}
article {margin: 5px 0px; padding: 5px 5px; box-shadow: 1px 1px 6px #888888}
media print {
header {padding: 0px;}
article {box-shadow: none;}
header h1 {font-size: 2em;}
header h2 {display: none;}
}
<!doctype html>
<html lang="en-us">
<head>
<title> Contoso News </title>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>
<body>
<header>
<h1> Contoso news </h1>
<h2> on time, on topic </h2>
</header>
<main>
<h3> Latest Articles </h3>
<article>
<time datetime="16-01-2016">`Friday, Jan 16 </time>
<h4>International Story</h4>
<p>Curabitur pharetra luctus augue, non posuere orci tristique vel. Sed posuere nisi nec lacus ullamcorper, ac vulputate nisl consequat. Nullam sollicitudin nulla vel felis faucibus aliquam. Nunc sit amet velit orci. Proin sed orci fringilla, elementum felis condimentum, convallis augue. Aliquam erat volutpat. Mauris tempus nunc sit amet aliquet bibendum. Praesent vestibulum cursus ex, quis laoreet eros consectetur ac. Ut congue libero quis mauris egestas feugiat. Sed pharetra lorem et magna fringilla, a volutpat nibh sollicitudin. Nullam sagittis sollicitudin urna, sed sollicitudin mauris ornare id. read more... </p>
</article>
<article>
<time datetime="14-01-2016">`wednesday, Jan 14 </time>
<h4>Finance Story</h4>
<p>Nullam tempor mi at libero elementum varius. Sed lobortis lacus feugiat est tristique, nec imperdiet turpis scelerisque. Ut sed urna malesuada, scelerisque dui sit amet, tempus mauris. Integer bibendum egestas urna, a bibendum sem gravida quis. Cras accumsan rhoncus vestibulum. Nam eu blandit leo. Integer at consectetur nunc, et tempus urna. Integer sit amet sollicitudin elit. Donec nec posuere erat. Sed vestibulum nisl neque, vitae tincidunt ex molestie quis. Nulla fringilla viverra turpis in volutpat. Cras vel orci quis velit efficitur ullamcorper sed eu ex. Nullam vel ex nec lectus imperdiet luctus vitae vel nibh.
</p>
<figure>
<img src="../images/img.jpg" alt="debit card">
<figcaption> New Debit Cards with Chip-Based Security. </figcaption>
</figure>
<p> Donec eleifend velit eros, eu efficitur justo molestie id. In egestas gravida lectus. Ut ipsum odio, suscipit sit amet molestie non, scelerisque sed mi. Aenean sed augue eu arcu faucibus molestie. Sed eget ante gravida, rhoncus velit eu, tempus quam. Sed fermentum at odio sed commodo. Fusce lobortis cursus purus, quis consequat est faucibus at. Etiam massa felis, sodales at sodales sed, iaculis quis arcu. <a href+"#" target="_blank"> read more... </a></p>
</article>
<article>
<time datetime="14-01-2016">`wednesday, Jan 14 </time>
<h4>Technology Story</h4>
<p>Morbi eget justo ut velit dapibus malesuada. Nunc elementum, neque quis convallis tempus, lacus ante tristique est, id porta tortor leo eget orci. Suspendisse hendrerit interdum lacus et condimentum. Mauris at ex dignissim, bibendum libero at, fermentum lectus. Maecenas porttitor purus quis augue interdum, eget malesuada neque placerat. Ut hendrerit risus in nibh elementum, quis vestibulum ipsum vulputate. Nulla facilisi. In consectetur et lacus vel tincidunt. Quisque feugiat ipsum et erat rhoncus efficitur. In in augue at enim tempor sollicitudin.<a href+"#" target="_blank"> read more... </a></p>
</article>
</main>
<h4> sign up for our emails </h4>
<summary>
<form>
<label> e-mail address: </label>
<input type="text" id="label1" name="email" required>
<label for="label2"> Delivery Preference: </label>
<select>
<option value="daily"> daily </option>
<option value="weekly"> weekly </option>
<option value="monthy"> monthly </option>
</select>
<input type="submit" value="sign-up">
</summary>
</body>
</html>
I should build this layout
layout
but after various tests, I don't understand how place the image.
The text continues from one div to another. I've think to use the column CSS3 property but I think it's not the better solution.
How can I implement this layout?
Thanks in advice.
EDIT:
This is the HTML and CSS code of the last test:
.span11{
width: 90%;
display: block;
margin: 0 auto;
-moz-column-count: 2;
-moz-column-gap: 20pt;
-webkit-column-count: 2;
-webkit-column-gap: 20pt;
column-count: 2;
column-gap: 20pt;
}
#foto{
float: right;
margin-top: 50px;
}
<div class="span11">
<div id="foto">
<img src="http://fpoimg.com/600x400?text=Preview" >
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in dui ellus.Pellentesque ac mi neque. Nulla ultricies nulla diam. Nulla luctus risus a ante varius euismod. Fusce viverra molestie enim, malesuada condimentum est consectetur id. Vestibulum laoreet libero vitae metus cursus, a auctor tellus tempor. Suspendisse lacinia tempus metus et lobortis. Suspendisse nec sapien eleifend, viverra lacus ut, pulvinar quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in dui tellus. Pellentesque ac mi neque. Nulla ultricies nulla diam. Nulla luctus risus a ante varius euismod. Fusce viverra molestie enim, malesuada condimentum est consectetur id. Vestibulum laoreet libero vitae metus cursus, a auctor tellus tempor. Suspendisse lacinia tempus metus et lobortis. Suspendisse nec sapien eleifend, viverra lacus ut, pulvinar quam.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in dui tellus. Pellentesque ac mi neque. Nulla ultricies nulla diam. Nulla luctus risus a ante varius euismod. Fusce viverra molestie enim, malesuada condimentum est consectetur id. Vestibulum laoreet libero vitae metus cursus, a auctor tellus tempor. Suspendisse lacinia tempus metus et lobortis. Suspendisse nec sapien eleifend, viverra lacus ut, pulvinar quam.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in dui tellus. Pellentesque ac mi neque. Nulla ultricies nulla diam. Nulla luctus risus a ante varius euismod. Fusce viverra molestie enim, malesuada condimentum est consectetur id. Vestibulum laoreet libero vitae metus cursus, a auctor tellus tempor. Suspendisse lacinia tempus metus et lobortis. Suspendisse nec sapien eleifend, viverra lacus ut, pulvinar quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in dui tellus. Pellentesque ac mi neque. Nulla ultricies nulla diam. Nulla luctus risus a ante varius euismod. Fusce viverra molestie enim, malesuada condimentum est consectetur id. Vestibulum laoreet libero vitae metus cursus, a auctor tellus tempor. Suspendisse lacinia tempus metus et lobortis. Suspendisse nec sapien eleifend, viverra lacus ut, pulvinar quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in tellus. Pellentesque ac mi neque. Nulla ultricies nulla diam. Nulla luctus risus a ante varius euismod. Fusce viverra molestie enim, malesuada condimentum est consectetur id. Vestibulum laoreet libero vitae metus cursus, a auctor tellus tempor. Suspendisse lacinia tempus metus et lobortis. Suspendisse nec sapien eleifend, viverra lacus ut, pulvinar quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in dui tellus. Pellentesque ac mi neque. Nulla ultricies nulla diam. Nulla luctus risus a ante varius euismod. Fusce viverra molestie enim, malesuada condimentum est consectetur id. Vestibulum laoreet libero vitae metus cursus, a auctor tellus tempor. Suspendisse lacinia tempus metus et lobortis. Suspendisse nec sapien eleifend, viverra lacus ut, pulvinar quam.
</div>
This is Jsfiddle of the last test:
http://jsfiddle.net/DVwws/
After working with the example you found here I was able to edit the source code and eventually create a JSFiddle with your desired result.
General guide to accomplish this:
Create two side-by-side divs filled with text
Use the "Content" CSS property to create "holes" in your paragraphs where they are desired with content: ""; width: 125px; height: 250px;.
Use absolute positioning to place an image within that "hole" you created.
This image should assist in understanding the placing concept: (Just imagine the green-section as being the hole and centered vertically)
Here is the HTML and CSS from the JSFiddle I made:
<style>
#page-wrap { width: 100%; margin: 80px auto; position: relative; }
#logo { position: absolute; top: 125px; left: 50%; margin-left: -125px; }
.left, .right { width: 49%; text-align: justify}
.left { float:left; }
.right { float:right; }
#l, #r { width: 100%; position: relative;}
#l { float: left; text-align: justify}
#r { float: right; text-align: justify}
#l:before, #r:before { content: ""; width: 150px; height: 250px; vertical-align:-50%;}
#l:before { float: right;}
#r:before { float: left; }
</style>
AND
<div id="page-wrap">
<img src="http://placekitten.com/250/250" id="logo">
<div class="left">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. <div id="l">Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metuPellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt conum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursusdiment faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. </div>Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</div>
<div class="right">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. <div id="r">Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. </div>Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</div>
</div>
Also since you said you were loading your text dynamically from a data-base here is an easy way to calculate it's length and break it into two equal chunks.
<?php
//some SQL Queries setting $str
$len = strlen($str);
$part1 = substr($str, $len/2);
$part2 = substr($str, $len/2+1,$len);
// Insert $part1 & $part2 text chunks into each div.
?>
NOTE: Due to the exact cut, if that character number is in the middle of a word that word will be cut into two parts. There are resources to easily figure out how to cut on the next space; but that does not pertain to this specific question.