I am using Bootstrap3 and using a collapsible element to in my design.
I am using 12 column inside the row as follows
<!-- Search Filter -->
<div id="search-filter">
<div class="container">
<div class="row">
<div class="col-md-5 col-xs-12">
<!-- Collapse Search -->
<button type="button" class="navbar-toggle navbar-toggle-search-filter" data-toggle="collapse" data-target="#searchbar-collapse-set"> <span class="sr-only">Toggle navigation</span> <span class="glyphicon glyphicon-chevron-down"></span> </button>
<!-- /Collapse Search -->
<h3>Showing 345 Results <small>(Hill Stations around Bangalore)</small></h3>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="searchbar-collapse-set">
<div class="col-md-4 col-xs-12">
<div class="distance">
<h5>distance:</h5>
<div id="distance-slider"></div>
<span class="distance-value">250 kms</span>
</div>
</div>
<div class="col-md-3 col-xs-12">
<div class="sort">
<h5>sort:</h5>
<ul class="nav nav-pills">
<li class="active">popular</li>
<li>name</li>
<li>distance</li>
</ul>
</div>
</div>
</div>
<!-- /.navbar-collapse -->
<div class="clearfix"></div>
</div>
</div>
</div>
<!-- /Search Filter -->
Due to the Collapsible element i the third column is shifting to the next row.
I removed the NavCollapse padding to 0 and the content disappears from the drop down as bellow.
By Adding the following code it gets back into place as bellow.
But it Disrupts the full screen view as bellow.
Nomad Link
My suggestion is to use a media query such as
#media (min-width: 1200px) { ... }
so that you can add the padding on a desktop display without effecting the display on smaller devices.
Related
Building a website with Laravel5 and Bootstrap4.
I'm getting a FOUC with a brief width of my page at 1/5 of width before expanding to real width.
The reason seems to be attached to how i use container-fluid.
I am using 'container-fluid' as i want to have a vertical left sidebar with content at the left of main page.
On a simple page, code is as per below :
<div class="container-fluid px-0">
<div class="d-lg-flex flex-lg-row justify-content-center ">
#yield('left_side')
<div class="col-12 col-lg-10 col-xl-10 custom-width">
<div class="container">
<div class="row justify-content-center" >
<div class="col-12">
<div class="card page_card" >
<div class="mx-auto" style="min-height: 70vh">
<p> example..</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
When removing my side-bar and using 'container' instead of container-fluid, the display is at correct width as soon as the page loads.
Correction
It is not about a width change. It seems briefly this is my side column which appears blank in the center with main page aligned vertically, before having the 2 pieces being put aligned horizontally
Addition1 - GIF of my FOUC-error
Here is an example of the FOUC:
It seems the FOUC is caused by my 'Google Ad'-div (in Yellow) i have inserted in my topbar containing my navbar. Some website have their ads appearing above the navbar so this can be done. Any clues?
<!-- for navigation and title on screen < lg -->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark navbar-fixed-top d-lg-none">
<div class="container">
<div class="row" >
<div class="col-2">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsMain" aria-controls="navbarsMain" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsMain">
<ul class="navbar-nav mr-auto" style="width: 200px">
<li class="{{Request::is('/') ? 'active' : ''}} nav-item">
<a class="nav-link">AAA </a>
</li>
<li class="{{Request::is('sentiment') ? 'active' : ''}} nav-item">
<a class="nav-link" >BBB</a>
</li>
<li class="{{Request::is('exchanges') ? 'active' : ''}} nav-item">
<a class="nav-link" >CCC</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<div class="top-bar d-lg-none">
<hr class="divider-under-title mt-0 d-lg-none" />
<div class="container">
<div class="row justify-content-center" >
<div class="col-12">
<div class="top-ad d-none d-sm-block">
<script async defer src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- top-ad2 when removed, FOUC disappears -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-66666"
data-ad-slot="44444"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script async defer>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div class="col-12">
<!--<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">-->
<div class="ad_block_message_id">
Oh nasty adblocker. <i class="em em---1"></i>
</div>
</div>
</div>
</div>
</div>
<!-- for market segment on screen >= lg -->
<div class="top-large-bar d-none d-lg-block">
<!-- for Title on screen >= lg -->
<div class="row">
<div class="col-lg-12">
<h1 id="title" class="d-none d-lg-block">
<a class="deco-none" href="/">TEST</a><sup><code class="code_sup_text"></code></sup>
</h1>
</div>
</div>
<div class="container">
<div class="row justify-content-center" >
<div class="col-12">
<div class="top-ad d-none d-sm-block">
<script async defer src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- top-ad2 when removed, FOUC disappears -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-666666"
data-ad-slot="444444"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script async defer>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div class="col-12">
<!--<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">-->
<div class="ad_block_message_id">
Oh nasty adblocker. <i class="em em---1"></i>
</div>
</div>
</div>
</div>
</div>
<!-- for navbar on screen >= lg -->
<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark navbar-fixed-top d-none d-lg-block mb-2">
<div class="container">
<a class="navbar-brand" href="/">{{ config('app.name') }}</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsMain" aria-controls="navbarsMain" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsMain">
<ul class="navbar-nav mr-auto">
<li class="{{Request::is('/') ? 'active' : ''}} nav-item">
<a class="nav-link" >AAAA <</a>
</li>
<li class="{{Request::is('sentiment') ? 'active' : ''}} nav-item">
<a class="nav-link" >BBBBB</a>
</li>
<li class="{{Request::is('exchanges') ? 'active' : ''}} nav-item">
<a class="nav-link" >CCCCC</a>
</li>
</ul>
</div>
</div>
</nav>
It sounds like that you have something else going on, on your site that is causing the FOUC - and that it doesn't have something to do with the styles. Your styles looks fine to me.
If it were the styles that were the problem, then it would be because the HTML was loaded before the stylesheet was loaded. So unless you have your stylesheet in the footer, then I don't think that's the problem.
My best guess is that you have some Javascript doing something to the content that is being yielded in the left-column, - and that that isn't completed when the page is loaded. If so, - then you could work your way around it by adding a placeholder in your JavaScript until the content is loaded, - or to setup a preloader on your entire site.
In order to prove/disprove this theory, you could remove all scripts from your site and just insert som standard HTML in the left-column (temporarily), to see if that is loaded without the FOUC.
Answer to your edit (and GIF)
Thanks for the elaboration.
The first thing I'm seeing is, that you have content for < lg content and >= lg content. I wouldn't do that. Just have it once and modify it, whenever the browser-size changes. It's easier to maintain and will get you less errors. Also (currently) you have data-target="#navbarsMain" twice.
But here's the code that is giving you problems:
<div class="container">
<div class="row justify-content-center" >
<div class="col-12">
#include('inc.ad_top') <-- when removed, FOUC disappears
</div>
<div class="col-12">
#include('inc.ad_block_message')
</div>
</div>
</div>
I don't know what is happening in #include('inc.ad_top'). But if that is pulling some content, upon the page is loading, then that can be the root of the problem, since that content isn't pulled until after that page is loaded. And in that case, it would just display a blank col-12-container (0px height).
To debug you can change this:
<div class="col-12">
#include('inc.ad_top') <-- when removed, FOUC disappears
</div>
to this:
<div class="col-12" style="min-width: 500px; width: 100%; min-height: 500px; height: auto; display: block; overflow: hidden;">
#include('inc.ad_top') <-- when removed, FOUC disappears
</div>
... and see what that will get you.
Without using HTML Table is there any solution to put 2 divs on different columns in a row and on the same rows, 2 divs on the same column one above another one?
This is an image that explains better:
I'm using bootstrap, i'm trying to reach this :
This is what i get now:
How can i align bottom-top DIV 1 and DIV 2 to be centered if there are on different rows?
At this moment my html grid is like :
.label {
font-size: 15px;
}
` #liveChat {
background-color: #1C3A69;
}
`
<div class="container">
<div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-12 col-xs-12 panel" id="mainDiv">
<header class="row panel-heading"> <span>Tax</span>Extension.com</header>
<div id="liveChat" class="row ">
<div class="container">
<div class="row">
<div id="taxExtensions" class="label col-md-2 leftItems">
My Tax Extensions
</div>
<div id="UpdateAccount" class="label col-md-1 leftItems ">
Update Account Info
</div>
<div class="label col-md-2 col-md-offset-7 ">
<div>
LIVE CHAT
</div>
<div>
Support is Online
</div>
</div>
</div>
</div>
</div>
<div class="panel-body row" id="mainContent" style="min-height:200px; background-color:aquamarine;">
</div>
<footer class="panel-footer row">Footer</footer>
</div>
</div>
A simple one can be made like this, if the navbar has predefined height
Basically it's just a stack of divs
#div-l{
background-color:red;
}
#div-m{
background-color:blue;
}
#div-r1{
background-color:green;
}
#div-r2{
background-color:grey;
}
.single-stack{
height:50px;
float:left;
width:33%
}
.double-stack{
height:25px;
float:left;
width:33%
}
<div id="div-l" class="single-stack"> </div>
<div id="div-m" class="single-stack"> </div>
<div id="div-r1" class="double-stack"> </div>
<div id="div-r2" class="double-stack"> </div>
If you're working for a navbar. Then why not use bootstrap navbar component?
Check this out. You can also see it here
HTML
<nav class="navbar navbar-default sample">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- <a class="navbar-brand" href="#">Brand</a> -->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<div class="row right-items text-center">
<div class="col-xs-12">LIVE CHAT</div>
<div class="col-xs-12">Support is Online</div>
</div>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
CSS:
.sample{
background: #1c3a69;
}
nav{
color: #fff;
}
.right-items {
margin-top: 5px;
}
When hovering my social buttons the hyperlink appears and the link can be launched by right clicking and choosing an option, but not on a single click. They were built differently in html to help my troubleshooting but I can't get either of them to send me to the respective social pages. They are located in the 4 wide column in the social row. I went a little crazy nesting columns to keep everything centered. Any help is appreciated.
test site can be found here: http://www.tedrmoke.com/cjs
<div class="jumbotron">
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home <span class="sr-only">(current)</span></li>
<li>Sawmill</li>
<li>Purchase</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Jumbotron -->
<div class="row text-center jumbo">
<h1>Hello! We are <br/><span>CJ Sawmill & Lumber</span></h1>
<h3>We specialize in coming to you and cutting your lumber in the central NJ area. We also have a selection of quality cured cuts available for purchase.</h3>
<div class="row">
<div class="col-xs-2"></div>
<div class="col-xs-8 social">
<div class="col-sm-8">
<div class="collapse-group"> Contact Us.
<form class="collapse" name="contactform" method="post" action="http://www.cjsawmill-lumber.com/send_form_email.php">
<table class"col-lg-12 text-left" >
...
</table>
</form>
</div>
</div> <!-- row -->
<div class="col-sm-4">
<div class="btn btn-default twi_btn"></div>
<a class="btn btn-default fb_btn" href="http://www.facebook.com/cjsawmill"></a>
</div>
</div> <!-- col-6 button row -->
<div class="col-xs-2"></div>
</div> <!-- button row -->
</div>
</div> <!-- container -->
</div> <!-- end jumbotron -->
That's because in your javascript :
// JavaScript Document
$('.row .btn').on('click', function(e) {
e.preventDefault();
var $this = $(this);
var $collapse = $this.closest('.collapse-group').find('.collapse');
$collapse.collapse('toggle');
});
, you are preventing the default event whenever an element with class btn is clicked inside an element of class row.
Notice in your HTML, that both your hyperlinks and divs for facebook and twitter respectively are of the class btn due to which, whenever they are clicked, the default event (that is redirecting to their href) is prevented which is why the links dont work on a single click, but they do work on right click, since the right click only uses the href attribute to redirect you to the new link.
Try removing the e.preventDefault(); from being applied to your hyperlinks or divs inside hyperlinks and then the social buttons should work just fine on a single left click as well.
Your Javascript says
$('.row .btn').on('click', function(e) {
e.preventDefault();
# . . .
});
So I would target that to just the specific 'Contact Us' button, not all butons.
Bootstrap can be restrictive in a way that won't let you wrap your button in an a tag. Like you could in regular html. Here is a solution that I used to a similar issue I had, structure you a tag like this and you should still get a button that functions.Place in your class names of course.
<a class="btn btn-default glyphicon glyphicon-hand-up"></a>
I am using Bootstrap3 and using a collapsible element to in my design.
<!-- Search Filter -->
<div id="search-filter">
<div class="container">
<div class="row">
<div class="col-md-5 col-xs-12">
<!-- Collapse Search -->
<button type="button" class="navbar-toggle navbar-toggle-search-filter" data-toggle="collapse" data-target="#searchbar-collapse-set"> <span class="sr-only">Toggle navigation</span> <span class="glyphicon glyphicon-chevron-down"></span> </button>
<!-- /Collapse Search -->
<h3>Showing 345 Results <small>(Hill Stations around Bangalore)</small></h3>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="searchbar-collapse-set">
<div class="col-md-4 col-xs-12">
<div class="distance">
<h5>distance:</h5>
<div id="distance-slider"></div>
<span class="distance-value">250 kms</span>
</div>
</div>
<div class="col-md-3 col-xs-12">
<div class="sort">
<h5>sort:</h5>
<ul class="nav nav-pills">
<li class="active">popular</li>
<li>name</li>
<li>distance</li>
</ul>
</div>
</div>
</div>
<!-- /.navbar-collapse -->
<div class="clearfix"></div>
</div>
</div>
</div>
<!-- /Search Filter -->
How can i use Media-Query or JS to keep it opened on smaller devices by default?
Add the "in" class to your searchbar-collapse-set div like so:
<div class="navbar-collapse collapse in" id="searchbar-collapse-set">
EDIT:
The toggle is controlled by a media query. It's display is set to none at 768px in this rule:
#media (min-width: 768px) {
.navbar-toggle {
display: none;
}
}
So you can either override the rule in your own styles or customize the Bootstrap css file.
I am using Bootstrap + Bootstro but can't make the top navbar to get behind the overlay.
http://jsfiddle.net/NJsYw/5/ (click on Tutorial)
<div id="wrap">
<!-- Fixed navbar -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="#" id='tutorial'>Tutorial</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
</div>
<p class="lead bootstro" data-bootstro-title='Title' data-bootstro-content="Description." data-bootstro-width="400px" data-bootstro-placement='bottom' data-bootstro-step='0'>Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p>
<p class="bootstro" data-bootstro-title='Title' data-bootstro-content="Description." data-bootstro-width="400px" data-bootstro-placement='bottom' data-bootstro-step='1'>Back to the sticky footer minus the navbar.</p>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div class="container">
<p class="muted credit">Example courtesy Martin Bean and Ryan Fait.</p>
</div>
</div>
Looks like this was address here https://github.com/clu3/bootstro.js/issues/15 but I didn't know how to apply (if it is necessary)
Thanks
This can be done using CSS the key is z-index which specifies the stack order of an element.
The bootstrap navbar has a z-index of 1030 so in order for the bootstro backdrop to cover the navbar you need to adjust the z-index to be higher than 1030.
e.g.
.bootstro-backdrop
{
....
z-index: 2000;
}
You also need to make sure that the bootstrap popover is not covered so you need to increase its z-index to be higher than 2000.
.popover {
z-index:2001;
}
FIDDLE