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>
Related
I have tried everything but I can't place checkbox right to the label. I could move the checkbox to the right of label, if it is general type of checkbox. But I could not do the same with custom-checkbox type.
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
<label class="custom-control-label" for="customCheck">Label</label>
</div>
The custom checkbox is created with pseudo elements so their positioning needs to be adjusted relative to the label.
.custom-control.custom-checkbox{padding-left: 0;}
label.custom-control-label {
position: relative;
padding-right: 1.5rem;
}
label.custom-control-label::before, label.custom-control-label::after{
right: 0;
left: auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
<label class="custom-control-label" for="customCheck">Label</label>
</div>
The earlier #serg-chernata answer doesn't seem to work for me with custom-switch. Here's an example i got working.
CSS
div.custom-control-right {
padding-right: 24px;
padding-left: 0;
margin-left: 0;
margin-right: 0;
}
div.custom-control-right .custom-control-label::after{
right: -1.5rem;
left: auto;
}
div.custom-control-right .custom-control-label::before {
right: -2.35rem;
left: auto;
}
HTML
<div class="custom-control custom-control-right custom-switch">
<input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
<label class="custom-control-label" for="customSwitch2">Right switch element</label>
</div>
JsFiddle
https://jsfiddle.net/2cmbq9r0/
Screenshot
Edit: changed left:initial to left:auto to make it work with IE11.
If you are okay with...
Greater distance between the label and checkbox
Using the basic form-check class instead of custom-control
then one alternative is using a col-right class to move the checkbox to the far side of your form. In some cases, I have found that aligning labels and input elements on the far-left and far-right, respectively, provides a nice consistent look
<div class="row form-row">
<div class="col">
<label class="form-check-label" for="customCheck">Label</label>
</div>
<div class="col-right">
<input type="checkbox" class="form-check-input" id="customCheck" name="example1">
</div>
</div>
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 have some form with glyphicon question mark for field inline tooltip on right:
<div class="form-group required">
<label for="username" class="col-sm-2 control-label">User Name:</label>
<div class="col-sm-3 tooltip-box">
<input id="username" type="text" class="form-control" placeholder="username"/>
<div class="row tooltip-block"><a href="#" data-toggle="popover" data-trigger="hover" data-placement="auto right" data-content="Test tooltip.">
<span class="glyphicon glyphicon-question-sign"></span></a>
</div>
</div>
</div>
In full screen it looks as I need:
But on mobile devices or small screens it works only with hovering some very small area within my glyphicon mark and the tooltip overlays it:
Also when I inspect the corresponding a element in Chrome's developer tools, it points to some area outside the span element:
Here is the fiddle: https://jsfiddle.net/r2cm9c9u/
How is it possible to make the whole span with glyphicon as a hyperlink for tooltip?
I would move the positioning to the actual link and make the link and glyphicon a block element:
I have added a class to the link below
<div class="form-group required">
<label for="username" class="col-sm-2 control-label">User Name:</label>
<div class="col-sm-3 tooltip-box">
<input id="username" type="text" class="form-control" placeholder="username" />
<div class="row tooltip-block">
<a href="#" data-toggle="popover" data-trigger="hover" data-placement="auto right" data-content="Test tooltip." class="glyphicon-holder">
<span class="glyphicon glyphicon-question-sign"></span></a>
</div>
</div>
</div>
And changed your classes:
.tooltip-box .glyphicon-holder {
position: absolute;
top: 8px;
right: 22px;
font-size: 1.25em;
display: block;
}
.tooltip-box .glyphicon-holder:hover {
text-decoration: none;
}
.glyphicon.glyphicon-question-sign {
color: gray;
display: block;
}
Updated fiddle
You can do it with pure css.
If you have:
<div class="col-sm-3 tooltip-box">
<input id="username" type="text" class="form-control" placeholder="username"/>
<div class="row tooltip-block"><a href="#" data-toggle="popover" data-trigger="hover" data-placement="auto right" data-content="Test tooltip.">
<span class="glyphicon glyphicon-question-sign"></span></a>
</div>
</div>
You don't need 'a' first of all. What you can do with CSS is:
.tooltip-block span {
display: none;
}
.tooltip-block:hover + span {
display: block;
}
Whats gonna happen is, when you hover over .tooltip-block following span element will display block. Definitely don't need javascript for a thing like this.
Then if you want that tooltip to be clickable you can use javascript for that.
<div class="col-sm-3 tooltip-box">
<input id="username" type="text" class="form-control" placeholder="username"/>
<div class="row tooltip-block" onclick="doSomething()"><a href="#" data-toggle="popover" data-trigger="hover" data-placement="auto right" data-content="Test tooltip.">
<span class="glyphicon glyphicon-question-sign"></span></a>
</div>
</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>