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.
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 am using Zurb Foundation 5 to build a site. My site has a navigation panel against the left side of the screen. When open, I want the nav area to take up 3 columns. The actual content will take up the remaining space. Here is the HTML I have thus far:
<body>
<div style="width:100%; max-width:100%; height:100%;">
<div id="navDiv" class="large-3 columns" style="background-color:#2D2D2D;height:100%;">
<!-- Nav Items Go Here -->
</div>
<div class="large-9 columns">
<!-- Main Content Goes Here -->
</div>
</div>
</body>
Each nav item has an icon and some text. I need to be able to collapse the navDiv in a way that it shrinks down so that only the icons are showing. The text goes away. At the same time, I need the main content area to grow to take up the space that was used by the nav area. I cannot figure out how to do this in the realm of zurb. From what I can tell, the grid is not dynamic. Is it possible to do what I'm trying with a grid? If so, how?
THank you!
If you want to use Foundation (with jQuery dependency) and no other add-ons, you can use a jQuery event handler to toggle the classes used by Foundation. It feels like a hack, but it works.
HTML
<body>
<button>Toggle sidebar</button>
<div class="row">
<div id="navDiv" class="small-2 medium-1 columns">
<img src="http://dummyimage.com/48"><span>Item 1</span>
</div>
<div id="content" class="small-10 medium-11 columns">
<!-- Content goes here -->
</div>
</div>
</body>
CSS
.small-2 span {
/* Hide text when sidebar is small */
display: none;
}
JavaScript + jQuery
$(function() {
$('button').click(function() {
// Resize sidebar
var navDiv = $('#navDiv');
navDiv.toggleClass('small-3');
navDiv.toggleClass('small-2');
navDiv.toggleClass('medium-2');
navDiv.toggleClass('medium-1');
// Resize content
var content = $('#content');
content.toggleClass('small-9');
content.toggleClass('small-10');
content.toggleClass('medium-10');
content.toggleClass('medium-11');
});
});
Demo on Plunker
I am wondering how to override styles of shell view being injected in Durandal inside div with id="applicationHost" ... I am trying to use common Bootstrap template (sticky footer with fixed navbar) and it works as standalone but as soon as I use it within shell.html the "wrapper" looses its auto height...
Here is my shell.html
<div>
<div id="wrapper">
<!-- ko compose: {view: 'nav'} -->
<!-- /ko-->
<div id="content" class="container-fluid">
<!--ko compose: {
model: router.activeItem, //wiring the router
afterCompose: router.afterCompose, //wiring the router
transition:'entrance', //use the 'entrance' transition when switching views
cacheViews:true //telling composition to keep views in the dom, and reuse them (only a good idea with singleton view models)
}--><!--/ko-->
</div>
<div id="push"></div>
</div>
<footer id="footer">
<div class="container-fluid">
<div class="row-fluid">
<div class="span6"><p class="muted">© ABC Company Inc. 2013. All rights reserved.</p></div>
<div class="span6 "><p class="muted pull-right">v0.0.1-debug</p></div>
</div>
</div>
</footer>
</div>
the nav sub-view just has standard <nav id="mainnav" class="navbar navbar-fixed-top"> and the styles are the same as on Bootstrap example page...
When I examine styles via Firebug I can clearly see that wrapper div has lost its full height...Driving me nuts! :)
I fixed this by adding the following style to my main html page after the styles necessary to get the sticky footer to work
/*durandal fixes*/
#applicationHost, #applicationHost > div
{
height: 100%;
}
The first selector takes care of the applicationHost div in the main html page and the second the one inserted by durandal (it has a class of durandal-wrapper, so you could make the selector more specific if you wanted). As you have an extra div in your shell.html file you may need the following:
/*durandal fixes*/
#applicationHost, #applicationHost > div, #applicationHost > div > div
{
height: 100%;
}
I'm stying bootstrap sticky footer on my project: http://twitter.github.com/bootstrap/examples/sticky-footer.html
Is it possible to set height of content to fill remained space?
Let me explain. I want to reside image and I need to it gets sized relates to available height.
If your intention is fill any space between the end of the content and the start of the footer, I can see all sorts of challenges.
Depending on the specifics of your image, maybe you can include it as a background like this:
http://jsfiddle.net/panchroma/hBzjn/
You could use media queries, possibly with different images at different viewponts and also use padding to refine the results.
Good luck!
HTML
<div id="wrap">
<div class="contentWrap">
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p>page content</p>
</div>
<div id="push"></div>
</div><!-- end contentWrap -->
</div> <!-- end wrap -->
<div id="footer">
<div class="container">
<h3>sticky footer </h3>
</div>
</div>
CSS
#wrap{
background: url(http://is.gd/0QPvoC) left bottom; /* define image and position */
}
.contentWrap{
background-color:#fff; /* quick fix so background image is hidden behind main content */
}