I have designed a page to be printed with 4 blocks of cards per page.
However, it doesn't break a new page after 4 blocks.
This is how it looks on print preview dialog.
I have tried using page-break properties but nothing seems to work.
This is what I have tried, Bootstrap - Print page without breaking cards
Below is my code.
<body>
<div class="page">
<div class="row d-flex">
<?php
for ($i = 0; $i < 13; $i++) {
?>
<div class="col-md-6 col-sm-6">
<div class="card A6card">
ITEM {{ $i }}
</div>
</div>
<?php
}
?>
</div>
</div>
</body>
It turned out that, the row is actually causing the page break failed. Not the card. And I solved this by override row class with !important.
.row {
display:block !important;
}
Related
I am displaying a recordset using div and want to change the background color on alternating rows. I have done this successfully in the past using an HTML table, but I can't figure it out using div.
The data displays properly, but there is no color other than the page's background color.
I assume it is something very simple that I am doing wrong, but I can't see it.
Here is the relevant code section and the CSS styles I tried (in a related css file). I tried both odd and even. Neither worked. And the ".indexrow{background-color: #94C8F2;}" doesn't work either.
<div class="indexrow">
<?php
$wa_startindex = 0;
while(!$rsTitle->atEnd()) {
$wa_startindex = $rsTitle->Index;
?>
<div class="column left">
<?php echo($rsTitle->getColumnVal("Title")); ?>
</div>
<div class="column middle">
Issue: <?php echo($rsTitle->getColumnVal("IssueID")); ?>
</div>
<div class="column right">
Page: <span class="BlackHeadline3"><?php echo($rsTitle->getColumnVal("Page")); ?></span>
</div>
<?php
$rsTitle->moveNext();
}
$rsTitle->moveFirst(); //return RS to first record
unset($wa_startindex);
unset($wa_repeatcount);
?>
</div>
.indexrow{
background-color: #94C8F2;
width: 100%;
}
.indexrow:nth-child(even){
background: #f2f2f2;
}
.indexrow a:hover{
background-color: #FFFF00;
}
I think your mistake is putting the nth-child() on the parent? nth-child needs to go on the children you are listing out because nth-child(odd) is saying "every instance of this element that is an odd child. I think you have fallen for the common misconception that nth-child(odd) means: "any odd child of this element"
I just create footer with 4 columns, and last column contain two rows of div. I want that last column to be left aligned so i use justify-content-start for the first row, and it works. But when i try it to second row, which is search bar with button, the justify-content-start doesn't work.
So I tried with flex-row, but it doesn't work either. Here is my web view right now.
I want that search bar and button are parallel with the visitor counter above. Any suggestions for me to fix this things up?
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="col-lg-3 offset-lg-1">
<div class="row mb-4 justify-content-start">
<div class="card text-white visitor-card" style="width: 16rem;">
<div class="card-body">
<h5 class="card-title">Total Pengunjung :</h5>
<?php
$date = date("Y-m-d");
$pengunjunghariini = $this->db->query("SELECT * FROM visitor WHERE date='".$date."' GROUP BY ip")->num_rows(); // Hitung jumlah pengunjung
$dbpengunjung = $this->db->query("SELECT COUNT(hits) as hits FROM visitor")->row();
$totalpengunjung = isset($dbpengunjung->hits)?($dbpengunjung->hits):0; // hitung total pengunjung
$bataswaktu = time() - 300;
$pengunjungonline = $this->db->query("SELECT * FROM visitor WHERE online > '".$bataswaktu."'")->num_rows(); // hitung pengunjung online`
?>
<h5 class="card-title">
<?php echo $totalpengunjung ?>
</h5>
</div>
</div>
</div>
<div class="d-flex flex-row" style="border-color: white;">
<div>
<form class="d-flex" action="<?= base_url('Home/search'); ?>" method="post">
<input class="form-control me-2" type="search" placeholder="Cari artikel ..." aria-label="Search">
<button class="btn btn-outline-primary" type="submit">Search</button>
</form>
</div>
</div>
</div>
The problem might be that your container of that search bar might already have 100% width of its parent, so that any horizontal alignment wont be possible, since it has no space to move to.
This is a very common issue, and to quickly find out what is going on, you can use some CSS debugging techniques, as weird as it sounds.
The best example of this layout debugging technique is to set a border to your div that you need to be aligned somehow (or on its children).
.container {
border: 1px solid lime
outline: 1px solid lime
}
Note: outline might be better in some cases, since it is not increasing width/height of your element
If your container is really as wide as its parent, try width: fit-content on it, so it shrinks and leaves some space to be aligned to. Hope this helps, and to the future as well :-)
I have created a Wordpress theme, where I have created a single.php for my blog posts. I had pagination, and everything was working fine before. Now It all of a sudden the pagination is not displayed on the page. When I 'inspect element' I can see that the code is there, but nothing is displayed. It says that the dimensions of the div is 659.08 x 0. I've searched the internet and It feels like I've tried everything. Do you have any suggestions as to what the problem can be? Here is a snippet of my code. Thanks in advance!
<div class="container-fluid" id="content_container">
<div class="row">
<div class="col-12 col-md-8 col-lg-8">
<div class="inner">
<p>By <?php the_author();?> | <?php the_date(); ?></p>
<?php the_content();
?>
<div class="post-pag-wrap">
<div class="post-pag-container prev">
<?php previous_post_link('
<h6>%link</h6>
', 'previous', false);
?>
</div>
<div class="post-pag-container next">
<?php next_post_link('
<h6>%link</h6>
', 'next', false);
?>
</div>
</div>
</div>
You don't write which element has the dimensions 659.08 x 0, but this sounds very much like all its child elements are floated and the parent therefore doesn't have any height (because it doesn't wrap floated elements by default).
To avoid this, add overflow: hidden or overflow: auto to that (parent) element. This should cause the element to wrap the floated children and make them visible that way.
i need to hide "right" column in "md position" on some pages (login, registration,contacts...)
and extend "main" to col-md-12.
my index.php
<div class="container">
<div class="row">
<div id="main" class="col-md-9 col-xs-12">
<jdoc:include type="component" />
</div>
<div id="right" class="col-md-3 col-xs-12">
<?php if($this->countModules('right')) : ?>
<jdoc:include type="modules" name="right" style="none" />
<?php endif; ?>
</div>
</div>
</div>
i think the easiest way is checking the option & view in template and act based on its value , for example :
$app = JFactory::getApplication();
if(in_array($app->input->get('view'), array('login', 'registration') && in_array($app->input->get('option') ,array('com_users')){
echo ' <div id="main" class="col-md-12 col-xs-12">';
}
else {
echo ' <div id="main" class="col-md-9 col-xs-12">';
}
and similar check for right menu
also you can create menu for login & registration & ... and dont add any module in this menu for the position that you want to hide
then you can check in template if there is noting in that position simply make main div full page width
There is also a CSS way. You can print the option and view (or also itemid to base selection on the selected menu item) from $_GET as classes of the <html> or <body> tags and then just hide what you want via CSS (display: none). As for extending the #main div to full width, you can just override the class on the #main when using this approach.
To show you an example, the CSS for hiding #right div and extending #main div could look like this (example for K2 component and posts' detail view, in your case just the html classes (.com_k2 and .view-item) would be different):
html.com_k2.view-item #right { display: none; }
html.com_k2.view-item #main.col-md-9 { width: 100% !important; }
The !important could not be needed, I'm not sure, would have to try it.
Done this a whole bunch of times, but now it's acting out for some reason. Though I'll probably feel very dumb, after somebody points out the mistake.
Live link:
http://soloveich.com/project6
I'm trying to build a header, but getting quite a few problems at the same time
1) Background images for class header and #soc don't show
2) that image with large text does not align to center
3) I get the post on the right side of the header, while it has to be under it.
css is properly connected (tried changing body background color)
header code
<div class="header">
<header>
<div class="row-fluid">
<div class="col-lg-3"><div class="pull-right"><img src="wp-content/themes/greendream/images/logo.png"> </div></div>
<div class="col-lg-6"><div id="text"><img src="wp-content/themes/greendream/images/text.png"></div></div>
<div class="col-lg-3"><div id="soc"></div></div>
</div>
</header>
</div>
css
.header {
background-image: url(images/hdbg.jpg);
}
#text {
width: 578px;
margin:o auto;
}
#soc {
background-image: url(images/soc.png);
}
You need to start by studying how the grid system in Bootstrap 3 works.
Basically, if you want your content centered, you need to place it in a container. Then you set up your rows and columns.
Something like this:
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<img src="wp-content/themes/greendream/images/logo.png">
</div>
<div class="col-md-6">
<img src="wp-content/themes/greendream/images/text.png">
</div>
</div>
</div>
</body>
Note: There is no row-fluid in Bootstrap 3. A lot of what you're trying to do will only work in Bootstrap 2.