<div id="param-selection-div" style="margin-bottom: 0px;">
<div class="dropdown custom-dropdown dynamic-dropdown cached-dropdown open" id="select-product-dropdown" title="Select">
<div>Product</div>
<button class="btn btn-default dropdown-toggle custom-dropdown-box" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" title="Select" value="Select">Select<span class="custom-caret"></span></button>
<ul class="dropdown-menu scrollable-menu custom-dropdown-border" aria-labelledby="dropdownMenu1" id="select-product"><li title="CRM">CRM</li><li title="OMS">OMS</li></ul></div>
<div class="dropdown custom-dropdown dynamic-dropdown cached-dropdown" id="select-version-dropdown" title="Select">
<div>Release</div>
<button class="btn btn-default dropdown-toggle custom-dropdown-box" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" title="Select" value="Select">Select<span class="custom-caret"></span></button>
</div>
<div class="dropdown custom-dropdown dynamic-dropdown cached-dropdown" id="select-phase-dropdown" title="Select">
<div>Phase</div>
<button class="btn btn-default dropdown-toggle custom-dropdown-box" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" title="Select" value="Select">Select<span class="custom-caret"></span></button>
</div>
<div class="dropdown custom-dropdown dynamic-dropdown cached-dropdown" id="select-group-dropdown" title="Select">
<div>Group</div>
<button class="btn btn-default dropdown-toggle custom-dropdown-box" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" title="Select" value="Select">Select<span class="custom-caret"></span></button>
</div>
<div class="dropdown custom-dropdown dynamic-dropdown cached-dropdown wide-dropdown" id="select-env-dropdown" title="Select">
<div>Environment</div>
<button class="btn btn-default dropdown-toggle custom-dropdown-box" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" title="Select" value="Select">Select<span class="custom-caret"></span></button>
</div>
<div id="submit-selections">
<button class="btn custom-submit-btn" id="submit-selections-button" type="button" aria-haspopup="true" aria-expanded="true" onclick="getEnvOperations();cacheDropDownSelections()" disabled="" data-toggle="tooltip" data-placement="top" title="Get Environment Details">
FILTER
</button>
<button class="btn no-borders-btn" id="" type="button" aria-haspopup="true" aria-expanded="true" onclick="clearDropDownsCookieEntry();initDropDowns()" data-toggle="tooltip" data-placement="top" title="Clear Selection">CLEAR
</button>
</div>
</div>
Related
This is what I want to achieve this in django/bootstrap.
The user is supposed to select options from two DDLs and enter a number in the box, then press update to post parameters to server.
But it does not work.
And below is the code I have written:
(I have removed some django lines - but there will be loops and variables to get data from the form)
<form class="form-inline " method="post" action="{% url 'historical' %}">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownCrypto"
name="crypto" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{Selected-Coin}}
</button>
<div class="dropdown-menu" aria-labelledby="dropdownCrypto">
<a class="dropdown-item">BTC</a>
<a class="dropdown-item">XRP</a>
</div>
</div>
<div class="dropdown">
<button class="btn btn-outline-secondary dropdown-toggle" type="button"
id="dropdownCurrency" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
{{Selected-Currency}}
</button>
<div class="dropdown-menu" aria-labelledby="dropdownCurrency" name="currency">
<a class="dropdown-item" href="#USD">USD</a>
<a class="dropdown-item" href="#EUR">EUR</a>
</div>
</div>
<input class="form-control " type="number" aria-label="Period"
name="period" value="10"> days
<button class="btn btn-outline-secondary " type="submit">Update</button>
</form>
I created this piece of code but for some reason both the login modal and the dropdown menu don't work.
jsfiddle.net
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html"><span class="glyphicon glyphicon-home"
aria-hidden="true"></span> Home</a></li>
<li><a href="aboutus.html"><span class="glyphicon glyphicon-info-sign"
aria-hidden="true"></span> About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
Parks <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Alcazar Park</li>
<li>Municipality Park</li>
<li>OSE Park</li>
</ul>
</li>
<li><a href="contactus.html"><span class="fa fa-envelope-o"
aria-hidden="true"></span> Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a data-toggle="modal" data-target="#loginModal">
<span class="glyphicon glyphicon-log-in"></span> Login</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="loginModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal Content -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Login </h4>
</div>
<div class="modal-body">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="email">Email address</label>
<input type="email" id="email" name="email" placeholder="Email" class="form-control input-sm">
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Password" class="form-control input-sm">
</div>
<div class="checkbox">
<label style="color:black;">
<input type="checkbox"><small>Remember Me</small>
</label>
</div>
<button type="submit" id="signIn" class="btn btn-info btn-sm">Sign In</button>
<button type="button" id="cancelModal" class="btn btn-default btn-sm" data-dismiss="modal">Cancel</button>
</form>
</div>
</div>
</div>
</div>
Any ideas what could be wrong? I find it very weird,as I can't find any mistake.
Thanks,
Theo.
it is missing jquery library.
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
https://jsfiddle.net/nwen88pk/3/
For both Bootstrap features you're looking for (Modal and Dropdown), jQuery is required. Your code in your fiddle is missing the jQuery library.
https://code.jquery.com/jquery-3.2.1.min.js
Also, you must include the jQuery library before including the Bootstrap JavaScript.
How can I build a nested dismissible alerts in bootstrap.
The idea is to have a box (a filter) with boxes inside (filter-criteria) and have the user click crosses to delete the entire filter of just a filter criteria.
* EDIT *
Given the feedback I came up with the following :
<div class="alert alert-info NewsAudienceFilterContainer col-md-12 " id="0" style="">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<span class="filter-option">
<button class="btn btn-info filter" type="button" data-dismiss="alert">
Werkjaar : 2016 - 2017
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</span>
<span class="filter-option">
<button class="btn btn-info filter" type="button" data-dismiss="alert">
Activiteit : Piano
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</span>
<span class="filter-option">
<button class="btn btn-info filter" type="button" data-dismiss="alert">
Lesgever / Coach : Piano Heleen
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</span>
<span class="filter-option">
<button class="btn btn-info filter" type="button" data-dismiss="alert">
Dag : Maandag
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</span>
</div>
Problem : when clicking on the X of the filter-options, the entire filter disappears.
Compare to the sample. I've used <span> in stead of <div>. Is that the reason ?
* EDIT 2 * Functioning workaround.Add an id to the 'filter-option' and use 'data-target' attribute on the button.
<span class="filter-option" id="DayOfWeekFilter242375497">
<button class="btn btn-info filter" type="button" data-dismiss="alert" data-target="#DayOfWeekFilter242375497">
Dag : Woensdag
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
<input name="NewsAudienceFilter.DayOfWeek" type="hidden" value="Wednesday">
</span>
I've created a fiddle for this based on bootstrap framework as you've requisted.
HTML
<div class="panel panel-default">
<div class="panel-body">
Example
<div class="panel panel-default">
<button type="button" class="close" id="close-filter-box" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<div class="panel-heading">Filter box with filter-criteria</div>
<div class="panel-body">
<div class="filter-option">
<button class="btn btn-info filter" type="button" data-dismiss="alert">
Filter 1 <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</div>
<div class="filter-option">
<button class="btn btn-info filter" type="button" data-dismiss="alert">
Filter 2 <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</div>
<div class="filter-option">
<button class="btn btn-info filter" type="button" data-dismiss="alert">
Filter 3 <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</div>
<div class="filter-option">
<button class="btn btn-info filter" type="button" data-dismiss="alert">
Filter 4 <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</div>
<div class="filter-option">
<button class="btn btn-info filter" type="button" data-dismiss="alert">
Filter 5 <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div>
</div>
CSS
#close-filter-box {
margin: 10px;
}
.filter {
margin: 5px;
}
.filter .glyphicon-remove {
vertical-align: bottom;
margin-bottom: 4px;
opacity: .7;
}
.filter .glyphicon-remove:hover {
opacity: 1.0;
color: #fff;
}
I hope this comes close to what you try to achieve.
Functioning workaround.Add an id to the 'filter-option' and use 'data-target' attribute on the button.
<span class="filter-option" id="DayOfWeekFilter242375497">
<button class="btn btn-info filter" type="button" data-dismiss="alert" data-target="#DayOfWeekFilter242375497">
Dag : Woensdag
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
<input name="NewsAudienceFilter.DayOfWeek" type="hidden" value="Wednesday">
</span>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<form class="form-inline" role="form">
<div style="display:inline-block;" class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" name="city" data-toggle="dropdown">CITY
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>DELHI</li>
<li>MUMBAI</li>
<li>CHENNAI</li>
<li>KOLKATA</li>
</ul>
</div>
<input type="text" class="form-control" id="search" name="search" placeholder="Search"/>
<button class="btn btn-warning" id="serach_button"style="background-color:yellow !important;border-color:yellow !important; color:black !important;">Search</button>
</div>
</form>
</div>
This may help
If you want only in mobile/tablet mode.Remove col-md-12 col-lg-12
HTML
<div class="row">
<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">CITY<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>DELHI</li>
<li>MUMBAI</li>
<li>CHENNAI</li>
<li>KOLKATA</li>
</ul>
</div>
<input type="text" class="form-control" aria-label="...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Search!</button>
</span>
</div>
</div>
</div>
Working demo
I have a linear component I'm developing and I have pretty much all set, JSfifiddle:
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Filter <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</span>
<!--action="{{ url_for('search') }}" method="post">-->
<input type="text" placeholder="Search..." class="form-control">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Go!</button>
</span>
</div>
</div>
</div>
Now, what I want to achieve is to actually POST the "search" when I press on the Go! button. I have no experience in front-end, so I need your help with this one, I tried to add but that breaks the bootstrap awesome look.
TL;DR. how to make the Go! button post the text in the textbox.
You have to include a form element in your code.
<!--Search bar-->
<div class="row" style="margin-top:50px;">
<div class="col-md-6 col-md-offset-3">
<form class="navbar-form" method="post" action="{{ url_for('search') }}" role="search">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Filter
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</span>
<input type="text" placeholder="Search..." class="form-control">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Go!</button>
</span>
</div>
</form>
</div>
</div>
Please find the update of your JSFiddle