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.
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 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;
}
I want a row with 3 columns, that depending on the length/size of the text inside of one of the columns, all 3 columns should have the same height. So, the 3 columns should have the same height and be in the same row taking into account the biggest sized column.
This is the error that I get:
http://prntscr.com/d4getm
This is the code that I have:
<?php// Define our WP Query Parameters ?>
<?php $the_query = new WP_Query( 'posts_per_page=3' ); ?>
<?php// Start our WP Query ?>
<?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
<div class="col-sm-6 col-md-3">
<div class="thumbnail"><?php the_post_thumbnail(array(100, 100)); ?>
<div class="caption">
<?php// Display the Post Title with Hyperlink?>
<h3 class="center"><?php the_title(); ?></h3>
<!--// Repeat the process and reset once it hits the limit-->
</div>
</div>
</div>
<?php
endwhile;
wp_reset_postdata();
?>
And this is the CSS:
div.caption{
text-align: center;
}
div.thumbnail{
border: 4px inset black;
height: 200px;
}
h3.center{
font-size: 20px;
}
The answer is found here: How can I make Bootstrap columns all the same height?
For this particular problem some adjustments need to be made to the html structure in order to get it to work.
I've replicated what I imagine your final html looks like once the php is executed. Here's a js fiddle: https://jsfiddle.net/qpwgkgfe/39/
UPDATE: Here is jsfiddle solution made responsive using bootstrap classes: https://jsfiddle.net/qpwgkgfe/44/
Basically, there are a few things you need to remove. First is the internal div with class thumbnail. You can get the same effect by moving the class to the parent div. Secondly, you need to remove the height: 200px from your CSS file. This setting will over-ride the attempts to make the columns match.
I've used the flex-box approach because it's new and fun, but with some adjustments the other solutions would work as well.
Here's another js fiddle using the -margin approach: https://jsfiddle.net/v92g0ddk/3/
You'll need to work out the bottom border though.
I have a page that consist of a fixed navbar,fixed footer and in between them I have a bootstrap jumbotron.The jumbotron's content has been divided into two columns as shown below(one with id="tasks" & other with id="view").When I resize the browser, as expected ,the two columns gets stacked one above the other.The problem is that since the left column consist of fewer content,after browser resize(and after left column gets stacked on top of the right column),the width of the jumbotron now is equal to the width of the left column.As a result the right column is now not entirely inside the jumbotron
Below is code
<body>
<div id="header">
<?php echo $navbar; ?>
</div>
<div id="jumbotron" class="jumbotron row">
<div class="container-fluid">
<div id="tasks" class="col-md-2">//the left column contains fewer contents
<?php echo $task_set; ?>
</div>
<div id="view" class="col-md-8 col-md-offset-1">//the right-column
<?php echo $view_to_load ?>
</div>
</div>
</div>
<div id="footer" class="row">
<?php echo $footer; ?>
</div>
</body>
Please tell me how can i make the jumbotron's width equal to width of the right column i.e. the column with id=""view
You need to implement different classes for when your viewport is smaller.
So per example <div class="col-md-2 col-sm-12"> if you'd like it full size on a small viewport.
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.