I use Bulma and I would like to be able to see the pointer cursor on the right icon in the input field.
.main {
max-width: 400px;
margin: auto;
padding-top: 10px;
}
.is-clickable {
cursor: pointer;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.0/css/bulma.min.css" rel="stylesheet"/>
<div class="main">
<div class="field">
<p class="control has-icons-left has-icons-right">
<input class="input" type="email" placeholder="Email">
<span class="icon is-small is-left">
<i class="fas fa-envelope"></i>
</span>
<span class="icon is-small is-right is-clickable">
<i class="fas fa-check"></i>
</span>
</p>
</div>
</div>
What should I do to see the cursor?
Thanks
It ignores the cursor movement, because pointer-events: none has been added by Bulma. As you can see:
It needs to be pointer-events: auto; to see the cursor movement. You can find more information about pointer-events from MDN. Also, icon is not behind the input.
.main {
max-width: 400px;
margin: auto;
padding-top: 10px;
}
.is-clickable {
cursor: pointer;
pointer-events: auto !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.0/css/bulma.min.css" rel="stylesheet"/>
<div class="main">
<div class="field">
<p class="control has-icons-left has-icons-right">
<input class="input" type="email" placeholder="Email">
<span class="icon is-small is-left">
<i class="fas fa-envelope"></i>
</span>
<span class="icon is-small is-right is-clickable">
<i class="fas fa-check"></i>
</span>
</p>
</div>
</div>
Related
I have a form with various input controls set up like this:
<div class="form-group mb-3">
<div class="input-group">
<input asp-for="Email" class="form-control" />
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-envelope"></span>
</div>
</div>
</div>
<small>
<span asp-validation-for="Email" class="text-danger"></span>
</small>
</div>
And I have a SCSS file that changes the border width on active and focus:
.form-control:focus,
.form-control:focus:active {
border-width: $input-focus-width !important;
}
Currently I'm getting this result:
How can I set the border with of the input-group-text element when the input control is active?
You can handle the element immediately placed after .form-control with the following selector:
.form-control:focus + .input-group-append .input-group-text
In your case:
.form-control:focus,
.form-control:focus:active,
.form-control:focus + .input-group-append .input-group-text {
border-width: 2px !important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="form-group mb-3">
<div class="input-group">
<input asp-for="Email" class="form-control" />
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-envelope">icon</span>
</div>
</div>
</div>
<small>
<span asp-validation-for="Email" class="text-danger"></span>
</small>
</div>
You can use the adjacent sibling combinator to select the .input-group-append div then the descendant selector to grab the div with the .input-group-text class as below. Bootstrap styles the border with a slightly darker gray so I've put an outline property on there too so you can definitley see it working.
.form-control:focus,
.form-control:focus:active {
border-width: 3px !important;
}
.form-control:is(:focus, :focus:active)+.input-group-append .input-group-text {
border-width: 3px !important;
outline: 3px solid blue;
/* added this because the border is styled a light gray colour and not so easy to see*/
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="form-group mb-3">
<div class="input-group">
<input asp-for="Email" class="form-control" />
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-envelope"></span>
</div>
</div>
</div>
<small>
<span asp-validation-for="Email" class="text-danger"></span>
</small>
</div>
I'm trying to build a responsive upper-headeras you see in this screenshot.
The problem as you see the message icon stay hanged while its text goes
down whenever the width between 757 and 575.
I'm still new in css in general and bootstrap 4.
Thank you in Advance!
.upper-bar {
font-family: Times;
background-color: #007872;
color: #fff;
}
.upper-bar a {
color: #fff;
}
.upper-bar-left,
.upper-bar-right {
margin: 15px 0;
text-align: center;
padding-left: 0;
}
#media (max-width: 575.98px) {
.upper-bar-left:first-child,
.upper-bar-right:first-child {
margin-bottom: 0;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<div class="upper-bar">
<div class="container">
<div class="row">
<div class="col-sm upper-bar-left text-sm-left">
<i class="fa fa-phone"></i> 00000009890
<i class="far fa-envelope"></i> lorem_ipsuml#xxxxx.xx
</div>
<div class="col-sm upper-bar-right text-sm-right">
<i class="fas fa-map-marker"></i> LOrem Ipsum 0, 00098 Loremipsum
</div>
</div>
</div>
</div>
Codepen: https://codepen.io/anon/pen/bxREoK?editors=1100
Keep the envelope icon and email anchor in a span with text-nowrap class on it
<span class="text-nowrap">
<i class="far fa-envelope"></i>
lorem_ipsuml#xxxxx.xx
</span>
See this for information on text-nowrap
.upper-bar {
font-family: Times;
background-color: #007872;
color: #fff;
}
.upper-bar a {
color: #fff;
}
.upper-bar-left,
.upper-bar-right {
margin: 15px 0;
text-align: center;
padding-left: 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://use.fontawesome.com/2972279885.js"></script>
<div class="upper-bar">
<div class="container">
<div class="row">
<div class="col-sm upper-bar-left text-sm-left">
<i class="fa fa-phone"></i> 0542 1421455
<span class="text-nowrap">
<i class="fa fa-envelope"></i>
lorem_ipsuml#xxxxx.xx
</span>
</div>
<div class="col-sm upper-bar-right text-sm-right">
<i class="fas fa-map-marker"></i> LOrem Ipsum 0, 00098 Loremipsum
</div>
</div>
</div>
</div>
I suggest you can do like this:
html
<div class="icon-text">
<i class="fab fa-facebook-f">
<p> Your text</p>
</div>
css
.icon-text {
display: inline-block;
margin-right: 20px;
}
Please try this way.
CSS Code:
.left-style{
float:left;
}
HTML Code:
<div class="col-sm upper-bar-left text-sm-left">
<span class="left-style"><i class="fa fa-phone"></i> 00000009890</span>
<span class="left-style"><i class="far fa-envelope"></i>
lorem_ipsuml#xxxxx.xx</span>
</div>
How to put a awesome icon font inside the bootstrap input type text aligned at left and with some margin-right relative to the placeholder text using bootstrap? Im doing like this: https://jsfiddle.net/tbeay2vd/1/ and using the bootstrap class "input-group-addon" it works but I would like to have a input text like:
Do you know how to do that using bootstrap?
Html:
<div class="container">
<div class="row justify-content-center">
<div class="col col-md-7">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-search"></i></div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Search...">
</div>
<!-- How to do this input text below using bootstrap ? -->
<div class="example">
<i class="fa fa-search"></i> Search..
</div>
</div>
</div>
</div>
Try this:
$('input').on('focus', function () {
$(this).parent().addClass('active');
});
.example {
margin-top:30px;
border:1px solid gray;
border-radius:4px;
padding:15px;
}
.example >i {
margin-right:10px;
}
.search-input {
border: none;
width: 90%;
}
.search-input:focus{
outline: none;
}
.example.active {
border-color: #80bdff;
}
.search-box .input-group-addon {
background: none;
}
.search-box input {
border-left: none;
}
.search-box.active .input-group-addon {
border-color: #80bdff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row justify-content-center">
<div class="col col-md-7">
<div class="input-group search-box">
<div class="input-group-addon"><i class="fa fa-search"></i></div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Search...">
</div>
<!-- Hpw to do this layout using bootstrap ? -->
<div class="example">
<i class="fa fa-search"></i>
<input type="text" class="search-input" id="inlineFormInputGroup" placeholder="Search...">
</div>
</div>
</div>
</div>
.input-group >.fa{
position: absolute;
z-index: 10;
top: 37%;
left: 20px;
}
.input-group .form-control{
padding-left: 40px;
height: 60px;
border: black solid 1px;
position: relative;
border-radius: 5px!important;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row justify-content-center">
<div class="col col-md-7">
<div class="input-group">
<i class="fa fa-search"></i>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Search...">
</div>
</div>
</div>
</div>
I have the following html on a window, when the window becomes too small it splits the input and icon on a new line. I would like them to always be together. Any ideas ?
<div>
<input type="text" class="email-address"
value="long-long-long-user#test-test-test.com">
<i class="fa fa-clipboard fa-2x" aria-hidden="true"></i>
</div>
This is a the css
.email-address {
width: 300px;
}
Is there any way to ensure that they don't split up?
The div is simple place inside the body, and as you make the window smaller in width, (less than 300px) then the icon jumps to the line underneath.
By simply use width/max-width you can do like this
Fiddle demo
.email-address {
width: calc(100% - 40px); /* 40px, the icon width + padding */
max-width: 300px;
}
.email-address + i {
padding-left: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
<input type="text" class="email-address" value="long-long-long-user#test-test-test.com">
<i class="fa fa-clipboard fa-1x" aria-hidden="true"></i>
</div>
Another option would be display: flex.
Fiddle demo
Stack snippet
div {
display: flex;
}
.email-address {
width: 300px;
min-width: 0;
}
.email-address + i {
padding-left: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
<input type="text" class="email-address" value="long-long-long-user#test-test-test.com">
<i class="fa fa-clipboard fa-2x" aria-hidden="true"></i>
</div>
Try adding a class to the parent container:
<div class='parent'>
<input type="text" class="email-address" value="long-value">
<i class="fa fa-clipboard fa-2x" aria-hidden="true"></i>
</div>
Then add the following CSS:
.parent{
whitespace: nowrap;
}
Wrap your elements into a <span class="input-icon">
<div>
<span class="input-icon">
<input type="text" class="email-address" value="bla">
<i class="fa fa-clipboard fa-2x" aria-hidden="true"></i>
</span>
</div>
And than this CSS:
.input-icon{
white-space: nowrap;
}
I'm making a bar with some fields, I want it to looks like this:
But yet it looks like this:
As you can see, there are some problems
The button is not on the same line
Elements are not vertically aligned (the text is a bit higher than the serch bar)
I'm using Twitter Bootstrap and some CSS, I provide you a Plunker if you want to test the code (don't forget to put Plunker view in full screen or it won't show correclty).
Can you help me fix these problems?
PS: Language is french, I can translate if necessary :)
HTML code
<hr/>
<div class="row">
<div class="col-md-3">
<span class="text-standard-bold">MON STATUT : </span>
<span class="statut">Administrateur</span>
</div>
<div class="input-group col-md-3 recherche">
<input type="search" class="form-control" placeholder="Rechercher un compte ..."/><br/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-nouveau">
<span class="glyphicon glyphicon-plus"></span>
<span class=""> AJOUTER UN UTILISATEUR</span>
</button>
</div>
</div>
<hr/>
CSS CODE
* {
border-radius: 0 !important;
}
.statut {
font-size: 16px;
}
.recherche .input-group-addon {
border-radius: 0;
color: #FFF;
background-color: #004392;
cursor: pointer;
}
.recherche .input-group-addon:hover {
color: #fdb813;
}
.recherche .form-control, .input-group-addon {
border-style: solid;
border-width: 1px;
border-color: #004392;
}
.text-standard {
font-size: 16px;
color: rgb(1, 70, 148);
}
.text-standard-bold {
font-size: 16px;
color: rgb(1, 70, 148);
font-weight: bold;
}
Having together the .input-group and .col-md-3 class with break the .col-md-3 class. I would suggest to have them seperately. This will ensure that it will work in all screen sizes, e.g. when col-sm-* and col-xs-* are activated.
Also, for the vertical align issue, you can use the .form-control-static which has the same padding with textboxes and buttons.
<hr />
<div class="row">
<div class="col-md-3">
<p class="form-control-static">
<span class="text-standard-bold">MON STATUT : </span>
<span class="statut">Administrateur</span>
</p>
</div>
<div class="col-md-3">
<div class="input-group recherche">
<input type="search" class="form-control" placeholder="Rechercher un compte ..."><br>
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
</div>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-nouveau">
<span class="glyphicon glyphicon-plus"></span>
<span class=""> AJOUTER UN UTILISATEUR</span>
</button>
</div>
</div>
<hr />
Here is a working demo: http://www.bootply.com/MyKe33IrUu
input-group class is float:none. if we change it it will work
<div class="row">
<div class="col-md-3">
<span class="text-standard-bold">MON STATUT : </span>
<span class="statut">Administrateur</span>
</div>
<div class="input-group col-md-3 recherche" style="float:left;">
<input type="search" class="form-control" ng-model="cc.search" placeholder="Rechercher un compte ..."/><br/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
</div>
<!-- Nouveau compte -->
<div class="col-md-3 pull-right">
<button type="button" class="btn btn-nouveau" ng-click="cc.modeCreation = !cc.modeCreation">
<span class="glyphicon glyphicon-plus"></span>
<span class=""> AJOUTER UN UTILISATEUR</span>
</button>
</div>
</div>
<hr/>
<style>
* {
border-radius: 0 !important;
}
.statut {
font-size: 16px;
}
.recherche .input-group-addon {
border-radius: 0;
color: #FFF;
background-color: #004392;
cursor: pointer;
}
.recherche .input-group-addon:hover {
color: #fdb813;
}
.recherche .form-control, .input-group-addon {
border-style: solid;
border-width: 1px;
border-color: #004392;
}
.text-standard {
font-size: 16px;
color: rgb(1, 70, 148);
}
.text-standard-bold {
font-size: 16px;
color: rgb(1, 70, 148);
font-weight: bold;
}
</style>