I'm a newbie to Bootstrap and I'm having a problem getting two sibling columns to render to the same height under a parent DIV. Basically, I'm trying to create a "blackboard" next to the video which I'd like to render 100% with the video player but with a black background when the page loads.
Here's the code:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Responsive Custom Video Player</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<style type="text/css">
.jumbotron {
padding: 0;
margin-bottom: 0;
}
.blackboard {
background-color: #000;
color: #fff;
min-height: 100%;
margin: 0 auto;
text-align: left;
}
</style>
<div class="row jumbotron">
<div class="player col-sm-6">
<video width="100%" poster="videos/poster.jpg" id="videoPlayer">
<source src="videos/BigBuckBunny_512kb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="blackboard col-sm-6">
BLACKBOARD
</div>
</div>
</body>
</html>
The "blackboard" DIV is only rendering the height of the text inside the DIV. The jumbotron's default background-color of #eee fills the rest of the DIV.
This works but it seems a bit hacky. Add ID selectors to those two DIVs and:
// Force blackboard to the same height as the player.
$(window).resize(function() {
$("#blackboard").height($("#player").height());
})
$(window).resize(); // On page load
I'm loading basic HTML into DOMPDF. In landscape mode, all the pages after the first are overlapping.
Here is my (basic) HTML which renders fine in the browser:
<div id="certificates-layout-1" style="<?php echo $styles['outer-container']; ?>">
<div style="<?php echo $styles['inner-container']; ?>">
<div style="<?php echo $styles['fullname']; ?>">
<?php echo $data['fullname']; ?>
</div>
<div style="<?php echo $styles['fullcouncil']; ?>">
<?php echo $data['fullcouncil']; ?>
</div>
<div style="<?php echo $styles['session_date']; ?>">
<?php echo $data['session_date']; ?>
</div>
</div>
</div>
Here is my DOMPDF render logic:
$filename = (isset($params['filename'])) ? $params['filename'] : 'ubcdet_report_' . date('YmdHis') . '.pdf';
$lib = $_SERVER['DOCUMENT_ROOT'] . '/sites/all/libraries/vendor/';
require_once($lib . "dompdf/dompdf/dompdf_config.inc.php");
$dompdf = new DOMPDF();
$dompdf->load_html($report);
$dompdf->set_paper('letter', 'landscape');
$dompdf->render();
$dompdf->stream($filename, array("Attachment" => false));
exit(0);
I tried with A4 paper as well, same result.
I also tried moving the render() BEFORE set-paper and the overlapping issue goes away, but it will ONLY render as portrait (tried A4 here as well).
I have not tried outputing as actual file before rendering in browser for download, but I will.
This is what the result looks like...
Any suggestions appreciated. Thanks.
====================================
UPDATE Per Request from BrianS
Thanks for your attention. Here is a dump of the rendered HTML:
<html>
<head></head>
<body>
<div id="certificates-layout-1" style="font-family: Times New Roman; font-size:33px; text-align:center; page-break-after:auto;">
<div style="height:672px; width: 906px; border: thin solid #666666;">
<div style="font-size:45px; font-weight:bold; margin-top:96px; margin-bottom:10px;">John Smith</div>
<div style="margin-bottom:125px;">Council of Councils</div>
<div style="font-weight:bold;">April 16 - 19, 2015</div>
</div>
</div>
<style>
#font-face {
font-family: TimesBold;
src: url('/sites/all/modules/ubcdet/ubcdet_report/fonts/timesbd.ttf');
}
</style>
<style>
}
#page {
margin: 0;
}
html {
margin: 72px 76px;
}
body {
width: 1056px;
margin:0;
}
.hint {
background: none repeat scroll 0 0 #6AEA91;
font-size: 13px;
padding: 50px 10px;
text-align: center;
width: 250px;
position: absolute;
}
#media print {
.hint {
display:none;
}
}
</style>
</body>
</html>
I don't think there's anything too unusual in there, but maybe I'm wrong. Let me know if you need additional information. Thanks.
Heights are a tricky thing in dompdf when you're pushing against the page boundaries. For full-page blocks I recommend using positioned content. If this isn't possible I'd set DOMPDF_DPI to 72 (the fixed "pixel" depth of a PDF) so that you get a one-to-one translation from HTML to PDF.
In general I suggest using percents to better place an element within the page boundaries, except that dompdf is a bit more fuzzy around the page margins so you have to give a few extra pixels there if you need to fit content to a page (this is why I usually go for positioned content for full-page elements).
In your case let's work with a paper size of A4 in landscape (since you mentioned it). That paper size/layout gives you a height of roughly 595 pixels. Adding up all the heights your document totally blows past that (>1100 in a rough estimate) which means paging will occur. dompdf is dragging the last line of the container to the next page. So this explains the text layout for the initial block.
As for why the layout breaks so horribly after that ... I have no idea. Usually a layout break is due to poorly-formed HTML, but yours is just fine. Were I to guess I'd say a parent element is lost on page break resulting in null positioning information. This is something we'll have to look at.
Before I continue some notes:
You only need to set margins on the page level. If I recall correctly that defines the margin for the HTML element. The body margin is not defined and so default to 0px.
body height and width is always the height/width of the page content area; no need to set that unless you really want the body to not fill the page.
dompdf does not yet support box-sizing (otherwise this would all be much simpler). height and width are defined by the content box and extra margin/padding is added to the content box to get the full box size (plus keep in mind the mysterious extra padding required around the page margins).
I changed up your HTML/CSS a bit to make it do what you want. Simpler is better, especially for dompdf.
<html>
<head>
<style>
#page {
size: a4 landscape;
margin: 72px 76px;
}
body {
font-family: Times New Roman;
font-size: 33px;
text-align: center;
border: thin solid #666666;
}
.certificate-name {
font-size: 45px;
font-weight: bold;
margin-top: 96px;
margin-bottom:10px;
}
.certificate-title {
margin-bottom: 125px;
}
.certificate-date {
font-weight: bold;
}
</style>
</head>
<body>
<div id="certificates-layout-1">
<div class="certificate-name">John Smith</div>
<div class="certificate-title">Council of Councils</div>
<div class="certificate-date">April 16 - 19, 2015</div>
</div>
<div id="certificates-layout-2">
<div class="certificate-name">John Smith</div>
<div class="certificate-title">Council of Councils</div>
<div class="certificate-date">April 16 - 19, 2015</div>
</div>
</body>
</html>
When working with any tools you should always keep in mind it's strength and weaknesses ... and dompdf has its fair share of weaknesses.
I want my page's content to take up the full width of the screen with a little padding on the right and left and be fluid, but when I wrap my div.row and div.col-md-x in a <div class="container-fluid"> the page's content touches the sides of the screen.
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
What is the proper, Bootstrap way to have a 100% width, fluid layout, and 15px padding on the left and right?
As per the Bootstrap docs:
Use .container-fluid for a full width container, spanning the entire width of your viewport.
If you want 15px padding then add to your CSS:
.container-fluid {
padding: 15px;
}
However you may want to use a percent (padding: 2%) or media queries since 15px will look different on different screen resolutions.
Another option: use <div class="container"> instead of <div class="container-fluid">. This will give you built in padding.
Bootply demo
You can try an id to <div id="bd" class="container-fluid"> and if add this script after add Jquery you can padding when window resize, and can add more resolutions px with more "if" or only add padding-left or right.
<script>
$(document).ready(function(){
function paddingbd(){
if($(window).width()>800){
$("#bd").css("padding","30px");
}else{
$("#bd").css("padding","");
}
}
paddingbd();
$(window).on("resize",paddingbd);
});
<script>
the .row has a negative margin of 15px. try to add
.container-fluid {
padding: 15px 30px;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var currentImage = $('#slider div');
var nextImage = $('#slider').find('div').next;
var animation = .animate({'marginLeft' : "-=900px"}):
$(document).ready(function(){
$(currentImage).click(function(){
$(currentImage).animate();
});
});
</script>
</head>
<body>
<div id="slideshow">
<div id="slider">
<div id="image">
<img src="slide1.jpg" height="360px" width="960px">
</div>
<div id="image">
<img src="slide2.jpg" height="360px" width="960px">
</div>
<div id="image">
<img src="slide3.jpg" height="360px" width="960px">
</div>
</div>
</div>
</body>
</html>
and CSS
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body {
margin: 0;
}
p {
margin: 0;
}
#slideshow {
width: 100%;
float: left;
}
#slider {
margin: 10px auto;
height: 360px;
width: 900px;
border: 1px solid #999;
overflow: hidden;
}
#slider #image {
height: 360px;
width: 900px;
float: left;
position: relative;
z-index: 2;
}
This is a HTML (with Jquery in it) and a CSS file.
What i am trying to do is that if you click on an #image, the #image wil animate 900px to the left.
But i have a problem because nothing happen if i click on #image.
Can someone help me?
P.S. I am from the Netherlands, so I apologise if I have bad English.
You have a lot wrong with your script ... try this out:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="slideshow">
<div id="slider">
<div class="image">
<img src="slide1.jpg" height="360px" width="960px">
</div>
<div class="image">
<img src="slide2.jpg" height="360px" width="960px">
</div>
<div class="image">
<img src="slide3.jpg" height="360px" width="960px">
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var currentImage = $('#slider').find('div').first(),
nextImage = currentImage.next();
currentImage.click(function(){
$(this).animate({marginLeft:"-=900px"});
});
});
</script>
</body>
Couple points:
As was called out, make your images use a class instead of an id if you want to reuse the name. Multiple elements with the same id is invalid HTML.
You did not close <div id="slideshow"> ... I added the closing tag.
Move your script down to the bottom of the body ... this is best practice to improve the speed of page rendering (otherwise the page needs to parse the entire script before displaying any content).
Your use of .next() was incorrect ... it is a function, and all functions are called at bare minimum with open/close parenths.
You were already caching #slider div, so I leveraged that existing cachine when searching for nextImage (I applied the .first() function because it will get all of the divs if you don't filter it somehow.
Your storage of the animation was ... wrong, in about every way possible. You can store the animation in variable as a function, but only for reuse, and clearly you are not ready for that yet. I moved the animation down to where it should be, which is applied to the element in the click event itself.
When referencing the DOM names in the .animate() function, you only need to apply quotation marks if you use the CSS version ('margin-left' instead of marginLeft).
No guarantees that this will do what you think it should do because your CSS is ... too much to handle right now, but at least your HTML and JS will now be valid and you can focus on the problem at hand.
I've searched and tried several of the solutions to no avail. I'm currently using jQuery 1.7.1 and Nivo Slider 3.0.1 .
You can see the website at http://www.wheelerbikeclub.net (this is a website I created last year and I'm just coming back to now).
None of the effects on my nivo slider in my home page are working. I know there was a point last year where they were, but then I changed something and now they don't and I cannot recollect what it is that happened.
I've made sure the number of columns/boxs/slices evenly divide my images. Does anyone have any idea what the issue is? Is it somehow related to the fact that I'm forcing my slider to cover the entire screen?
Thanks for any feedback, I greatly appreciate it!
I make calls for the jQuery followed by NivoSlider script in the head section
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.3.0.1.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
Then in my body in a wrapper I put
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="img/new_slides/slide_1-3.png" alt="" title="#slide_1-caption"/>
<img src="img/new_slides/slide_2-4.png" alt="" />
<img src="img/new_slides/slide_4.png" alt="" />
<img src="img/new_slides/slide_3-1.png" alt="" />
</div>
<div id="slide_1-caption" class="nivo-html-caption">
<strong>Find Out More</strong>.
</div>
</div>
There are four images and I'm just testing the caption with image one.
In my nivo-slider css I have (not the entirety, just where I think the problem might lay)
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
z-index:2;
}
.nivo-slice {
display:block;
position:absolute;
z-index:100;
height:100%;
top:0;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
}
.nivo-box img { display:block; }
And in my main styles.css I have
.slider-wrapper { position:relative;
top: 0px;
left: 0px;
width: 100%;
position:fixed;
z-index:0; }
#slider-div { min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -30px; }
Hope that makes sense.