How to use bootstrap drapdown along with text box and a submit button to post data - django-templates

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>

Related

make dropdown over my datatabe

after click in my single button ,the dropdown is under my datatables !
my code :
<div class="dropdown">
<button type="button" class="btn btn-icon" aria-label="btnGroup" data-toggle="dropdown" >
<i class="icon icon-dots-vertical"></i>
</button>
<div class="dropdown-menu" aria-labelledby="btnGroup">
<a class="dropdown-item" href="#">Modifier Contrat</a>
<a class="dropdown-item" href="#">Supprimer Contrat</a>
</div>
</div>
If you want the dropdown to stay within your modal without adjusting the z-index you can align the dropdown the the right edge of your button using the class 'dropdown-menu-right' on the 'dropdown-menu' div:
<div class="dropdown">
<button type="button" class="btn btn-icon" aria-label="btnGroup" data-toggle="dropdown" >
<i class="icon icon-dots-vertical"></i>
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="btnGroup">
<a class="dropdown-item" href="#">Modifier Contrat</a>
<a class="dropdown-item" href="#">Supprimer Contrat</a>
</div>

Login modal and dropdown menu don't work

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.

Font awesome and bootstrap button with icons syntax

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>

Simple search-form for bootstrap 3

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

how to create a chat input box in bootstrap 3?

I want to create somthing that in bootsrap:
[colorpicker | input box | button] [toggle button]
I have used:
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Send</button>
<button class="btn btn-default">Users</button>
</span>
</div>
However, I don't know what colorPicker for bootstrap I should use (only 9 colors pickers) and how to add it on left side.
Any help is welcome.
Fiddle: http://jsfiddle.net/5B5v5/
Since I think you're saying you want a color picker with just 9 color options, I would go with a dropdown instead of a fully baked color-picker plugin... like so:
<div class="form-inline">
<div class="input-group">
<div class="input-group-btn">
<!-- COLOR PICKER -->
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Color <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><span style="color:cyan" class="glyphicon glyphicon-tint"></span> Cyan</li>
<li><span style="color:blue" class="glyphicon glyphicon-tint"></span> Blue</li>
<li><span style="color:magenta" class="glyphicon glyphicon-tint"></span> Magenta</li>
<li>...more...</li>
</ul>
<!-- END COLOR PICKER -->
</div><!-- /btn-group -->
<input type="text" class="form-control">
</div>
<button class="btn btn-primary" type="button">Send</button>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-user"></span></button>
</div>
</div>
DEMO: http://www.bootply.com/ecziRvg9Jg
If you do find a true color picker that lets you do 9 colors only, attach it to the button I commented in the code.