I'm trying to edit bootstrap dropdown to my liking but having problem with setting the dropdown-menu width, need it to have 80% of body width which cannot use width: 80% because it's father ain't the body.
I've tried: width: 80%; width: 80vw;
second one works but is not responsive.
first one makes 80% relative to the father div (the one with btn-group class)
<div class="btn-group float-right pt-2 pr-5 ">
<button type="button" class="btn btn-outline-dark pl-4 py-2 dropdown-toggle city_btn" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<span class="ml-3"></span> <i class="fas ml-2 fa-map-marker-alt"></i><span class="cityactive">0</span>
</button>
<div class="dropdown-menu mydropdownoptions">
<span class="mydropdownitems">
<span class="dot"></span>
<a class="" href="#">1</a>
</span>
<span class="mydropdownitems">
<span class="dot"></span>
<a class="" href="#">2</a>
</span>
</div>
Related
Hey everyone so I want to do something rather simple. I want to make a side menu that has icons on it. When you click on those icons it should expand the navigation. Similar to how canva.com does their navigation when you get into a project. Start off with a small navbar with icons as shown in the first image and finally go to the full expanded as in the second image.
I have the following code that I used as a starting point and it kind of works but it expands on hover if anyone knows a good way to make a sidebar like this or how to get my sidebar to expand on click please let me know thanks.
<div data-component="navbar">
<nav class="navbar p-0 fixed-top">
<button class="navbar-toggler navbar-toggler-left rounded-0 border-0" type="button" data-toggle="collapse" data-target="#megamenu-dropdown" aria-controls="megamenu-dropdown" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i><span class="ml-3">Advanced</span>
</button>
<div><a class="navbar-brand px-1" href="#"><img src="http://kris.agentfire2.com/wp-content/mu-plugins/agentfire-shared-library/img/agentfire.svg" class="d-inline-block mt-1" alt="AgentFire Logo" height="40"></a>
<div class="right-links float-right mr-4">
<i class="fa fa-home mr-3"></i>
<div class="d-inline dropdown rounded-0 mx-3">
<a class="dropdown-toggle" id="tools" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#"><i class="fa fa-wrench" aria-hidden="true"></i></a>
<div class="dropdown-menu dropdown-menu-right rounded-0 text-center" aria-labelledby="tools">
<a class="dropdown-item px-2" href="#">Recompile CSS</a>
</div>
</div> <!-- /.dropdown -->
see full code at
https://codepen.io/Kamilica/pen/XRbvaL
I am quite new to Bootstrap 4. I am struggling to vertically align some elements on a list-group. It consists on some text on the left side and a dropdown on the right.
<div class="dashboard-blocks">
<ul class="list-group ">
<li class="dashboard-block list-group-item">
<span class="align-middle">Write Article/s</span>
<span class="btn-group float-right">
<button
type="button"
class="btn btn-secondary dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
ACTION
</button>
<span class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">
Another action
</button>
<button class="dropdown-item" type="button">
Something else here
</button>
</span>
</span>
</li>
On the CSS side I am just applying some styling to the font/colors/borders plus:
.dashboard-block {
...
line-height: normal;
letter-spacing: normal;
...
padding: 25px;
margin-top: 10px;
margin-bottom: 10px;
}
As you can see here "Write Article" is not vertically aligned:
Use flex utility. Due to .float-right it is not allowing to vertically center the span element.
<div class="dashboard-blocks">
<ul class="list-group ">
<li class="dashboard-block list-group-item d-flex justify-content-between align-items-center">
<span class="align-middle">Write Article/s</span>
<span class="btn-group">
<button
type="button"
class="btn btn-secondary dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
ACTION
</button>
</span>
</li>
</ul>
</div>
Things to do:
Add classes to <li> : .d-flex, .justify-content-between,
.align-items-center
Remove .align-middle and .float-right classes from span(not required).
Sample JS Fiddle: https://jsfiddle.net/srijan1709/apbmgde2/13/
Bootstrap 4 Flex Utility: https://getbootstrap.com/docs/4.0/utilities/flex/
You juste need to add this CSS style to your SPAN
vertical-align:middle;
good luck!
Behold the following image of a .page-header I currently have:
As you can see, I'd like to have the page header in the center and buttons aligned to the left and right.
This works because both buttons have the same size. Now, if I increase the size of the left button, look what happens:
You see? The header isn't aligned to the center anymore, it's pushed to the right by the left button. Which is undesirable in my case. I would like to have the header centered, no matter what the size of the buttons are. If the buttons are too big, it would be even okay if they overlap the header.
Here is a code sample and a jsfiddle:
<div class="container">
<div class="page-header">
<a class="btn btn-primary pull-left" role="button" href="#">
<span class="glyphicon glyphicon-plus"></span>
</a>
<a class="btn btn-success pull-right" role="button" href="#">
<span class="glyphicon glyphicon-plus"></span>
</a>
<h3 class="text-center">Header</h3>
</div>
<div class="alert alert-danger" role="alert">No results</div>
</div>
You just need to use positions to make them consistent with the size.
.page-header .pull-left {position: absolute; left: 15px;}
.page-header .pull-right {position: absolute; right: 15px;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="page-header">
<a class="btn btn-primary pull-left" role="button" href="#">
<span class="glyphicon glyphicon-plus"></span>
</a>
<a class="btn btn-success pull-right" role="button" href="#">
<span class="glyphicon glyphicon-plus"></span>
</a>
<h3 class="text-center">Header</h3>
</div>
<div class="page-header">
<a class="btn btn-primary pull-left" role="button" href="#">
<span class="glyphicon glyphicon-plus"></span> text pushes to right
</a>
<a class="btn btn-success pull-right" role="button" href="#">
<span class="glyphicon glyphicon-plus"></span>
</a>
<h3 class="text-center">Header</h3>
</div>
<div class="alert alert-danger" role="alert">No results</div>
</div>
Preview
This is one way, but obviously, this has issues with sizing. When the width is very less, there might be overlaps.
I'm trying to get a Bootstrap btn-group to work, with a few fixed elements and a btn in the middle that grows to fill out the entire thing.
JSFiddle of what I'm trying to do: http://jsfiddle.net/DTcHh/2988/
Basically the idea is I'm trying to get the 3 and 4 buttons to stick to the right, while the "Text here" element fills out the rest of the space. Menu sticks to the left.
I've tried putting btn-group-justified on the element I want to expand out but that makes it take up the entire width of the screen, whereas I want everything to be on one line.
HTML:
<div class="btn-group" role="group" aria-label="First group" style="width:100%; margin-right:-300px">
<div class="btn-group dropup" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Menu <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Edit Lead</li>
<li>Transfer Call</li>
</ul>
</div>
<div class="btn-group" role="group" aria-label="First group" style="width: 100%; margin-right:-320px">
<span class="btn btn-default" style="width:100%;">
Some text here
</span>
</div>
<button type="button" class="btn btn-default">3</button>
<button type="button" class="btn btn-default">4</button>
</div>
Any idea how I can achieve this?
Solved it.
Needed to set table-layout:auto on the parent group and add width:1% to the fixed size elements, width:100% to the expandable elements and add the class btn-group-justify to the parent group. Looks perfect now!
Fiddle: http://jsfiddle.net/DTcHh/2996/
try this
<div class="btn-group btn-group-justified" role="group" aria-label="First group" style="table-layout:auto">
<div class="btn-group dropup" role="group">
<a type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Menu
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>Edit Lead</li>
<li>Transfer Call</li>
</ul>
</div>
<span class="btn btn-default" style="width: 100%;">Hey there</span>
<a type="button" class="btn btn-default">3</a>
<a type="button" class="btn btn-default">4</a>
</div>
I have two questions:
When an item is clicked, how can I show it and hide all other items
How to get a collapsible responsive sidebar like navbar
At first my jsFiddle Demo: http://jsfiddle.net/JpJqD/1/
I'm working to do collapsible sidebar menu.
As you can see in the demo; when i click articles, should be collapse(hide) others. Then if click to users, articles and other items that have sublevel should be collapse(hide). So always should be one opened menu.
I tried with collapse from Bootstrap document, but i couldnt with following codes:
$('#sidebar a').on('click', function () {
$(this).closest('div').find('.collapse').collapse('hide');
$(this).collapse('show');
});
I can do this with accordion but i dont wanna it cause of required panel class for all items.
BTW I want to make responsive sidebar like navbar menus for mobile and tablets? I used like in Bootstrap document but didnt work.
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
This is what i did , hope it fits your need :
<div class="panel panel-default">
<div class="panel-heading">
<h3>Navigation</h3>
</div>
<div id="sidebar" class="list-group">
<a href="#" class="list-group-item active">
<i class="icon-dashboard"></i> Dashboard
</a>
<a href="#users" class="list-group-item" data-parent="#sidebar">
<i class="icon-group"></i> Users
<span class="badge bg_danger">0</span>
</a>
<div id="users" class="list-group subitem collapse">
<a href="#" class="list-group-item">
<i class="icon-caret-right"></i> Users
<span class="badge bg_danger">0</span>
</a>
<a href="#" class="list-group-item">
<i class="icon-caret-right"></i> Create User
</a>
<a href="#" class="list-group-item">
<i class="icon-caret-right"></i> Create Group
</a>
</div>
<a href="#articles" class="list-group-item" data-parent="#sidebar">
<i class="icon-file-text"></i> Articles
<span class="badge bg_danger">0</span>
</a>
<div id="articles" class="list-group subitem collapse">
<a href="#" class="list-group-item bg_warning">
<i class="icon-caret-right"></i> Articles
<span class="badge bg_danger">0</span>
</a>
<a href="#" class="list-group-item">
<i class="icon-caret-right"></i> Create Article
</a>
</div>
</div>
</div>
And this is the corresponding js :
$('#sidebar > a').on('click', function (e) {
e.preventDefault();
if(!$(this).hasClass("active")){
var lastActive = $(this).closest("#sidebar").children(".active");
lastActive.removeClass("active");
lastActive.next('div').collapse('hide');
$(this).addClass("active");
$(this).next('div').collapse('show');
}
});
If you are looking for auto collapsible sidebar with animation this is the best according to me
Code
https://github.com/IronSummitMedia/startbootstrap-simple-sidebar
Demo
http://ironsummitmedia.github.io/startbootstrap-simple-sidebar