I want to create a sticky footer using Laravel 6 and Bootstrap 4. I tried to create it but I failed.
These are my files:
layout.blade.php:
<body>
#auth
#include('../inc/navbar')
#endauth
<div class="container" id="app">
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
#csrf
</form>
#yield('content')
</div>
#auth
#include('../inc/footer')
#endauth
</body>
footer.blade.php:
<nav class="navbar fixed-bottom bg-custom justify-content-end">
<b>Powered by Me</b>
</nav>
app.scss
body {
background-color: rgb(241, 230, 131);
}
nav {
height: 50px;
background-color: rgb(131, 215, 241);
}
I tried using the fixed-bottom class but in this way the footer remains always in the same position at the bottom of the screen even if the user scrolls a page with a lot of content. Can someone help me?
See the code below! Happy 2020!
//style
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
padding-top: 100px;
}
footer {
margin: auto auto 0 auto;
}
//html
<html>
<body>
<header>
<nav>..</nav>
</header>
<main>
<p>Lorem ipsum dolor sit amet!</p>
</main>
<footer></footer>
</body>
</html>
According to the docs the markup should be like below. See example here. The mt-auto class (margin-top:auto) in the example below sticks the element to the bottom of the page.
You've added both nav and fixed-bottom classes which aren't required, although you could probably achieve it with the fixed-bottom if you wanted to.
<footer class="footer mt-auto py-3">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
If you're still having problems, make sure your markup validates to make sure you don't have faulty html
Related
I am using barryvdh/laravel-dompdf to generate pdf.
I'm trying generate one pdf file with multiple pages from data collection the problem is that I get only first element and one page. Using foreach loop to generate pages. Also I was trying to use foreach in my blade, but then I get only the last page.
Controller:
public function multiplePagesPdf(Request $request)
{
$kuponai = Kuponas::all();
//dd($kuponas);
$html = '';
foreach($kuponai as $kuponas)
{
$view = view('pdf.multiple')->with(compact('kuponas'));
$html .= $view->render();
}
$pdf = PDF::loadHTML($html);
$sheet = $pdf->setPaper('a4', 'landscape');
return $sheet->stream('sugeneruoti.pdf');
}
Maybe problem in my blade file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dovanų kuponas</title>
</head>
<body>
<div class="coupon">
<div class="page">
<div class="subpage">
<div class="container" style="
width: 21cm;
height: 16cm;
position: absolute;
top: 6.8cm;
font-family: DejaVu Sans;
background: white;
">
<h2>{{!! $kuponas->kupono_nr !!}}</h2>
<h3 style="margin-left: 3.2cm">
Dovanų kupono numeris:
<span style="color: black"></span>
</h3>
</div>
</div>
</div>
</div>
</body>
</html>
<style>
#page {
size: A4;
margin: 0;
}
#media print {
.page {
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
}
</style>
There are certain things that are wrong in the code snippet you have provided, I will explain those first then provide correct way of doing it(for which I get results).
Firstly
you have used with & compact together, I don't know if it gets correct results but you should use any one of them or use array syntax of view method.
Secondly
what you are doing it you are rendering the view to html & then concating it, so , your html would look like,
<html>
.... content
</html>
<html>
.... content
</html>
& so on.
Thirdly
You css is messed up & not working as you want because of inline css you have added.
Solution
I would have used View Components to create similar views with different data.
So we would create a component in resources/views/components/single.blade.php (here I have named it single).
I have added your repeative code in the component single from your view. Now your coupon div class is in the component single.
<div class="coupon">
<div class="page">
<div class="subpage">
<div>
<h2>{{ $kuponas->kupono_nr }}</h2>
<h3>
Dovanų kupono numeris:
<span></span>
</h3>
</div>
</div>
</div>
</div>
Then in your view,
<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
<title>Dovanų kuponas</title>
<style>
.page-break {
page-break-after: always;
}
</style>
</head>
<body>
#php $count = 0;#endphp
#foreach ($kuponai as $kuponas)
#php $count++ #endphp
<div class="container {{ (count($kuponai)-1 >= $count) ? 'page-break' : '' }}">
#component('pdf.components.single', ['kuponas' => $kuponas])
#endcomponent
</div>
#endforeach
</body>
</html>
use page-break class to create breaks, I have used count condition to remove one extra page break. I am passing the data of kuponas to the component.
Finally change your controller,
public function multiplePagesPdf(Request $request)
{
$kuponai = Kuponas::all();
//dd($kuponas);
$view = view('pdf.multiple', ['kuponai' => $kuponai]);
$html = $view->render();
$pdf = PDF::loadHTML($html)->setPaper('a4', 'landscape');
return $pdf->stream('sugeneruoti.pdf');
}
I am converting div element to image or screenshot. I've search throughout the internet and found out about html2canvas. I tried using it but no luck. Is there anyone who knows how to make it work? Here is my source code.
<html>
<head>
<title> Screenshot </title>
</head>
<body>
<div id="container">
<h1> Screen shot me </h1>
</div>
<button onclick = "screenshot()"> Capture </button>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script>
function screenshot(){
html2canvas(document.getElementById('container')).then(function(canvas){
document.body.appendChild(canvas);
})
}
</script>
</html>
My error keeps saying
Uncaught TypeError: html2canvas(...).then is not a function
at screenshot
at HTMLButtonElement.onclick. Did I miss something?
Im using Laravel 5.6 with NPM. Thankyou in advance!
Tested Chrome, Firefox ok, IE 11 needs adding 2 extra js library to support promise.
function takeSnapShot() {
html2canvas(document.querySelector("#capture")).then(function(canvas) {
document.querySelector("#newCanvas").appendChild(canvas);
});
}
<script src="https://cdn.jsdelivr.net/npm/es6-promise#4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise#4/dist/es6-promise.auto.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; "> Screen shot me </h4>
</div>
<input type="button" value="Capture" onclick="takeSnapShot()"/>
<div id="newCanvas"></div>
</html>
onselect event: when I click on this, this will change the class of element I inside, if I click on another, class of element I previous will change to the original.This is my code, but it does not work.
<ul id="type_list">
<li> <i class="fa fa-file-text-o" aria-hidden="true"></i> file 1</li>
<li> <i class="fa fa-file-text-o" aria-hidden="true"></i> file 2</li>
</ul>
// onselect
function onSelect(e)
{
$(e.item).find("> .k-link i.fa.fa-file-text-o").attr("class","fa fa-check");
$(this).find("> .k-link i.fa.fa-check").attr("class","fa fa-file-text-o");
In the onSelect, first reset all panelbar items to the original class, then set the class of the selected item (you can use jQuery functions removeClass and addClass):
function onSelect(e)
{
$("#type_list i.fa").removeClass("fa-check").addClass("fa-file-text-o");
$(e.item).find("i.fa").removeClass("fa-file-text-o").addClass("fa-check");
}
DEMO
header:
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
Body:
<ul id="panelbar">
<li>
SECTION1
<div>sdfsd sfjsdkfsd</div>
</li>
<li class="servicetable" id="side-by-side1">
ENGINE
<div>asdas asdasd</div>
</li>
<li class="servicetable" id="side-by-side2">
TRANSMISSION
<div>asdasdas asdasd</div>
</li>
<li>
PERFORMANCE
<div>There are three types of lists you can use, and this quick guide will show you how to use each. ... However, to create an ordered list, the ol tag is used rather than the ul tag. By ....</div>
</li>
</ul>
script:
$(document).ready(function() {
$("#panelbar").kendoPanelBar({
expandMode: "single"
});
});
Style:
.servicetable
{
vertical-align:top;
border:1px solid #000;
list-style:none;
padding:2px;
width:49.2%;
display:inline-block !important;
}
div.k-content{
width: 95vw;
padding:5px !important;
}
#side-by-side2 div.k-content{
margin-left: -49vw;
}
I have been working on this for a bit and am not savvy enough to know how to correctly implement it (such that it remains a responsive design).
I am running the free "responsive" wordpress theme by ThemeID on a test site and need to have the main body content text of the single article page wrap underneath the right sidebar and adjust "dynamically" as the sidebar changes height over time. I plan on having the "Archives" widget in this right sidebar, so over time it will grow in height...so the body text should not extend to underneath the sidebar until it reaches the bottom of the sidebar. Take a look at a mockup I made real quick to demonstrate what I mean.
Before: http://www.heliossolutions.net/responsive.jpg
After 2: http://www.heliossolutions.net/responsive3.jpg
As you can see, the text currently leaves a huge white space beneath the sidebar but I would like for it to be able to flow underneath and adapt to the sidebar height. It also needs to maintain the responsive nature of the theme and work correctly on mobile devices (i.e. the sidebar widgets should properly display underneath all the content when viewed on a mobile phone, as it does out-of-the-box).
Does this make sense?
The page code currently looks like this:
<!doctype html>
<!--[if lt IE 7 ]> <html class="no-js ie6" dir="ltr" lang="en-US"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7" dir="ltr" lang="en-US"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8" dir="ltr" lang="en-US"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" dir="ltr" lang="en-US"> <!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Title</title>
<meta name="template" content="Responsive 1.6.9" />
</head>
<body class="single single-post postid-36 single-format-standard">
<div id="container" class="hfeed">
<div id="header">
<div id="logo">
</div><!-- end of #logo -->
<ul class="menu"><li >Home</li></ul>
</div><!-- end of #header -->
<div id="wrapper" class="clearfix">
<div id="content" class="grid col-620">
<div id="post-36" class="post-36 post type-post status-publish format-standard hentry category-web-development">
<div class="post-meta">
<span class="meta-prep meta-prep-author">Posted on </span> July 2, 2012</span>
</div><!-- end of .post-meta -->
<div class="post-entry">
<p>Post content here.Post content here.Post content here.Post content here.Post content here.Post content here.Post content here.Post content here.</p>
</div><!-- end of .post-entry -->
<div class="post-data">
</div><!-- end of .post-data -->
<div class="post-edit"></div>
</div><!-- end of #post-36 -->
<div id="respond">
<h3 id="reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/blog/parallax-slider/#respond" style="display:none;">Cancel reply</a></small></h3>
<p class="must-log-in">You must be logged in to post a comment.</p>
</div><!-- #respond -->
</div><!-- end of #content -->
<div id="widgets" class="grid col-300 fit">
<div class="widget-wrapper">
<div class="widget-title">In Archive</div>
<ul>
</ul>
</div><!-- end of .widget-wrapper -->
</div><!-- end of #widgets --> </div><!-- end of #wrapper -->
</div><!-- end of #container -->
<div id="footer" class="clearfix">
<div id="footer-wrapper">
<div class="grid col-940">
<div class="grid col-540">
</div><!-- end of col-540 -->
<div class="grid col-380 fit">
<ul class="social-icons"></ul><!-- end of .social-icons --> </div><!-- end of col-380 fit -->
</div><!-- end of col-940 -->
<div class="grid col-300 copyright">
© 2012
</div><!-- end of .copyright -->
<div class="grid col-300 scroll-top">↑</div>
<div class="grid col-300 fit powered">
</div><!-- end .powered -->
</div><!-- end #footer-wrapper -->
</div><!-- end #footer -->
</body>
</html>
And the corresponding CSS (tried to give you more than enough, since I can't pinpoint the exact issue):
#content {
margin-bottom:20px;
}
.grid {
float:left;
margin-bottom:2.127659574468%;
padding-top:0;
}
.col-60,
.col-140,
.col-220,
.col-300,
.col-380,
.col-460,
.col-540,
.col-620,
.col-700,
.col-780,
.col-860 {
display:inline;
margin-right:2.127659574468%;
}
.col-620 {
width:65.957446808511%;
}
.post-meta {
clear:both;
color:#9f9f9f;
font-size:13px;
margin-bottom:10px;
}
.post-entry {
clear:both;
}
.post-data {
clear:both;
font-size:11px;
font-weight:700;
margin-top:20px;
}
.post-edit {
clear:both;
display:block;
font-size:12px;
margin:1.5em 0;
}
#widgets {
margin-top:40px;
}
.col-300 {
width:31.914893617021%;
}
.fit {
margin-left:0!important;
margin-right:0!important;
}
.widget-wrapper {
-webkit-border-radius:6px;
-moz-border-radius:6px;
background-color:#f9f9f9;
border:1px solid #d6d6d6;
border-radius:6px;
font-size:13px;
margin:0 0 20px;
padding:20px;
}
.clearfix:after,
#container:after,
.widget-wrapper:after {
clear:both;
content:"\0020";
display:block;
height:0;
max-height:0;
overflow:hidden;
visibility:hidden;
}
.clearfix,
#container,
.widget-wrapper {
display:inline-block;
}
.clearfix,
#container,
.widget-wrapper {
display:block;
}
Any ideas as how to do this? I know it is possible and probably a simple change, I'm just not adept enough at responsive CSS to see it!
Thanks,
D
[4/9/12 - Updated HTML code to show entire page, with extra Head info (javascript and style sheets) removed]
It's hard to tell because your HTML is not complete (most of the divs are not closed for example). However, both .widget-wrapper and .col-300 have bottom margins which if remove might do the trick.
I am creating a banner that resizes to fit the window (I got the code of a blog post) and it works fine in Firefox, but it doesn't display at all in IE8. Please help!!
<html>
<body>
<div style=”position:relative; width:100%; height:100%; margin:0px; padding:0px; left:0px;right:0px;z-index:1”><img src="https://na6.salesforce.com/servlet/servlet.ImageServer?id=01580000000pT8r&oid=00D80000000aYeL&lastMod=1273785188000" width=”100%”></div>
<div style=”z-index:2; position:relative; margin:0px; padding:0px;”>
</div>
</body>
</html>
You've not closed the img tag. It should be as follows:
<img src="https://na6.salesforce.com/servlet/servlet.ImageServer?id=01580000000pT8r&oid=00D80000000aYeL&lastMod=1273785188000" width=”100%” />
I'm guessing this is what's causing the problem. Maybe Firefox is a bit more clever than IE8 at recovering from bad markup.
EDIT:
Baloo's answer baffled me at first because I couldn't see what changes he'd suggested, but it appears another user had edited the question and removed those alternative char set speech characters.
Replace the utf-8 ” with latin1 "
<html>
<body>
<div style="position:relative; width:100%; height:100%; margin:0px; padding:0px; left:0px;right:0px;z-index:1"><img src="https://na6.salesforce.com/servlet/servlet.ImageServer?id=01580000000pT8r&oid=00D80000000aYeL&lastMod=1273785188000" width="100%"></div>
<div style="z-index:2; position:relative; margin:0px; padding:0px;">
</div>
</body>
</html>
Or rather, make sure you save it in the corrent encoding, IE8 plays nice over here