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>
Related
Consider the following:
<ul class="park-list row row-pd">
<li class="col-12" v-for="(item, index) in list.items" v-bind:key="index">
<div class="park-note px-3 py-2">
<p class="font-italic" >
{{ item.notes }} <a v-bind:href="'#collapseNoteTest'+item.id"
data-toggle="collapse" role="button" aria-expanded="false"
v-bind:aria-controls="'#collapseNoteTest'+item.id">
<i class="svg-12 ic-cyan-path" v-html="icons['ic-edit']"></i></a>
</p>
<div class="collapse" v-bind:id="'collapseNoteTest'+item.id">
<div class="form-group">
<label for="exampleFormControlTextarea1">Note:</label>
<textarea class="form-control" v-model="item.notes" rows="3"></textarea>
</div>
<div class="form-row">
<div class="col-auto ml-auto">
<button type="button" class="btn btn-outline-primary" v-bind:href="'#collapseNoteTest'+item.id" data-toggle="collapse">Cancel</button>
</div>
<div class="col-auto">
<button class="btn btn-success mb-2" v-bind:href="'#collapseNoteTest'+item.id" data-toggle="collapse">Save</button>
</div>
</div>
</div>
</div>
</li>
</ul>
No matter what I do here, item.notes does not update when I enter text into the textarea. What am I doing wrong?
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.
In bootstrap, buttons with icons are implemented using a combination of <button> and <span>:
http://getbootstrap.com/components/#glyphicons-examples
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
In font awesome, buttons are implemented using combination of <a> and <i>:
http://fontawesome.io/examples/
<a class="btn btn-danger" href="#">
<i class="fa fa-trash-o fa-lg"></i> Delete</a>
Is there a better way? Or are the selection of these tags completely arbitrary?
It completely depends upon the usage.
In bootstrap you can implement buttons using combination of <a> and <i>. Similarly , in font-awesome buttons with icons can be implemented using a combination of <button> and <span>.
For example: If we need to submit a form and the submit button contains a font-awesome icon then we do it like this--
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="fa fa-trash-o fa-lg" aria-hidden="true"></span>
</button>
Another example: If we need to use a normal link and the link contains a bootstrap glyphicon icon then we can do it like this--
<a class="btn btn-danger" href="#">
<i class="glyphicon glyphicon-align-left"></i> Delete</a>
Another example using <i> tag.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<button class="btn btn-warning">
<i class="fa fa-trash-o fa-lg"></i>
</button>
<button class="btn btn-primary">
<i class="fa fa-trash-o fa-lg"></i> Delete
</button>
<button class="btn btn-danger">
Delete <i class="fa fa-trash-o fa-lg"></i>
</button>
<div class="container">
<h2>Glyphicon Examples</h2>
<p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>
<p>Envelope icon as a link:
<span class="glyphicon glyphicon-envelope"></span>
</p>
<p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
<p>Search icon on a button:
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</p>
<p>Search icon on a styled button:
<button type="button" class="btn btn-info">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</p>
<p>Print icon: <span class="glyphicon glyphicon-print"></span></p>
<p>Print icon on a styled link button:
<a href="#" class="btn btn-success btn-lg">
<span class="glyphicon glyphicon-print"></span> Print
</a>
</p>
</div>
<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