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>
Related
Here is the problem, I have a single-page application where I lay out a form:
Due to my novice CSS skill, I have not been able to left align the help text (in blue). Here is my HTML code:
label {
width: 15%;
display: inline-block;
text-align: right;
padding-right: 10px;
}
span.short_help {
font-size: 70%;
color: cornflowerblue;
padding-left: 10px;
}
<form>
<div>
<label for="Authentication">Authentication:</label>
<input type="text" name="Authentication" id="-Authentication" />
<span class="short_help">Authentication type, I, II, or III</span>
</div>
<br/>
<div>
<label for="Branch">Branch:</label>
<input type="text" name="Branch" id="Branch" />
<span class="short_help">Which regional branch.</span>
</div>
<br/>
<div>
<label for="Persistent">Persistent:</label>
<input type="checkbox" name="Persistent" id="Persistent" />
<span class="short_help">Persistent connection</span>
</div>
<br/>
</form>
If I fixed up the input field to make the controls the same width so the help text align, then the check box will be centered:
Here is what I added to the CSS above:
input {
width: 15%;
}
How can I have both the controls and the blue text left aligned?
Instead of setting a width on all input fields, wrap a div arround it with a class. In my example .input
Now you can set the width of the field without affecting the input width.
* {
box-sizing: border-box;
}
form {
max-width: 600px;
}
label, .input, span {
display: inline-block;
vertical-align: middle;
margin-left: -4px;
}
label {
width: 20%;
}
.input {
width: 30%;
}
span {
color: cornflowerblue;
}
<form>
<div>
<label for="Authentication">Authentication:</label>
<div class="input">
<input type="text" name="Authentication" id="-Authentication" />
</div>
<span class="short_help">Authentication type, I, II, or III</span>
</div>
<br/>
<div>
<label for="Branch">Branch:</label>
<div class="input">
<input type="text" name="Branch" id="Branch" />
</div>
<span class="short_help">Which regional branch.</span>
</div>
<br/>
<div>
<label for="Persistent">Persistent:</label>
<div class="input">
<input type="checkbox" name="Persistent" id="Persistent" />
</div>
<span class="short_help">Persistent connection</span>
</div>
<br/>
</form>
Add an element to wrap around the inputs and make them the desired size:
<div>
<label for="Authentication">Authentication:</label>
<span class="spacer">
<input type="text" name="Authentication" id="-Authentication" />
</span>
<span class="short_help">Authentication type, I, II, or III</span>
</div>
<br/>
<div>
<label for="Branch">Branch:</label>
<span class="spacer">
<input type="text" name="Branch" id="Branch" />
</span>
<span class="short_help">Which regional branch.</span>
</div>
<br/>
<div>
<label for="Persistent">Persistent:</label>
<span class="spacer">
<input type="checkbox" name="Persistent" id="Persistent" />
</span>
<span class="short_help">Persistent connection</span>
</div>
And add CSS to format it:
span.spacer {
display: inline-block;
width: 15%;
}
I didn't quite get it, do you only want to align the checkbox or the blue text
To align the checkbox to the left, change
input {
width: 15%;
}
to
input[type="text"] {
width: 15%;
}
the input driver you can align your text to the left so
input
{
text-align: left;
width: 15%;
}
but the tag span can not be proque is an online element for more doubt read this site that talks about the span tag:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span
You can also contain the span in a div and somehow achieve alignment
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>
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.
I want my web page to display a check box inside the password field. User clicks on the check box and see the password as text. On un-check, its password again.
This is what I want. This is from the Ebay website login page.
This is what I am getting
I want this checkbox inside the password field. I could not find anything online on this topic.
Here is my code :
<!-- Set a password for the account -->
<div class="col-md-12" style="margin: 7px;">
<input type="password" id="reg_password" name="reg_password" style="height: 35px;" class="form-control input-lg" placeholder="Password" ng-model="register_password" />
</div>
<input type="checkbox" id="eye" onclick="if(reg_password.type=='text')reg_password.type='password'; else reg_password.type='text';" />
Just add CSS and move your checkbox to one group div with input text.
See the example
#eye {
position:absolute;
right:50px;
top:6px;
}
Click Here
This would be the solution.
.text-container {
display: inline-block;
position: relative;
overflow: hidden;
}
.btn {
position: absolute;
top: 10px;
right: 10px;
}
<div class="col-md-12 text-container" style="margin: 7px;">
<input type="password" id="reg_password" name="reg_password" style="height: 35px;" class="form-control input-lg" placeholder="Password" ng-model="register_password" />
<span id="btn" class="btn"><input type="checkbox" id="eye" onclick="if(reg_password.type=='text')reg_password.type='password'; else reg_password.type='text';" /></span>
</div>
input#eye {
position: absolute;
right: 10px;
top: 10px;
}
#reg_password.form-control.input-lg {
position: relative;
}
.parent{position:absolute;}
<!-- Set a password for the account -->
<div class="col-md-12 parent" style="margin: 7px;">
<input type="password" id="reg_password" name="reg_password" style="height: 35px;" class="form-control input-lg" placeholder="Password" ng-model="register_password" /> <input type="checkbox" id="eye" onclick="if(reg_password.type=='text')reg_password.type='password'; else reg_password.type='text';" />
</div>
.text-container {
display: inline-block;
position: relative;
overflow: hidden;
}
.btn {
position: absolute;
top: 10px;
right: 10px;
transition: right 0.2s;
}
<div class="col-md-12 text-container" style="margin: 7px;">
<input type="password" id="reg_password" name="reg_password" style="height: 35px;" class="form-control input-lg" placeholder="Password" ng-model="register_password" />
<span id="btn" class="btn"><input type="checkbox" id="password" /></span>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#password").click(function () {
if ($("#reg_password").attr("type")=="password") {
$("#reg_password").attr("type", "text");
}
else{
$("#reg_password").attr("type", "password");
}
});
});
</script>
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>