I am having some styling problems with bootstrap.
I have a small modal window containing a dropdown. However I can't seem to get the dropdown to display over the footer of the window.
I have played with the zindex of the dropdown ensuring it was higher than the windows but no luck.
Can anyone suggest what I should be changing?
The html
<div class="modal hide fade" id="store-modal">
<div class="modal-header">
<h3 id="reward-title">Select Store</h3>
</div>
<div class="modal-body">
<p>
Please select the store you are working from
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Select<span class="caret"></span></a>
<ul class="dropdown-menu">
#foreach (var model in Model)
{
<li>
#Html.DisplayFor(modelItem => model.StoreName)
</li>
}
</ul>
</div>
</p>
</div>
<div class="modal-footer">
</div>
You just add a class having z-index as attribute having higher than model box footer.
For z-index to work, you also have to set position = relative, absolute, or fixed. Also putting z-index something like 5000 might help. (the modal may have z index higher than the 2000's.
so in your css i would add this:
.class-of-dropdown {
position: relative;
z-index: 5000;
}
.modal-body class has a overflow-y: auto property. You might need to change this to:
.modal-body {
overflow-y:visible;
}
If your setting the z-index of the drop down make sure it is positioned. Meaning it has either position:absolute, position:relative, or position:fixed.
Related
There is a bootstrap carousal(full-width) on my page and the carousal have registration form an i want to bring the form below the carousel on resizing the screen,I am using media queries but my form is coming above the text of my page below is my screenshot and code can anyone help to sort the problem
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('images/corousal1.jpg');"></div>
<div class="carousel-caption">
<h3><strong>Healing People,</strong>Changing lives<br/>
Personalized Treatments that are safe,
Sure and Scientific
</h3>
</div>
</div>
<div class="multi-form">
<form id="msform">
<fieldset>
<input type="button" name="next" class="next action-button btn-btn-primary" value="Book An Appointment">
<button type="button" class="next action-button btn-btn-primary" style="background-color:#3B5998 !important;"><i class="fa fa-facebook" aria-hidden="true"></i> Connect With Facebook</button>
</fieldset>
</form>
</div>
media queries
#media (max-width:786px) {
.multi-form {
margin-top: 400px;
height: 100%;
z-index: 1000;
display: block;
}
}
full page screenshot
Responsive page screenshot
Have you tried with absolute position ? you can design the div with absolute position and values in %.
For Example :
.multi-form {
position:absolute;
top:20%;
right:0%;
left:0%;
bottom:0%;
}
This will work for all resolution.
EDIT :
Absolute positioning means that the element is taken completely out of the normal flow of the page layout. As far as the rest of the elements on the page are concerned, the absolutely positioned element simply doesn't exist. The element itself is then drawn separately, sort of "on top" of everything else, at the position you specify using the left, right, top and bottom attributes.
You'll definitely want to check out this positioning article from A List Apart.
And finally please try to make my corousel is absolute positioned and my form is relative positioned. So that your component will work in all resolution as your expectations.
I have a bootstrap drop down on my modal dialog.
After clicking on drop down button drop down menu appears under form.
Is there any way to fix this issue, but without using "position:fixed",because by using fixed attribute I am facing with other issues.
<div id="dialog" title="Basic dialog" ng-show='showDialog'>
<div class="container">
<h2>Dropdown</h2>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>AAAAAA</li>
<li>BBBBBB</li>
<li>CCCCCC</li>
<li>DDDDDD</li>
<li>EEEEEE</li>
<li>FFFFFF</li>
</ul>
</div>
</div>
</div>
See the dropdwon plnkr
The problem is that the dialog, wich is a div, efectively "contains" the dropdown and all it's contents, so the drowpdown stacking context is surrogated to it.
You can add this css rule to overcome your problem, but take it carefully so it doesn't have any side effects in other dialogs on your app:
<style>
.ui-dialog, #dialog, #container { overflow:visible; }
</style>
You also have a great article here explaining stacking contexts as Z-Index isn't what most people think...
I'm experimenting with Bootstrap 3.2. I'm trying to create a fixed at top navigation bar but I'm running into two problems:
The navigation bar overlaps the content below it.
The navigation bar seems to be going far off the screen to the right. This makes my button in the navigation bar not visible unless the window width is dragged to a smaller size.
For the first problem, I've followed the Bootstrap example tip by adding a class to my css file, including this file below the Bootstrap css file in the html document, and then referring to the class.
.navbar-height{
body{padding-top: 200px;}
}
<body class="navbar-height">
Though, this seems to do nothing (as you can see I specified the number really high hoping to see a dramatic change, which did not occur).
Here's my the navigation bar:
<header id="header-navigation">
<div id="nav-bar-container">
<nav id="nav-bar" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div id="nav-item-container" class="container-fluid">
<div id="drop-down" class="navbar-header">
<button type="button" class="btn btn-default navbar-btn navbar-toggle collapsed" data-toggle="collapse" data-target="#user-dropdown">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="home-button" class="navbar-left">
<a class="navbar-brand" href="#"><img alt="Brand" src=""></img></a>
</div>
</div>
<div id="user-dropdown" class="navbar-collapse collapse">
<ul class="dropdown-menu" id="dropdown-items" role="menu">
<li>
<div class="list-group-item">
<div class="row-picture">
<img class="circle" src="" alt="icon"></img>
</div>
<div class="row-content">
<h4 class="list-group-item-heading">Placeholder</h4>
<p class="list-group-item-text">Placeholder</p>
</div>
<div class="list-group-seperator"></div>
</div>
</li>
<li><span class="glyphicon glyphicon-log-out"></span></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
As a quick break down of the above code, I have a <header> tag which will hold the navigation bar. Within this <header>, I have a containing <div> (id="nav-bar-container") which only purpose is to act as a container for the navigation bar (maybe I'll add something else to the header and want to keep the bar seperate). Then, I have the actual <nav> which has the appropriate classes (or so I think): "navbar navbar-default navbar-fixed-top". The next <div> (id="nav-item-container") holds the components of the navigation bar. The following <div> (id="drop-down") contains the button (which seems to disappear at full-screen) and a link with a "brand", which always seems to be visible. The last major <div> contains the "drop down" content for when the button is pressed.
My Question: why is my navigation bar overlapping the content below it and over extending to the right hiding the button?
Ok, first thing, you don't need the <header> tag, so feel free to remove that.
Second, from the Docs on navbar-fixed-top, you need to have padding:
body { padding-top: 70px; }
Notice you applied it to the heading style; that won't work. Apply it to the body and it works fine.
As far as the 2nd issue, I don't actually see any horizontal scrolling when I removed the
<header> tag, so I think that may have been causing an issue.
Checkout this Bootply example:
Bootply Example
To see what I mean. It's your code with the tag removed. Hope that helps!
Change..
.navbar-height{
body{padding-top: 200px;}
}
to..
body.navbar-height{
padding-top: 200px;
}
You want the padding on the body itself. This will push you body down 200px giving you a gutter at the top for your fixed navbar.
most likely you'd want to adjust this padding depending on the actual height of your navbar.
As for problem number two, where I believed the navigation bar to be overflowing off the screen to the right, was just a mistake in the layout of the code. I was grouping the button I wanted to display on the right with the brand in the "navbar-header". What this does is display the brand but use that button only on a mobile screen to hide or show its associated dropdown. That is why I was only seeing the button when I made the width smaller by dragging the window. To fix this problem I removed the button and placed it within the appropriate code block. So, my "navbar-header" now looks like this:
<div id="drop-down" class="navbar-header">
<div id="home-button" class="navbar-left">
<a class="navbar-brand" href="#"><img alt="Brand" src=""></img></a>
</div>
</div>
Now, next within the id="nav-item-container" parent div, I create a list of items (ul). This list contains the items within the navigation bar and has the classes "nav navbar-nav navbar-right". Each list item (li) within this list is an item within the navigation bar. Dropdown buttons and their contents must be contained within the same list item (li). Make sure the parenting list item to the dropdown elements contains the class "dropdown". Then, the button or link should have the "dropdown-toggle" class applied to it. And the dropdown items themselves (which too can be a list of items and often is) should have the class "dropdown-menu". For example:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<span class="glyphicon glyphicon-align-justify"></span>
</a>
<ul class="dropdown-menu" id="dropdown-items" role="menu">
<li>
<div class="list-group-item">
<div class="row-picture">
<img class="circle" src="" alt="icon"></img>
</div>
<div class="row-content">
<h4 class="list-group-item-heading">Placeholder</h4>
<p class="list-group-item-text">Placeholder</p>
</div>
<div class="list-group-seperator"></div>
</div>
</li>
<li><span class="glyphicon glyphicon-log-out"></span></li>
</ul>
</li>
</ul>
Note, in the snippet I didn't include the parenting nav, div, or header so it may not work exactly how it should. Also, I figured the majority of this out on my own by referencing the Bootstrap component page, as well as, the Bootstrap material design page (a plugin to Bootstrap that gives everything the Google Material Design look and feel). So, I'm not sure if all the "rules" I stated are mandatory or if there are other ways to achieve this.
As for problem number one, I just made a silly mistake with the css and the two other answers provided correct ways of fixing it. All I had to do was fix the body css like so:
body{
padding-top: 200px;
}
I have a JSFiddle set up here showing what is currently happening: http://jsfiddle.net/YX7T6/1/
This is the code:
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li>
CText
</li>
</ul>
<div class="pull-right">
<button class="btn btn-default btn-lg"> button1 </button>
<button class="btn btn-default btn-lg"> button2 </button>
</div>
</div>
</nav>
<div class="container">
<a href="#">
<img src="http://placekitten.com/g/150/150" class="img-thumbnail" style="margin-top:-130px">
</a>
</div>
I'm trying to get the image to show on top of the navigation not behind it as it is now. I've tried changing the z-index of the image to something higher but nothing has changed. What should I try next?
As the other answers mentioned, z-index only works on elements that have position. Applying z-index to an element that has no position will simply be ignored.
img {
position: relative;
z-index: 1;
}
Will make the browser recognize the z-index attribute, and place the image above the nav menu. In the future whenever you're having issues with z-index not being recognized, the first thing you should do is check whether the elements in question have position.
However, in this specific case, rather than messing with negative margins, it may be simpler to do:
img {
position: absolute;
top: 0;
}
Just add position like position:relative; to your element
if you plan to control it's z-index property
fiddle
Alternatively, use position: absolute on the img and skip the z-index stuff.
http://jsfiddle.net/YX7T6/8/
Problem:
A button group I've created using bootstrap css appears cut off on the left, as you can see below.
Code:
I have the following HTML logic:
<div class="span5">
<div class="row show-grid">
<div class="btn-group>
<button class="btn dropdown-toggle hidden-desktop visible-phone btn-warning" data-toggle="dropdown">show info <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><div id="address"><?php echo anchor("mycontroller/method1/".$objectid,'addresses'); ?></div></li>
<li><div id="logs"><?php echo anchor("mycontroller/method2/",'logs'); ?></div></li>
<li><div id="status"><?php echo anchor("mycontroller/method3/",'status'); ?></div></li>
</ul>
</div>
<br/>
<div class="span2"><?php echo anchor("mycontroller/method4/","Back to List")?></div>
</div><!-- end class row show-grid-->
<br/>
</div>
What I've Tried So Far:
I've been using Firefox's Inspect tool to try to find the differences between the top button and the bottom, but I don't know what property I should be looking for. I've tried modifying properties like:
padding-left
padding-right
margin-left
margin-right
I've also tried to reduce the number of classes applied to the button so that I only had:
<button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
But that didn't resolve the problem. Can someone point me in the right direction? Perhaps by naming the types of properties I should be tracking down? It's probably a CSS specificity problem... because I haven't modified any of the bootstrap stuff.
Thanks
Why are you using a button group for buttons that aren't grouped together? The reason it's "cut off" is because button groups are supposed to be merged together.
Regardless, it's displayed like that because the inner borders of the buttons don't have rounded edges. You can fix it by manually applying the border radius:
border-top-left-radius: 4px; border-bottom-left-radius: 4px
Give this CSS
.btn{
display:block;
padding:XXpx;
margin:XXpx;
height:XXpx;
width:XXpx;
}
this is a hack fix but on the containing div that is wrapped around the button - you may simply have
overflow:hidden
Inspect in chrome with firebug and go up and you will most likely see this.. Bootstrap hides data that overflows the columns.
OMG,
the answer is:
to change from:
<div class="btn-group>
to:
<div class="btn-group">
You forgot the "
You can see the live fix here: http://jsfiddle.net/kCsEs/
Following solved my problem
.btn {
width:auto !important;
}