I have a dropdown in card header i need that to be in top right corner how do i set that in my header.I need welcome message in right side of the card header as below image its beside the title
What I did:-
I added a classes to .card (of bootstrap) with CSS properties of display: "flex" justify-content: "space-between" and flex-direction: row
reference:- https://getbootstrap.com/docs/4.0/utilities/flex/
Style:-
<style>
.card {
/* Add shadows to create the "card" effect */
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
margin: 0 auto;
float: none;
margin-bottom: 10px;
}
/* On mouse-over, add a deeper shadow */
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
body {
background-color: lightblue;
}
</style>
Html:-
<div class="container-fluid" style="padding-top: 50px">
<div class="card d-flex flex-row justify-content-between">
<div
class="card-header text-center"
style="font-family: Sans-Serif; text-transform: uppercase; font-size: 1.5rem"
>
Project Manager Dashboard
</div>
<div class="btn-group dropleft">
<button
type="button"
class="btn btn-outline-secondary"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Hi, Drake
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
<a href="{% url 'logout_view' %}"
><button class="dropdown-item" type="button">Logout</button></a
>
</div>
</div>
</div>
</div>
snip
To set it in the top-right corner just use the align property this would align the element to the right.
<div class="container-fluid" style="padding-top: 50px;">
<div class="card">
<div class="card-header text-center " style="font-family: Sans-Serif; text-transform:uppercase; font-size:1.5rem">
Project Manager Dashboard
<div class="btn-group dropright" align="right" >
<!-- Dropdown menu links -->
<button class="dropdown-item" type="button">Log</button>
</div>
<div class="btn-group dropleft">
<button type="button" class="btn btn-outline-secondary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Hi, Drake
</button>
</div>
</div>
Related
The collapsed navbar is being hidden by the content in the section element - for example, when testing as a small device display (iphone se, etc), the section content blocks the navbar and when I click on the collapsed navbar toggle to get the routes, nothing happens. How come it's not pushing that content down to expand?
Am I wrapping the navbar and section wrong?
Using react, bootstrap v5.3.0-alpha1
export default function Navbar() {
return (
<nav className="navbar navbar-expand-sm">
<div className="container-fluid">
<Link to='/' className="navbar-brand d-none d-md-block">
<img src={"./logo.png"} style={{ height: '50px', width: '50px', borderRadius: '5px'}} alt='' />
</Link>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse text-center justify-content-start" id="navbarTogglerDemo01">
<div className="navbar-nav">
<a className="nav-link" href="/#">about_1</a>
<a className="nav-link" href="/#">about_2</a>
</div>
</div>
<div className="btn-toolbar" role="toolbar">
<div className="btn-group me-2" role="group">
<button type="button" className="btn btn-primary" onClick={signIn} id="sign_in_button">{user === null ? 'Sign In' : user}</button>
</div>
<div className="btn-group me-2" role="group">
<div className="dropdown">
<button className="btn" id="settings" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside" style={{ height: '40px'}}>
<i className="bi bi-three-dots"></i>
</button>
<ul className="dropdown-menu dropdown-menu-end" style={{ width: '20vw'}} id="settings_menu">
<div className="container-fluid">
<div className="row">
<div className="col">
<li><h6 className="dropdown-header">Navigation</h6></li>
<li><Link to='/burn' className="dropdown-item">test</Link></li>
<li><a className="dropdown-item" href="https://xxx">test</a></li>
</div>
<div className="col">
<li><h6 className="dropdown-header">Other</h6></li>
<li><a className="dropdown-item" href="https://opensea.io/collection/test">test</a></li>
<li><a className="dropdown-item" href="https://opensea.io/collection/test">test</a></li>
</div>
</div>
<div className="row">
<li><hr className="dropdown-divider" /></li>
<li>
<a className="dropdown-item d-flex justify-content-between align-items-center" href="/#" onClick={() => theme === 'light' ? setTheme('dark') : setTheme('light')}>
Dark Theme
<i className="bi bi-moon"></i>
</a>
</li>
<br />
<br />
<div className="col" style={{ display: 'inline-flex'}}>
<li><a className="dropdown-item" href="https://twitter.com/test"><i className="bi bi-twitter"></i></a></li>
<li><a className="dropdown-item" href="https://t.me/test"><i className="bi bi-telegram"></i></a></li>
</div>
</div>
</div>
</ul>
</div>
</div>
</div>
</div>
</nav>
);
}
import Navbar from '../components/navbar.js';
export function Index() {
return (
<>
<Navbar></Navbar>
<section className="">
<div className="container col-xxl-8 px-4 py-5 position-absolute top-50 start-50 translate-middle">
<div className="row flex-lg-row-reverse align-items-center g-5 py-5">
<div className="col-10 col-sm-8 col-lg-6">
<img src={"./test.jpg"} className="d-none d-sm-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="500" height="250" loading="lazy" />
</div>
<div className="col-lg-6 text-start">
<h1 className="display-5 fw-bold lh-1 mb-3" style={{ fontSize: '72px'}}>TEST HEADER</h1>
<p className="lead">
Quickly design and customize responsive mobile-first
sites with Bootstrap, the world's most popular front-end open
source toolkit, featuring Sass variables and mixins, responsive grid system,
extensive prebuilt components, and powerful JavaScript plugins.
A powerful enterprise-grade infrastructure
</p>
<div className="d-grid gap-2 d-md-flex justify-content-md-start">
<button type="button" className="btn btn-primary btn-lg px-4 me-md-2">Try For Free</button>
{/* <button type="button" className="btn btn-outline-secondary btn-lg px-4">Default</button> */}
</div>
</div>
</div>
</div>
</section>
</>
);
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
#media only screen and (max-width: 576px) {
.navbar .btn-toolbar {
position: absolute;
top: 8px;
right: 12px;
}
}
#settings {
border-radius: 5px;
}
#settings:hover {
/* background: #e1e1e1; */
background: var(--bs-tertiary-bg);
border-radius: 5px;
}
/* html[data-bs-theme="dark"] #settings:hover {
background: var(--bs-tertiary-bg);
border-radius: 5px;
} */
.navbar a.nav-link {
margin: 0px 8px;
border-radius: 5px;
}
.navbar a.nav-link:hover {
/* background: #e1e1e1; */
background: var(--bs-tertiary-bg);
border-radius: 5px;
}
/* html[data-bs-theme="dark"] .navbar a.nav-link:hover {
background: var(--bs-tertiary-bg);
border-radius: 5px;
} */
#settings {
color: var(--bs-navbar-color);
}
#sign_in_button {
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
/* outline: webkit-focus-ring-color auto 1px; */
outline: none;
border: none;
}
#sign_in_button:hover {
transform: scale(1.05);
/* background: none; */
outline: none;
border: none;
}
I would like to switch the left box with the right box. I am using the function sortable() from jQuery UI. As you see in my code, it works fine for the numbers of 1 and 2 but not for the boxes to switch them left and right.
$(".sort-me").sortable({
connectWith: ".connectedSortable"
});
.title {
background: red;
}
.storename {
background: blue;
}
.row {
margin-top: 1rem;
margin-bottom: 1rem;
}
/* metatag generator relevant */
.mg-item {
display: inline-block;
}
.mg-item-inner {
display: flex;
}
.mg-item-inner .btn-group .btn .name {
margin-right: 1rem;
}
.mg-item-inner>.btn-group:not(.collapsed)>.btn:first-child {
cursor: -webkit-grab;
cursor: grab;
}
.mg-item-inner .input-group-btn:only-child>.btn {
border-radius: 4px;
}
.mg-item-inner>.btn-group,
.mg-item-inner>.input-group {
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 10px 20px rgba(0, 0, 0, 0.04);
}
.mg-item-inner>.btn-group+.input-group,
.mg-item-inner>.input-group+.input-group,
.mg-item-inner>.btn-group+.btn-group,
.mg-item-inner>.input-group+.btn-group {
margin-left: -1px;
}
.mg-item span.add {
background: transparent;
color: #444;
padding-left: 0;
margin-left: 0;
}
.mg-item span.add:active {
box-shadow: unset;
color: #313131;
}
.mg-item span.add .fa-plus-circle {
opacity: 0;
}
.mg-item:hover span.add .fa-plus-circle {
opacity: 1;
}
/*# sourceMappingURL=mg.css.map */
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/js/all.min.js"></script>
<div class="container">
<!-- Title -->
<div class="row">
<div draggable="true" class="sort-me title connectedSortable">
<div class="col-md-3">
<div class="mg-item-inner">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-container='body' title='Gibt den Seitentitel aus'>
<span class="name">TITLE</span><i class="fas fa-arrows-alt"></i></button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-container='body' title="Linie Erweitern / Reduzieren">
<i class="fas fa-swatchbook"></i></button>
</div>
<!-- /btn-group -->
<div class="input-group" role="group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">prefix <i class="fas fa-sort"></i></button>
<ul class="dropdown-menu">
<li>prefix</li>
<li>suffix</li>
<li>none</li>
</ul>
</div>
<!-- /input-btn-group -->
<input type="text" class="form-control">
</div>
<!-- /input-group --><span type="button" class="btn add"><i class="fas fa-plus-circle"></i></span>
</div>
<!-- /mg-item-inner -->
</div>
<!-- /mg-item -->
</div>
<!--STORE NANE -->
<div draggable="true" class="sort-me storename connectedSortable">
<div class="col-md-3">
<div class="mg-item-inner">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-container='body' title='Fügt den Storename hinzu'>
<span class="name">STORENAME</span><i class="fas fa-arrows-alt"></i></button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Linie Erweitern / Reduzieren">
<i class="fas fa-swatchbook"></i></button>
</div>
<!-- /btn-group -->
<div class="input-group" role="group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">prefix <i class="fas fa-sort"></i></button>
<ul class="dropdown-menu">
<li>prefix</li>
<li>suffix</li>
<li>none</li>
</ul>
</div>
<!-- /input-btn-group -->
<input type="text" class="form-control">
</div>
<!-- /input-group --><span type="button" class="btn add"><i class="fas fa-plus-circle"></i></span>
</div>
<!-- /mg-item-inner -->
</div>
<!-- /mg-item -->
</div>
</div>
</div>
<div class="sort-me">
<div class="connectedSortable">
<h1>
1
</h1>
</div>
<div class="connectedSortable">
<H1>2</H1>
</div>
</div>
https://jsfiddle.net/mjc9as5L/
What is the reason that the boxes can not be sorted? Is there a CSS issue maybe?
Try to add flex to your row, it might solve your problem.
.container > .row{
display:flex;
flex-direction:row-reverse;
justify-content:start;
}
For some reason, my dropdown in my FORM is not working; nothing happens when it is clicked. I also find it strange because I copied this code from somewhere else, and it isn't working. I have checked for typos multiple times but came up with nothing.
<!DOCTYPE html>
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<title>My Awesome Login Page</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<style>
body,
html {
margin: 0;
padding: 0;
height: 100%;
background: #60a3bc !important;
}
.user_card {
height: 430px;
width: 350px;
margin-top: auto;
margin-bottom: auto;
background: #f39c12;
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
padding: 1px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 5px;
}
.brand_logo_container {
position: absolute;
height: 170px;
width: 170px;
top: -75px;
border-radius: 50%;
background: #60a3bc;
padding: 10px;
text-align: center;
}
.brand_logo {
height: 150px;
width: 150px;
border-radius: 50%;
border: 2px solid white;
}
.form_container {
margin-top: 5px;
}
.login_btn {
width: 100%;
background: #c0392b !important;
color: white !important;
}
.login_btn:focus {
box-shadow: none !important;
outline: 0px !important;
}
.login_container {
padding: 0 2rem;
}
.input-group-text {
background: #c0392b !important;
color: white !important;
border: 0 !important;
border-radius: 0.25rem 0 0 0.25rem !important;
}
.input_user,
.input_pass:focus {
box-shadow: none !important;
outline: 0px !important;
}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
background-color: #c0392b !important;
}
</style>
</head>
<!--Coded with love by Mutiullah Samim-->
<body>
<div class="container h-100">
<div class="d-flex justify-content-center h-100">
<div class="user_card">
<div class="d-flex justify-content-center form_container">
<form>
<div class="input-group mb-3">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-user"></i></span>
</div>
<input type="text" name="" class="form-control input_user" value="" placeholder="username">
</div>
<div class="input-group mb-3">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-envelope"></i></span>
</div>
<input type="email" name="" class="form-control input_user" value="" placeholder="email.">
</div>
<div class="input-group mb-2">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-key"></i></span>
</div>
<input type="password" name="" class="form-control input_pass" value="" placeholder="password">
</div>
<div class="input-group mb-2">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-flag"></i></span>
</div>
<div class="dropdown show">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Country.
</button>
***
/*HERE IS THE PROBLEM PROBLEM PROBLEM PROBLEM PROBLEM PROBLEM PROBLEM PROBLEM PROBLEM PROBLEM PROBLEM PROBLEM PROBLEM PROBLEM PROBLEM PROBLEM PROBLEMPROBLEM PROBLEM PROBLEM PROBLEM PROBLEM PROBLEM PROBLEM*/
------------------------------------------------------------------------
***
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<div class="input-group mb-2">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-genderless"></i></span>
</div>
<div class="dropdown show">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Gender
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Male</a>
<a class="dropdown-item" href="#">Female</a>
</div>
</div>
</div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customControlInline">
<label class="custom-control-label" for="customControlInline">Remember me</label>
</div>
</div>
<div class="d-flex justify-content-center mt-3 login_container">
<button type="button" name="button" class="btn login_btn">Sign Up</button>
</div>
</form>
</div>
<div class="mt-4">
<div class="d-flex justify-content-center links">
Already have an account? Login.
</div>
<div class="d-flex justify-content-center links">
Forgot your password?
</div>
</div>
</div>
</div>
</div>
</body>
</html>
According to the Bootstrap introduction, you will need to include the the popper.js script for some bootstrap feature like dropdown, tooltip, etc. to work.
Here is the script you need to include:
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
On a side note, you seem to have imported the jQuery script twice, please consider removing one of them.
I'm trying to show a bootstrap 4 label for a dropdown href alongside some text, here's the current HTML that I've put together:
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="http://example.org/img/user/user-13.jpg" alt="">
<span class="d-none d-md-inline">Adam Schwartz</span>
<span class="label bg-blue">Free</span>
<b class="caret"></b>
</a>
I also have the following CSS that's being applied:
.header .navbar-nav>li .dropdown-toggle .label, .header .navbar-nav>li>a .label {
position: absolute;
top: 8px;
right: 5px;
display: block;
background: #00acac;
line-height: 12px;
font-weight: 600;
color: #fff;
padding: .3em .6em;
border-radius: 20px;
}
But the issue I'm having is that my label is not showing inline to the right of the name in-between the caret as you can see below:
Remove position: absolute; if you want it to flow normally.
When you include the style rules below, you are telling the browser to take the .label out of the flow and position it 8px from the top and 5px from the right of the closest parent component in the DOM with that has a position set such as relative or absolute.
position: absolute;
top: 8px;
right: 5px;
Use Bootstrap Columns
img {
width: 70px;
height: 70px;
border-radius: 50%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-12 mt-3">
<a href="#" class="dropdown-toggle row d-flex align-items-center align-self-center" data-toggle="dropdown">
<div class="col-1 div-container px-0 mr-4">
<img src="http://tineye.com/images/widgets/mona.jpg" class="" alt="" />
</div>
<div class="col-5 col-sm-3 col-md-2 ml-3 pl-2 pr-0 ml-md-0 pl-md-0 text-left">Adam Schwartz</div>
<div class="px-2 pl-lg-0 pr-lg-2">Free</div>
</a>
</div>
</div>
Hope it would help you.
It worked for me. Please see the live example below.
.dropdown-toggle,
.dropdown-menu {
width: 300px;
}
.btn-group img {
margin-right: 10px;
}
img {
width: 70px;
height: 70px;
border-radius: 50%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<img src="http://lorempixel.com/75/50/abstract/">
Adam Schwartz
<span class="badge badge-primary">Free</span>
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
<!-- Add the .dropdown-menu class to a <div> element to actually build the dropdown menu. -->
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
</div>
</div>
There are three content blocks and I'd like to enable/disable them with the Bootstrap's data-* "tools". The control elements should be checkboxes. When a content block is displayed, its checkbox should be checked.
summary
The problem is, that the checkbox inside links are not working as expected (starting to change the state only after the second click), after adding the Bootstrap behavior to the wrapping a tags.
The code is here.
long version
So first of all I created the content blocks and the controls without functionality (and gave them some styles):
<div class="col-xs-12" id="select-panel">
<div class="col-lg-12" id="filter-bar">
<div>
<a href="#containerFoo">
<label class="btn btn-primary" id="filterFoo">
<input type="checkbox" checked autocomplete="off">
<span class="text-label">foo</span>
<span class="glyphicon glyphicon-question-sign"></span>
</label>
</a>
<a href="#containerBar">
<label class="btn btn-primary" id="filterBar">
<input type="checkbox" checked autocomplete="off">
<span class="text-label">bar</span>
<span class="glyphicon glyphicon-ok-sign"></span>
</label>
</a>
<a href="#containerBuz">
<label class="btn btn-primary" id="filterBuz">
<input type="checkbox" checked autocomplete="off">
<span class="text-label">buz</span>
<span class="glyphicon glyphicon-remove-sign"></span>
</label>
</a>
</div>
</div>
</div>
<div> </div>
<div class="panel panel-default in" id="containerFoo">foo</div>
<div class="panel panel-default in" id="containerBar">bar</div>
<div class="panel panel-default in" id="containerBuz">buz</div>
The checkboxes are behaving as expected. Now the actual functionality needs to be added. The the A tags were extended as follows:
...
<a href="#containerFoo" data-toggle="collapse" aria-expanded="true" aria-controls="containerFoo">
...
</a>
<a href="#containerBar" data-toggle="collapse" aria-expanded="true" aria-controls="containerBar">
...
</a>
<a href="#containerBuz" data-toggle="collapse" aria-expanded="true" aria-controls="containerBuz">
...
</a>
...
Now the toggling is working. But the checkboxes are always checked. Well, after it I also extended the DIV wrapper around the control checkboxes:
<div class="btn-group" data-toggle="buttons">
Now the checkboxes are behaving ever stranger. On the first click the checkbox remains on (checked). An from the second click on the same checkbox the behavior becomes normal: the state gets changed on every click.
Is it a bug or am I doing something wrong?
How to get checkboxes inside links working correctly, when Bootstrap toggling is used?
I would keep the link and drop the form elements.
the checkbox can be drawn from a pseudo holding a checkmark or not.
here is the basic idea : https://jsfiddle.net/jsL3dx1w/7/
#filter-bar {
margin: 0;
padding: 0;
white-space: nowrap;
text-align: right;
}
#filter-bar * {
box-sizing: border-box;
}
#filter-bar a,
#filter-bar a:hover {
text-decoration: none;
}
a[data-toggle]:before {
display:inline-block;
content:'\2713';
border:solid 1px white;
box-shadow:inset 0 0 2px black, 0 0 1px black;
line-height:0.6em;
color:darkblue;
width:0.8em;height:0.8em;
}
a[data-toggle].collapsed:before {content:''}
#filter-bar {
outline: none;
border: 0;
color: #ffffff;
}
#filter-bar span{
margin: 5px 5px 0 5px;
outline: 0;
}
#filter-bar .btn:active,
#filter-bar .btn.active {
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
#containerFoo,
#filter-bar #filterFoo {
background: #f5a623;
}
#containerBar,
#filter-bar #filterBar {
background: #50c14e;
}
#containerBuz,
#filter-bar #filterBuz {
background: #d21f31;
}
.clear {
float: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<link href="https://cdn.rawgit.com/twbs/bootstrap/v3.3.7/dist/css/bootstrap.css" rel="stylesheet"/>
<div class="col-xs-12" id="select-panel">
<div class="col-lg-12" id="filter-bar">
<div class="btn-group" data-toggle="buttons">
<a href="#containerFoo" data-toggle="collapse" aria-expanded="true" aria-controls="containerFoo"class="btn btn-primary" id="filterFoo">
<span class="text-label">foo</span>
<span class="glyphicon glyphicon-question-sign"></span>
</a>
<a href="#containerBar" data-toggle="collapse" aria-expanded="true" aria-controls="containerBar" class="btn btn-primary" id="filterBar">
<span class="text-label">bar</span>
<span class="glyphicon glyphicon-ok-sign"></span>
</a>
<a href="#containerBuz" data-toggle="collapse" aria-expanded="true" aria-controls="containerBuz" class="btn btn-primary" id="filterBuz">
<span class="text-label">buz</span>
<span class="glyphicon glyphicon-remove-sign"></span>
</a>
</div>
</div>
</div>
<div> </div>
<div class="panel panel-default in" id="containerFoo">
foo
</div>
<div class="panel panel-default in" id="containerBar">
bar
</div>
<div class="panel panel-default in" id="containerBuz">
buz
</div>
automatix wrote
I took your solution and edited it a bit. The principle is still the same, but implemented with glyphicons: http://jsfiddle.net/automatix/jsL3dx1w/41 .