I know this has been discussed a lot of times, I tried everything but not success.
Everything I tried just not has any effect, other css working perfectly.
I can't understand why is not break div to a another page.
Here is my code:
HTML
<html>
<head>
<title> PDF </title>
<style>
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
* {
overflow: visible !important;
}
.myrow {
float:left;
width:100%;
padding:20 10px;
}
.pagebreak {
page-break-after:always;
clear:both;
display:block;
}
</style>
</head>
<body>
<div class="myrow">
Content
</div>
<div class="myrow">
Content
</div>
<div class="myrow">
Content
</div>
<div class="myrow">
Content
</div>
<div class="pagebreak"></div>
<div class="myrow">
Content
</div>
<div class="myrow">
Content
</div>
<div class="pagebreak"></div>
<div class="myrow">
Content
</div>
<div class="myrow">
Content
</div>
</body>
</html>
MY PHP
$pdf = new Pdf(array(
'margin-top' => 0,
'margin-right' => 0,
'margin-bottom' => 0,
'margin-left' => 0,
'disable-smart-shrinking',
'print-media-type',
));
$pdf->addPage(page.html);
Why is not working?
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 days ago.
Improve this question
In the following codes I used universal header and footer and my problem is that when I add universal footer(I mean this part of code : ) calendrer does not open and I can not select date and time there!! and when I remove footer everything is fine!! I wonder what should I do to overcome this problem.
Thank you for your help in advance
<?php
$title = "drinkmenu";
include "header.php" ?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php echo $title ?></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<style>
body {
background-image: url(images/salad.jpg);
color: white;
text-align: center;
background-size: cover;
background-attachment:fixed;
background-repeat: no-repeat;
mmargin-top: 90px;
display: flex;
flex-flow: column;
overflow-x: hidden;
}
.image {
display: block;
width: 100%;
height: 100%;
}
h2 , h3 {
margin-left: 1%;
color: white !important;
}
#booking {
margin-left: 1%;
background-color: rgb(43, 26, 8);
}
</style>
</head>
<body>
<div class="row">
<h2>Book a table</h2>
</div>
<div class="row">
<div class="col" id="booking">
<label for="sel1" class="form-label">Party size</label>
<select class="form-select form-select-lg mb-5" id="sel1" name="sellist1">
<option>1 person</option>
<option>2 persons</option>
<option>3 persons</option>
<option>4 persons</option>
<option>+5 persons</option>
</select>
<div class="">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<span>Select time with Date</span>
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<br/>
</div>
</div>
</div>
</div>
<script>
$(function() {
$('#datetimepicker1').datetimepicker({
format: 'HH:mm'
});
$('#datetimepicker2').datetimepicker({
format: 'MM/DD/YYYY HH:mm'
});
$('#datetimepicker3').datetimepicker({
format: 'hh:mm A',
});
});
</script>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="col" id="">
<img class="image" src="images/Bookatable.jpg" alt="Moroccan tomato salad">
</div>
</div>
<?php include "footer.php" ?>
</body>
</html>
i expect calendar works properly
I just learned coding world,,,, need some help please,,,
I want to make a display like this picture ..,
but I really don't know how ... I use br, but when it is applied to the mobile version, it gets messy,,,,
or can "while" or "do" make it look like in the picture ??
please help
this is my messy script
.crop {
width: 9%;
height: auto;
border:5px double;
overflow: hidden;
border-radius: 0px 20px;
float:left;
margin:0.3%;
}
<div class="crop">24</div>
<div class="crop">23</div>
<div class="crop">22</div>
<div class="crop">21</div>
<div class="crop">20</div>
<div class="crop">19</div>
<br><br>
<div class="crop">18</div>
<div class="crop">17</div>
<div class="crop">16</div>
<div class="crop">15</div>
<div class="crop">14</div>
<div class="crop">13</div>
<div class="crop">12</div>
<div class="crop">11</div>
<div class="crop">10</div>
<br><br>
<div class="crop">9</div>
<div class="crop">8</div>
<div class="crop">7</div>
<div class="crop">6</div>
<div class="crop">5</div>
<div class="crop">4</div>
<div class="crop">3</div>
<div class="crop">2</div>
<div class="crop">1</div>
Not quite sure what how it is supposed to behave on mobile. Are you looking for something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.wrapper {
display: flex;
}
.crop {
width: 9%;
height: auto;
border:5px double;
overflow: hidden;
border-radius: 0px 20px;
margin:0.3%;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="crop">24</div>
<div class="crop">23</div>
<div class="crop">22</div>
<div class="crop">21</div>
<div class="crop">20</div>
<div class="crop">19</div>
</div>
<div class="wrapper">
<div class="crop">18</div>
<div class="crop">17</div>
<div class="crop">16</div>
<div class="crop">15</div>
<div class="crop">14</div>
<div class="crop">13</div>
<div class="crop">12</div>
<div class="crop">11</div>
<div class="crop">10</div>
</div>
</body>
</html>
I am building a simple website with bootstrap4 and I am trying to set a carousel as the background. Is there any simple way to do it without keyframes?
You can use bootstrap default carousel with some tweaks, namely the z-index and position attributes.
Image 1, 2 and 3 must be replaced by your own images, without them it will not work very well and the size adapted to your needs, you can also add indicators for the image and arrows cycle through images.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Carousel Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
#demo{
position: absolute;
z-index: -1;
}
#frontpage{
color: red;
font-size: larger;
background-color: yellow;
opacity: 0.5;
padding: 50px;
}
</style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="Image1.jpg" alt="Image1" width="1920" height="1080">
</div>
<div class="carousel-item">
<img src="Image2.jpg" alt="Image2" width="1920" height="1080">
</div>
<div class="carousel-item">
<img src="Image3.jpg" alt="Image3" width="1920" height="1080">
</div>
</div>
</div>
<div id="frontpage">
My frontpage over the carousel
</div>
</body>
</html>
https://imgur.com/a/IhONUvY
here is a screenshot of my problem, there's 2 pie charts above each other, how do i make them go next to each other? I am using the google api for charts
Would this be a html or css edit? if so how would I go about changing where it is?
Im using SB admin 2 as a template, ive tried using tabs but im either not using them correctly or they're just not having it
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-4">
<div id="top5os" style="width: 700px; height: 300px; background:red;"></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-4">
<div id="top5country" style="width: 700px; height: 300px; background:blue;"></div>
</div>
</div>
</div>
use css like
div.container{
align: right;
or
float: right;
}
if neither of those work you can say
div.container{
position: fixed;
and
left: 900px;
}
I am trying to create a layout similar to this one where the different sections span the entire width of the screen. I was looking at the html/css for the layout and couldn't figure out why my view was not doing the same. (I am relatively new to creating pages).
I am using php to make creating the pages easier so I have a few files.
.jumbotron{
background: gray;
height: 50%;
margin-top: 10px;
}
.jumbotron p, h1 {
text-align: center;
}
.nav {
text-align: center;
padding: 0;
margin: 0;
background-color: red;
height: 10%;
}
.nav li {
display: inline-block;
margin-right: 5%;
margin-left: 5%;
}
.container #about {
background: blue;
height: 50%;
}
.container #me {
background: blue;
height: 50%;
}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="dist3/css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<ul class="nav">
<li><a href="index.php">Home</li>
<li><a href="about.php">About</li>
<li><a href="contact.php">Contact</li>
</ul><!--END .nav-->
</div><!--END .wrapper-->
</div><!--END .header-->
<div class="container">
<div class="jumbotron">
<div class="container">
<h1>Example</h1>
<p>Example paragraph </p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div id="about">
<span class="name">ABOUT</span>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div id="more">
<span class="name">MORE</span>
</div>
</div>
</div>
</div>
</div> <!--END MAIN CONTAINER-->
</body>
</html>
The rows don't extend to the edge of the screen. The views are also not aligned. I know it is a lot to look at, but I could not find any resource online with an example, or a simple template for me to take a look at.
In Bootstrap you can put the 12 column grid in a .container or a .container-fluid. The first is used if you want to grid to span a maximum of 1170 pixels, the latter if you want it to span the entire screen. Both have a horizontal padding of 15 pixels on each side to keep its content have some distance from the edge of the screen. For text this is a good thing to have, however as you note it's nice if a background color or image does span the entire width.
If you take a look at the theme you linked (see http://ironsummitmedia.github.io/startbootstrap-freelancer/) you might notice that the .container and .container-fluid classes they use also don't span the entire width of the screen. They surround them with other elements, e.g. <section class="success" id="about">, on which they put a background color.
See this example where i've put a <section> with a .pink or .green background color around the containers:
.pink {
background-color: #f99;
}
.green {
background-color: #9f9;
}
section {
padding-bottom: 20px;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<section class="pink">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12"><h3>.container-fluid</h3></div>
</div>
<div class="row">
<div class="col-xs-6">Column one</div>
<div class="col-xs-6">Column one</div>
</div>
</div>
</section>
<section class="green">
<div class="container">
<div class="row">
<div class="col-xs-12"><h3>.container</h3></div>
</div>
<div class="row">
<div class="col-xs-6">Column one</div>
<div class="col-xs-6">Column one</div>
</div>
</div>
</section>
P.S. in your example the <a> tags aren't closed with a </a> tag, plus the .container after the .jumbotron isn't closed.
The problem with extending rows is simple, add the following rule:
body {
margin: 0;
}