I have an Accordion which has a header, inside which I need to place a dropdown menu. I've tried fiddling with the z-index thinking it was a stacking issue to no avail. I've reproduced the issue with a minimal sample at https://www.bootply.com/53bH05eQlf
Is there any way to get the dropdown menu to display correctly?
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion">
<div class="card">
<div class="card-header">Blah</div>
</div>
<div class="card">
<div class="card-header">Blah</div>
</div>
<div class="card">
<div class="card-header">Blah
<div class="dropdown text-center show border-info border rounded menu-button float-left">
<a class="btn p-0 dropdown-toggle" href="#" role="button" id="some-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="fa fa-bars"></span>
</a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="some-dropdown">
<li class="dropdown-item">Hidden behind the card!</li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header">Blah</div>
</div>
<div class="card">
<div class="card-header">Blah</div>
</div>
</div>
Adding style="overflow: visible" to the card div which contains the dropdown will solve the issue.
That is, for the bootply example replace <div class="card"> on line 8 with <div class="card" style="overflow: visible">.
Related
I am using the following to show a list horizontally or vertically depending on the screen size.
<div class="row">
<div class="col-md-3">
<div class="d-md-none">
<div class="card">
<div class="card-body p-0">
<ul class="list-group list-group-horizontal">
<li class="list-group-item border-0">
<a href="javascript: void(0);" #onclick="">
<i class="fas fa-search" />
</a>
</li>
<li class="list-group-item border-0">
<a href="javascript: void(0);" #onclick="">
<i class="fas fa-address-card" />
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="d-none d-md-block">
<!-- Here the list vertically !-->
</div>
</div>
<div class="col-md-9">
</div>
</div>
The problem is that when viewed on mobile devices, the card overflows out of its div. What can I change to make this not happen? Can I decrease the spacing between the items?
I'm developing an app mainly in HTML5/CSS/JS and I'm using framework7. Following the tutorials and all the documentation available I can't make a side panel appear... What am I doing wrong?
<body>
<div class="panel-overlay">
<div class="panel panel-left panel-reveal">
<div class="content-block">
<p>Menu de Opções</p>
<p>Fechar Menu</p>
</div>
</div>
</div>
<div class="views">
<div class="view view-main">
<div class="pages">
<div data-page="home" class="page navbar-fixed">
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="link icon-only open-panel" data-panel="left">
<i class="icon icon-bars"></i>
</a>
</div>
<div class="center">Home</div>
<div class="right"> <a href="#" class="link icon-only">
<i class="icon icon-back"></i></a>
</div>
</div>
</div>
<div class="page-content">
<div class="content-block">
<p>Menu</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
I'm testing on Chrome, but nothing is happening... It is also not working on IE
Might be easiest if I point you here: http://bootsnipp.com/snippets/featured/user-profile-widget
What I am trying to do is align these side by side so that there are two per row...
I'm just completely confused with the order of the columns...
I guess any Bootstrap expert could please chime in with a suggestion? Thanks!
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="well well-sm">
<div class="row">
<div class="col-sm-6 col-md-4">
<img src="http://placehold.it/380x500" alt="" class="img-rounded img-responsive" />
</div>
<div class="col-sm-6 col-md-8">
<h4>
Bhaumik Patel</h4>
<small><cite title="San Francisco, USA">San Francisco, USA <i class="glyphicon glyphicon-map-marker">
</i></cite></small>
<p>
<i class="glyphicon glyphicon-envelope"></i>email#example.com
<br />
<i class="glyphicon glyphicon-globe"></i>www.jquery2dotnet.com
<br />
<i class="glyphicon glyphicon-gift"></i>June 02, 1988</p>
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-primary">
Social</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span><span class="sr-only">Social</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Twitter</li>
<li>Google +</li>
<li>Facebook</li>
<li class="divider"></li>
<li>Github</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
Perhaps I'm not understanding the question, but it seems to work just fine when including two of them on the same row.
http://bootsnipp.com/user/snippets/M23j
I was wondering if someone knows how I cam accomplish this using Bootstrap 3 while not hacking it.
As you can see from the picture below I'd like to have an inverted navbar at the top. Underneath I'd like to have a bar with black bg that only goes so far (for instance 4 columns with dark bg and the remaining 8 columns with light bg). That's the easy part. The problem I've found is how have the container bg have different colour of background.
At the moment I have this:
That's been achieved using this code:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container nt-container">
<div class="nt-header-top row">
<div class="col-md-4">
<h1 class="nt-logo">New Project</h1>
</div>
<div class="col-md-8 text-right">
<h3>Some slogan here</h3>
</div>
</div>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="row">
<div class="col-md-2">
<ul class="nav navbar-nav">
<li class="active"><span class="glyphicon glyphicon-home"></span></li>
<li><span class="glyphicon glyphicon-list"></span></li>
<li><span class="glyphicon glyphicon-envelope"></span></li>
</ul>
</div>
<div class="col-md-10 nt-top-title-bar">
<section class="row">
<div class="col-md-8 more-padding-left">
<h2 class="">Some slogan here</h2>
</div>
<div class="col-md-4 text-right">
<ul class="nav navbar-nav navbar-right">
<li class="active"><span class="glyphicon glyphicon-home"></span></li>
<li><span class="glyphicon glyphicon-list"></span></li>
<li><span class="glyphicon glyphicon-envelope"></span></li>
</ul>
</div>
</section>
</div>
</div>
</div>
<div class="container nt-container">
<div class="row">
<section class="col-md-2 nt-side-menu-section">
<ul class="list-group">
...
</ul>
</section>
<div class="col-md-5 more-padding-left">
<h2>Heading 1</h2>
<p>...</p>
</div>
<div class="col-md-5">
<h2>Heading</h2>
<p>...</p>
</div>
</div>
<hr>
<footer>
<p>© Company 2013</p>
</footer>
I though maybe I could add div on the right gutter with a light background on top of the container background, but I thought this very hackish and inelegant.
Any suggestions on how to achieve this?
Ok...if I have this right the element in question has a class of .nt-top-title-bar.
You can do this with a pseudo element by adding:
.nt-top-title-bar:after {
content: "";
position: absolute;
background: insert your color here; /* Match the background of menubar*/
top: 0;
bottom: 0;
width: 9999px; /* some huge width */
left: 100%;
}
Codepen Example
CSS-Tricks Reference
I am designing a fluid layout with twitter bootstrap but unfortunately there is some mistake in how i am approaching it.
Please advise where am i doing wrong. I have created a navbar div which contains navbar-inner and within that i have container. Within a container a row.
In a row i have 3 elements the project-name , the navigation bar and the login section.
On shrinking the page the project name stays in correct position, the navbar is hidden to show up only on click and the third the login section gets dislocated.
I can't understand why it is getting dis located.
I have uploaded the code on ---> http://jsfiddle.net/GgzgB/2/
but due to missing images the background is not shown.
PS: this is my first css attempt
<body>
<div class="navbar navbar-fixed-top">
<div id='cssmenu' class="navbar-inner">
<!--<div class="navbar-custom">-->
<div class="container">
<div class="row">
<div class="span2">
<!--<a 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>
</a>-->
<a class="brand" href="#">Project name</a>
</div><!--end of first col -span2-->
<div class="span7">
<div class="nav-collapse collapse">
<ul class="nav">
<li class='active '><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>Company</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div><!--end of nav-collapse collapse-->
</div><!--end of second col - span5-->
<div class="span3">
<div class="login">
<form class="form-signin">
<div class="row">
<div class="span1">
<div class="row">
<input type="text" class="input-header-small pull-left" placeholder="Username">
</div>
<div class="row">
<input type="password" class="input-header-small pull-left" placeholder="Password">
</div>
</div>
<div class="span1">
<div class="row">
<button type="submit" class="btn btn-success btn-medium pull-right">Sign in</button></div>
</div>
</div><!--end of inner 1st row-->
</form>
</div><!--end of login-->
</div><!-- end of span3-->
</div><!-- end of row -->
</div><!-- end of container -->
</div><!-- end of inner -->
</div><!-- end of navbar navbar-fixed-top -->
</body>
First off, if you are trying to create a fluid layout, you'd use row-fluid as opposed to just row.
Additionally, you're putting the login form in the same row as the project-name and navbar.
I'm not going to perfect this for you, but this gets you much closer by using row-fluid, and creating a new row after the navigation:
<body>
<div class="navbar navbar-fixed-top">
<div id='cssmenu' class="navbar-inner">
<div class="container">
<div class="row-fluid">
<div class="span2">
<a class="brand" href="#">Project name</a>
</div>
<div class="span7">
<div class="nav-collapse collapse">
<ul class="nav">
<li class='active '><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>Company</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div><!--end of nav-collapse collapse-->
</div><!--end of second col - span5-->
</div>
<div class="row-fluid">
<div class="span12">
<div class="login">
<form class="form-signin">
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<input type="text" class="input-header-small pull-left" placeholder="Username">
</div>
<div class="row-fluid">
<input type="password" class="input-header-small pull-left" placeholder="Password">
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<button type="submit" class="btn btn-success btn-medium pull-right">Sign in</button></div>
</div>
</div>
</div>
</form>
</div><!--end of login-->
</div><!-- end of span3-->
</div><!-- end of row -->
</div><!-- end of container -->
</div><!-- end of inner -->
</div><!-- end of navbar navbar-fixed-top -->
Often with CSS less is more, so I think you could start off with simplifying your code a bit by removing all the row/span definitions in the navbar, they aren't really necessary. Next, the Bootstrap documentation is quite good, so its always worth looking through them in detail to see if what you want has already been defined there.
From the documentation: "Align nav links, search form, or text, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction." Also, we can use the "navbar-form" class to layout the login form, rather than the grid classes. So lets pare the code down a bit, and then you can perhaps get closer to what you are after.
<body>
<div class="navbar navbar-fixed-top">
<div id='cssmenu' class="navbar-inner">
<div class="container">
<a 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>
</a>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class='active '><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>Company</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div><!--end of nav-collapse collapse-->
<div class="login pull-right">
<form class="form-signin navbar-form">
<input type="text" class="input-header-small pull-left" placeholder="Username">
<input type="password" class="input-header-small pull-left" placeholder="Password">
<button type="submit" class="btn btn-success btn-medium pull-right">Sign in</button></div>
</form>
</div><!--end of login-->
</div><!-- end of container -->
</div><!-- end of inner -->
</div><!-- end of navbar navbar-fixed-top -->
</body>
This may not be your final solution, but I think it would be a good starting point.