I'm facing this problem with a Bootstrap-select (https://github.com/silviomoreto/bootstrap-select) dropdown list:
As you can see the dropdown is displayed behind the second element (the second div with green background).
This second div is created with this simple code:
<div class="col-md-7" style="height:100%">
<div id="prt-form-container" class="prt-vertical-align">
[...]
</div>
</div>
col-md-7 is a standard Bootstrap class.
The dropdown list code is:
<div class="btn-group bootstrap-select form-control prt-form-control open">
<button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="Indica la professione" aria-expanded="true"><span class="filter-option pull-left">Indica la professione</span> <span class="bs-caret"><span class="caret"></span></span></button>
<div class="dropdown-menu open" style="max-height: 178px; overflow: hidden;">
<div class="bs-searchbox"><input type="text" class="form-control" autocomplete="off"></div>
<ul class="dropdown-menu inner" role="menu" style="max-height: 130px; overflow-y: auto;">
[...]
</ul>
</div>
</div>
How can I correctly show the dropdown list?
Related
I have got the following search input box within a navbar.
The thing that confuses me is that the appended search icon looks as if its bigger then the input search field. This seems to be due the "inline" shadow used within the search box.
How can make the icon look better without having to remove the shadow?
<nav>
<!-- removed -->
<!-- Right side items -->
<form class="navbar-nav form-inline flex-column flex-sm-row" style="flex-basis: 350px;">
<div class="input-group flex-sm-fill">
<input class="form-control" id="search-box" type="search" placeholder="Search">
<div class="input-group-append">
<span class="input-group-text"><i class="fa fa-search" aria-hidden="true"></i></span>
</div>
<div class="card shadow px-4 border-top-0" id="result-box" style="display: none; position: absolute; top: 46px;">
<ul class="list-unstyled" id="search-result"></ul>
</div>
</div>
</form>
</div>
</nav>
Edit2:
Okay, the problem was, that I used a <div class="row"> around the <div class="topimage"> tag. Strange. Could someone explain why it is?
I'm pretty new to bootstrap and created a web page for learning purposes.
Everything is working pretty well so far, except the navbar.
This is my nav code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="headertest ">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-offset-1">
<form class="navbar-form navbar-left">
<button class="btn btn-default">ENTDECKEN</button>
<button class="btn btn-default">FINDEN</button>
<button class="btn btn-default">PLANEN</button>
<p class="font">
<b> Zurück zur Hafenseite |</b> <a style="text-decoration: none">Salsbury & Mysteriöses Stonehenge</a>
</p>
</form>
</div>
<div class="col-sm-2 ">
<div class="navbar-form">
<img src="../assets/aida.png" class="logo ">
</div>
</div>
<div class="col-sm-4">
<div class="navbar-form navbar-right">
<form action="#" style>
<div class="dropdown">
<img src="../assets/lupe.png" class="icons" />
<img src="../assets/telefon.png" class="icons" />
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Erste Aktion</li>
<li>Zweite Aktion</li>
<li>Noch eine Aktion</li>
<li role="separator" class="divider"></li>
<li>Ein Link</li>
</ul>
</div>
</form>
</div>
</div>
</div>
</div>
</nav>
</div>
The problem is, if I use the navbar-fixed-top class, the content inside the navbar is jumping while I scroll.
Like the top margin is vanishing while I'm scrolling down and if I Scroll up, the margin (or whatever the problem is) just magically appears back.
Normal and scrolling up:
Scrolling down:
I hope you can see what I mean.
Does anybody know what I'm doing wrong?
(my css classes shouldn't be the problem. If I delete them, the content still keep "jumping")
Thank you
Edit:
I have an image as the first item (after the navbar) that seems to cause the problems.
If I delete it, the navbar is working as expected.
Css:
.topimage{
height: 600px;
width: 100%;
align-self: center;
background-image: url("./assets/testbild3.jpg");
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
}
and how I implemented it:
<div class="row">
<headertest></headertest><!-- navbar component -->
</div>
<div class="row ">
<div class="topimage">
</div>
</div>
The fiddler link: (where it works without "jumping" navbar content)
https://jsfiddle.net/Biberium/g52cd6v8/
i have GroupBy:Threat name and potential impect drop-down button but when data get loaded from server in a div having id "listThreat",drop-down menu not get displayed.when data not get displayed dropdown works fine but when i click on any Dropdown menu option element it shows effect on all button in the page like potential impect button name get changed to element.
below is my code
<div class="panel" style="border: 1px solid black; height: 100vh"
id="ThreatList">
<header class="panel-heading">
<div class="row">
<!--first row of column -->
<div class="col-sm-6">
<div>Threat List</div>
</div>
<div class="col-sm-6">
<div>Total Threat:</div>
</div>
</div>
</header>
<div class="row">
<!--second row of column -->
<div class="col-sm-6">
<div class="dropdown">
<button class="btn btn-primary btn-xs dropdown-toggle"
type="button" data-toggle="dropdown">Group By:threat
Name</button>
<ul class="dropdown-menu">
<li>Element</li>
<li>Threat Name</li>
</ul>
</div>
</div>
<div class="col-sm-6">
<div class="dropdown">
<button class="btn btn-primary btn-xs dropdown-toggle"
type="button" data-toggle="dropdown">Sort By:Potential
Impect</button>
<ul class="dropdown-menu">
<li>Potential Impect</li>
<li>Mitigation</li>
<li>Validation</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="listThreat"></div>
<!-- end of second row -->
</div>
</div>
</div>
</div>
I've tried to vertical align text in Bootstrap's list group (inside of tag li) with display: table-cell; line-height: 50px; vertical-align: middle;, but it doesn't work at all. Help me with it, please. ;)
<div class="row">
<div class="col-md-12">
<ul class="list-group">
<li class="list-group-item clearfix">Byl jsi pořádně prošťouchán uživatelem <strong>hakys</strong>.
<form action="my_pokes.php" method="post">
<span class="pull-right">
<button class="btn btn-success" name="poke_hakys">Šťouchnout zpět</button>
<button class="btn btn-danger" name="delete_hakys">Smazat šťouchnutí</button>
</span>
</form>
</li> </ul>
</div>
</div>
You can do something like this, and then you won't need to override the list-group-item style..
<div class="row">
<div class="col-md-12`">
<ul class="list-group">
<li class="list-group-item text-right">
<span class="pull-left">
Byl jsi pořádně prošťouchán uživatelem <strong>hakys</strong>.</span>
<form action="my_pokes.php" method="post" class="form-inline">
<span>
<button class="btn btn-success" name="poke_hakys">Šťouchnout zpět</button>
<button class="btn btn-danger" name="delete_hakys">Smazat šťouchnutí</button>
</span>
</form>
</li>
</ul>
</div>
</div>
Demo: http://codeply.com/go/6H4wBABPGw
I made some changes to your code. The biggest change is that instead of setting up one 12 span column I divided it into three. this makes it easier for laying out items in bootstrap.
Let me know if this helps you.
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-5">
<ul class="list-group">
<li class="list-group-item clearfix">Byl jsi pořádně prošťouchán uživatelem <strong>hakys</strong>.</div>
<div class="col-md-4">
<form action="my_pokes.php" method="post"> <span class="pull-right">
<button class="btn btn-success" name="poke_hakys">Šťouchnout zpět</button>
<button class="btn btn-danger" name="delete_hakys">Smazat šťouchnutí</button>
</span>
</form>
</li>
</ul>
</div>
</div>
</div>
I've managed to place a button group at the far side of a header (H1/H2/H3). However, I don't know how to make the button float vertically in the middle. It just stays at the top. I tried using margin-top but since it's a fixed value it won't be dynamically placed in the middle.
Here's the screenshot:
Here's the code:
<div class="container">
<section>
<div class="page-header">
<h1 class="pull-left">
The header
</h1>
<div class="pull-right">
<div class="btn-group">
<button class="btn btn-primary">
Actions
</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li>
Action
</li>
<li>
Another Action
</li>
</ul>
</div>
</div>
<div class="clearfix"></div>
</div>
Contents
</section>
</div>
jsFiddle: http://jsfiddle.net/aurorius/PKrUC/
This how to get a button lined up with the header in Bootstrap 3.2, 3.3 without any additional CSS in case anyone is coming here from Google.
Option 1
http://jsfiddle.net/ypaL5nko/
<div class='page-header'>
<div class='btn-toolbar pull-right'>
<div class='btn-group'>
<button type='button' class='btn btn-primary'>Button Text</button>
</div>
</div>
<h2>Header Text</h2>
</div>
The button group is optional if you're only using a single button.
Option 2
http://jsfiddle.net/sLdnae3q/
<h1>
<span>Header Text</span>
<button class='btn btn-primary pull-right'>Button Text</button>
</h1>
<hr/>
Try this css code
.btn-group.my-class{
bottom: 15px;
position: relative;
top: 15px;
}
Dynamic header on H1/H2/H3 and may be H4
Demo: http://jsfiddle.net/PKrUC/2/
Using a float disables te display:inline-block; property, making it float to the top.
Just add the bootstrap class text-right to the container to keep the vertical align intact.