I want to change the color of the glyphicon when a user focus on input field. Any help is appreciated.
<div class="form-group inner-addon left-addon">
<i class="glyphicon glyphicon-user userglyphicon"></i>
<input class="form-control user" name="username placeholder="Username">
</div>
I have reversed the position of the input and glyphicon, so we can access the glyphicon as a sibling.
To put the glyphicon in front of the input field, I defined the form-group as a flexbox and used order to reposition the elements.
.form-group1,
.form-group2 {
display: flex;
align-items: center;
}
.form-group1 input,
.form-group2 input {
order: 2;
}
.form-group1 i,
.form-group2 i {
order: 1;
padding-right: 0.5em;
}
.form-group1 input:focus+i {
color: red;
}
.form-group2 input:focus+i {
color: blue;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="form-group1 inner-addon left-addon">
<input class="form-control user" name="username" placeholder="Username" />
<i class="fa fa-user-o" aria-hidden="true"></i>
</div>
<br>
<div class="form-group2 inner-addon left-addon">
<input class="form-control user" name="username" placeholder="Username" />
<i class="fa fa-user-o" aria-hidden="true"></i>
</div>
Related
how to create focus on two elements?
<div class="form-group">
<label class="control-label"></label>
<div class="col-sm-10">
<input type="text" class="form-control">
<span class="loop-icon form-control-feedback"></span>
</div>
</div>
no focus
I would like to get something like that
results
I don't want to use javascript
You can use sibling selector " + " that will select the next element.
.inp:focus + .icon{
color:red;/* can use any color*/
}
This code will select the sibling of input, i.e. the icon class, when the input is focused,
form-group{
position:relative;
}
.icon{
position: absolute;
right: 35px;
top: 11px;
}
.inp{
padding:right:40px;
}
.inp:focus + .icon{
color:red;/* can use any color*/
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<label class="control-label"></label>
<div class="col-sm-10">
<input type="text" class="form-control inp">
<span class="fa fa-search form-control-feedback icon"></span>
</div>
</div>
I've got this piece of code:
<h2>Workout Selector</h1>
<div class="form-group">
<label for="workout-name">Search by Keywords (Comma Separated):</label>
<input type="text" class="form-control" id="workout-keywords">
</div>
Which produces this:
But I want to add a button in the place of this red box:
(What do I need to do?)
Edit: It should not be the submit button
try this code and style color it as you want.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
</div>
ref : https://v4-alpha.getbootstrap.com/components/input-group/#button-addons
i guess you can work with cols, sth like:
<div class="form-group">
<div class="col-md-12">
<label for="workout-name">Search by Keywords (Comma Separated):</label>
</div>
<div class="col-md-8">
<input type="text" class="form-control" id="workout-keywords">
</div>
<div class="col-md 4">
<span class="btn btn-default">Button</span>
</div>
</div>
You can use position absolute to position the button above the input and then use padding right for the input to prevent the text to get hidden by the absolute positioned button. Try something like this:
<h1>Workout Selector</h1>
<div class="form-group">
<label for="workout-name">Search by Keywords (Comma Separated):</label>
<input type="text" class="form-control" id="workout-keywords">
<button type="submit">Submit</button>
</div>
.form-group {
position: relative;
padding: 0;
input {
padding-right: 60px;
height: 25px;
line-height: 25px;
width: 100%;
}
button {
position: absolute;
right: 0;
top: 0;
width: 60px;
line-height: 25px;
text-align: center;
z-index: 300;
}
}
I think you can achieve what you want to with display flex, input-group and a trick on input-group-addon class/element. Take a look.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline" style="width:300px;margin:10px;">
<div class="form-group">
<label class="sr-only" for="test">input here something</label>
<div class="input-group" style="display:flex;">
<input type="text" class="form-control" id="test" placeholder="input here something">
<button type="button" class="input-group-addon btn btn-primary" style="width:50px;">go</button>
</div>
</div>
</form>
Hope this helps.
When I attempt to apply a maximum width to an input field, it positions the secondary button as if the input field didn't have a maximum width.
JSFiddle Example
HTML:
<div class="container">
<div class="form-group">
<label class="control-label">Date</label>
<div class="input-group">
<input type="text" maxlength="10" class="form-control datefield" placeholder="mm/dd/yyyy">
<span class="input-group-btn">
<button id="btnClearDate" class="btn btn-secondary btn-default" type="button">Clear</button>
</span>
</div>
</div>
</div>
CSS:
.datefield {
max-width: 100px;
}
Result:
How can I get the secondary button to correctly sit next to the text field?
Try using display:inline-block;
https://jsfiddle.net/ex3ntia/DTcHh/22030/
.input-group-btn {display:inline-block;}
Bootstrap is laid out by using a grid system. You will need to adjust your design layout to accomplish what you are looking to achieve.
What is happening now is all you are doing is shrinking down the size of the input box, but not the actual grid cell.
try adjusting just the cell or placing the form-group elements within a cell then within a targeting element you can shrink.
Try this,
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
padding: 10px;
}
.shrink {
width: 200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="form-group">
<div class="shrink">
<label class="control-label">Date</label>
<div class="input-group">
<input type="text" maxlength="10" class="form-control datefield" placeholder="mm/dd/yyyy">
<span class="input-group-btn">
<button id="btnClearDate" class="btn btn-secondary btn-default" type="button">Clear</button>
</span>
</div><!-- .input-group -->
</div><!-- .shrink -->
</div><!-- .form-group -->
</div><!-- .row -->
</div> <!-- .container -->
Hope that helps!
The span was not being displayed inline. I assume this was changed with the input-group-btn class. Here is the new code (I named the new class ):
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.datefield {
max-width: 100px;
}
.buttoncleardiv {
display: inline;
}
<div class="container">
<div class="form-group">
<label class="control-label">Date</label>
<div class="input-group">
<input type="text" maxlength="10" class="form-control datefield" placeholder="mm/dd/yyyy">
<span class="input-group-btn buttoncleardiv">
<button id="btnClearDate" class="btn btn-secondary btn-default" type="button">Clear</button>
</span>
</div>
</div>
The JS Fiddle is here
I am trying to get 'fa fa-search' to work inside an input box, but it doesn't work. I have seen other questions on the same one, but they did not work for me. Can someone point out the problem.
<div>
<input
type="text"
placeholder="Enter Search Text"
value={this.props.queryText}
ref="queryInput"
onChange={this.handleChange}
className="searchBar"
type="text"
/>
<i className="abc fa fa-search"></i>
</div>
Here is my CSS code
.searchBar{
width: 380px;
margin: 10px;
}
.abc{
position: relative;
z-index: 1;
left: -25px;
}
I am using ReactJS, Bootstrap along with this.
Make sure that you have attached necessary files to make font-awesome work.
.searchBar {
width: 380px;
margin: 10px;
}
.abc {
position: relative;
z-index: 1;
left: -30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div>
<input
type="text"
placeholder="Enter Search Text"
value={this.props.queryText}
ref="queryInput"
onChange={this.handleChange}
class="searchBar"
type="text"
/>
<i class="abc fa fa-search"></i>
</div>
It's class not className
<div>
<input
type="text"
placeholder="Enter Search Text"
value={this.props.queryText}
ref="queryInput"
onChange={this.handleChange}
class="searchBar"
type="text"
/>
<i class="abc fa fa-search"></i>
</div>
I am having trouble adding a validation indicator to my input fields in my creditcards form.
For some reason, having the span adds height to the span.input-group-addon, resulting in empty space below the input
<template name="checkoutForm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
<form class="bs-example bs-example-form">
<div class="no-margin">
<div class="col-xs-12">
<div class="input-group">
<span class="input-group-addon input-group-sm"><i class="fa fa-credit-card"></i></span>
<input type="text" class="form-control" id="checkoutCardNumber" placeholder="Card Number">
<span class="validity"></span>
</div>
</div>
And LESS
#import '../../../../stylesheets/variables.import.less';
#import '../../../../stylesheets/mixins.import.less';
.checkout-form {
max-width: 350px;
margin: auto;
.no-margin {
.form-group {
width: 80%;
margin: 0px;
}
}
.validity {
overflow: auto;
position: relative;
top: -27px;
left: 215px;
z-index: 1000;
.valid {
color: #brand-primary;
}
.invalid {
color: red;
}
}
}
How can I correct this?
One way of getting rid of the extra whitespace is removing the line feeds or spaces between elements
You can change
<input type="text" class="form-control" id="checkoutCardNumber" placeholder="Card Number">
<span class="validity"></span>
to
<input type="text" class="form-control" id="checkoutCardNumber" placeholder="Card Number"><span class="validity"></span>
Another way is to set the parent element class' font-size attribute to zero.
So try adding
font-size:0;
white-space:nowrap;
to input-group class. Or change the markup as follows
<div class="input-group" style="font-size:0;white-space:nowrap;">
But then you have to specify the font-size attribute in validity class in order to display the text within.
Another way is to add
float:left;
to validity class. You'll probably have to add that to input's class too.
EDIT
It appears that the problem has nothing to do with the issues above.
Simply remove <span class="validity"></span> outside of <div class="input-group"> as follows and see if that works
<div class="input-group">
<span class="input-group-addon input-group-sm"><i class="fa fa-credit-card"></i></span>
<input type="text" class="form-control" id="checkoutCardNumber" placeholder="Card Number">
</div>
<span class="validity"></span>
EDIT 2
Change validity class as follows
.validity {
overflow: auto;
position: absolute;
top: 5px;
left: 215px;
z-index: 1000;
}
and use the markup below (your original)
<div class="input-group">
<span class="input-group-addon input-group-sm"><i class="fa fa-credit-card"></i></span>
<input type="text" class="form-control" id="checkoutCardNumber" placeholder="Card Number">
<span class="validity"></span>
</div>