I was trying to put clickable times (x) from font Awesome inside the text field but I could not do it also there lack of documentation for all the classes...
here a link to what I have got
<input type="text" class="form-control" id="copy-text">
<span>
<i class="fa fa-times xicon" aria-hidden="true"></i>
</span>
<span class="input-group-btn">
<button id="copy-emoji" data-clear-btn="true" class="form-control btn-large btn-lg btn btn-success" type="button" onclick="copyall()">COPY</button>
</span>
</div>
https://jsfiddle.net/2Lm6fup1/
thanks
You can position the icon relative to .input-group.
.xicon.over {
position: relative;
top: 11px;
left: -24px;
width: 0;
z-index: 999;
cursor: pointer;
}
https://jsfiddle.net/2Lm6fup1/5/
Related
I'm working on a web page and have some problems with the design, this is the piece of code where I need some help:
<form id="form_articulo_ver" method="post" action="./articulo/articulo_ver.php" role="form" target="frame_articulo_ver">
<div class="input-group col-md-3">
<div class="input-group-btn">
<button class="btn btn-primary" type="button" onClick="busca_referencia()" data-toggle="tooltip" data-placement="top" title="Buscar Referencia"><span class="glyphicon glyphicon-search"></span> </button>
</div>
<input type="text" class="form-control" placeholder="Referencia"/>
<span class="input-group-btn">
<button class="btn btn-success" type="button" onClick="aceptar_referencia()" data-toggle="tooltip" data-placement="top" title="Confirmar Referencia"><span class="glyphicon glyphicon-ok"></span> </button>
</span>
</div>
</form>
<br>
<form id="form_lineas_ref" method="post" action="./articulo/frame_lineas.php" role="form" target="frame_lineas">
<div class="input-group custom-input-group">
<input type="hidden" class="form-control"/>
<span class="input-group-addon">Desc.</span>
<input type="text" class="form-control" placeholder="Descripción"/>
<span class="input-group-addon">Precio</span>
<input type="text" class="form-control" placeholder="Precio"/>
<span class="input-group-addon">Uds.</span>
<input type="text" class="form-control" placeholder="Unidades"/>
<span class="input-group-addon">Dcto. %</span>
<input type="text" class="form-control" placeholder="Descuento"/>
<span class="input-group-addon">Importe</span>
<input type="text" class="form-control" placeholder="Importe"/>
<span class="input-group-addon">€</span>
<div class="input-group-btn">
<button class="btn btn-success" type="button" onClick="aceptar_linea()" data-toggle="tooltip" data-placement="top" title="Añadir linea"><span class="glyphicon glyphicon-ok"></span> </button>
</div>
</div>
</form>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" id="frame_lineas" name="frame_lineas" frameborder="0"></iframe>
</div>
This code looks like this:
But I need "Descripción" input to be larger than the others. I found a css that breaks the input when the screen is smaller, works fine... I don't care if "Descripción" input is same size in lite screen but in large ones need to have more witdh.
Here is the css of the "custom-input-group":
#media (max-width:500px) {
.custom-input-group.input-group .input-group-btn {
width:99%;
display:block;
margin-bottom:5px;
}
.custom-input-group.input-group .input-group-btn .btn {
width: 34%;
}
.custom-input-group.input-group .input-group-btn .btn:last-child {
border-radius:0 4px 4px 0
}
.custom-input-group {
display: block
}
.custom-input-group.input-group .input-group-addon {
clear: both;
display: block;
width: 100%;
border: 1px solid #ccc;
border-radius: 4px;
}
.custom-input-group.input-group .input-group-addon + .form-control {
border-radius: 4px;
margin-bottom: 5px;
}
}
Thank you very much. Sorry for my English.
Hello Just use Size=50 in your input tag .Hope it will help you
<span class="input-group-addon ">Desc.</span>
<input type="text" class="form-control " size="50"
placeholder="Descripción"/>
I suggest you use expanding on click input box for the description.
<div class="container-fluid">
<!--expanding input field -->
<h2 class="timeline-title">Expanding Input (CSS only)</h2>
<p><small class="text-muted">Grows wider when clicked...</small></p>
<input class="form-control input-lg" id="myInput" placeholder="Click here" type="text">
</div>
CSS here.
body {
background-color:#e9e9f4;}
/* expanding input CSS only */ #myInput{ width:130px; -webkit-transition:width 0.3s ease-in-out; } #myInput:focus { width:100%; -webkit-transition:width 0.5s ease-in-out;}
hope this helps
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>
In Chrome/Safari my icon within a bootstrap button looks fine:
But in Firefox, the icon drops down a line:
I have the fontawesome icon floated right within the <button>.
<!--html-->
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-small">Cached logs<i class="fa fa-money"></i></button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-small">Logs on mount<i class="fa fa-database"></i></button>
</div>
</div>
<!--style-->
i.fa {
float: right;
top: 2px;
position: relative;
font-size: 12pt;
}
.glyphicon, i.fa {
color: rgb(90, 90, 90);
top: 1px;
}
How can I make the Firefox version one-line like the Chrome?
JSBIN
Move the icon to the left of the text. I'm not sure of the underlying cause of it not being consistent how you've got it - but this does make both browsers render it consistently.
<button type="button" class="btn btn-default btn-small"><i class="fa fa-database"></i>Logs on mount</button>
Instead of
<button type="button" class="btn btn-default btn-small">Logs on mount<i class="fa fa-database"></i></button>
I've used a normal bootstrap 3 button group in a size one column, e.g.
<div class="col-sm-1">
<div class="btn-group">
<button class="btn btn-default"><span class="glyphicon glyphicon-home"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-circle-arrow-left"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-volume-down"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-volume-up"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-off"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-zoom-out"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-zoom-in"></span></button>
</div>
</div>
This is vertical when there is space, but when it drops to a new row it becomes horizontal. My only problem is that when vertical it looks a bit odd. I've tried playing with the CSS to no avail, does anyone have advice? I don't mind making it fully square so horizontal/vertical are similar, but my efforts to do this have not worked
If fully square buttons are ok to you, something like this should work:
CSS:
#group button:first-child, #group button:last-child {
border-radius: 0;
}
#group button:first-child {
margin-left: -1px;
}
HTML:
<div class="col-sm-1">
<div id="group" class="btn-group">
<button class="btn btn-default"><span class="glyphicon glyphicon-home"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-circle-arrow-left"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-volume-down"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-volume-up"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-off"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-zoom-out"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-zoom-in"></span></button>
</div>
</div>
I had created something like this before.
DEMO: http://jsbin.com/vahaq/1/
Assumes vertical on 768px and up, which is what it is, so I've just modified the styles below that min-width.
HTML (same as yours but with btn-group-vertical and btn-group-custom)
<div class="col-sm-1">
<div class="btn-group-vertical btn-group-custom">
<button class="btn btn-default"><span class="glyphicon glyphicon-home"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-circle-arrow-left"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-volume-down"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-volume-up"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-off"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-zoom-out"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-zoom-in"></span></button>
</div>
</div>
This is more elaborate as it kicks in and kicks off for really good responsiveness:
#media (max-width:299px) {
.btn-group-vertical.btn-group-custom > .btn {
float: left;
width: auto;
width: 25%;
min-height: 50px;
min-width: 50px;
margin-top: -1px!important;
}
.btn-group-vertical.btn-group-custom .btn + .btn {
margin-left: -1px;
margin-top: 0;
}
.btn-group-vertical.btn-group-custom > .btn:first-child {
margin-top: 0;
margin-left: -1px;
border-radius: 0;
}
.btn-group-vertical.btn-group-custom > .btn:last-child {
border-radius: 0
}
}
#media (min-width:300px) and (max-width:767px) {
.btn-group-vertical.btn-group-custom > .btn {
float: left;
width: auto;
border-top: 1px solid #ccc;
}
.btn-group-vertical.btn-group-custom .btn + .btn {
margin-left: -1px;
margin-top: 0;
}
.btn-group-vertical.btn-group-custom > .btn:first-child {
border-radius: 4px 0 0 4px
}
.btn-group-vertical.btn-group-custom > .btn:last-child {
border-radius: 0 4px 4px 0
}
}
I am now using Twitter Bootstrap 3 RC2 as well as Twitter Bootstrap which has moved into a separate repository. I have noticed, if used in a button with text the icon is not centered very well:
The icon and the text have the same bottom line, but I believe for a good looking button the icon should be centered based on the text, shouldn't it? Any idea how to achieve this?
http://bootply.com/74652
Move the text out of the <span> with the glyphicon and apply vertical-align: middle; to the <span>
<button class="btn btn-default">
<span class="glyphicon glyphicon-th" style="vertical-align: middle;"></span> Centered
</button>
Demo
This works in Bootstrap 4 with Font Awesome icons like so
<button class="btn btn-default" style="vertical-align: middle;">
<i class="fa fa-times"></i> Centered
</button>
Apply a vertical-align: -{N}px; style on the .glyphicon-th to shift it N pixels up/down.
For some vertical-align might not work due to positioning: If you look into .glyphicon class you'll see it is set to relative, try setting it to 'inherit' e.g:
.glyphicon.v-centered {
position: inherit;
vertical-align: middle;
}
This should also work for icons not in buttons, e.g. tabs.
Try vertical-align: middle; on .glyphicon-th:before
None of the methods above worked well for me by themselves, but using display: inline-block; vertical-align: middle on the elements did. It's the inline-block that seems to be key.
.vcenter * {
vertical-align: middle;
display: inline-block;
}
.btn i {
margin-left: 10px;
font-size: 20px;
}
with
<div class="vcenter">
<button class="btn btn-default btn-lg"><span>Centered</span><i class="glyphicon glyphicon-ok"></i></button>
<button class="btn btn-default"><span>Centered</span><i class="glyphicon glyphicon-ok"></i></button>
<button class="btn btn-default btn-sm"><span>Centered</span><i class="glyphicon glyphicon-ok"></i></button>
</div>
See http://www.bootply.com/UbY78zM8pD for live example.
I managed to do it like this:
.glyphicon.center:before {
vertical-align: middle;
}
and use <span class="glyphicon center glyphicon-th"></span>.
Problem: Glyph icon was 2 px too high above the button text. Fixed it as follows using examples here. Thank you (Alastair Maw).
I managed to get mine working as follows:
HTML
<div class="col-xs-12">
<a title="" class="btn btn-block btn-info oa-btn-spacer_homepage oa-ellipsis" role="button" href="default.aspx?action=page&name=creditcard">
<span class="glyphicon glyphicon-credit-card glyph_Credit"></span> Update Your Credit Card and Billing Information
</a>
</div>
CSS
#panelTopic .glyph_Credit {
vertical-align: middle;
display: inline-block;
padding-bottom:6px;
}
<button class="btn btn-default">
<span class="glyphicon glyphicon-th" style="font-size: 14px;"> </span>
<span style="font-size: 17px;">Not Centered</span>
</button>
please increase or decrease the font size according to your requirement
Other way
<button class="btn default" id="IdBack">
<i class="glyphicon glyphicon-hand-left"></i>
<b>Back</b>
</button>
Add a margin of the specific pixels or percentage. In my app, this worked beautifully, based on the dimensions of the area.
CSS:
.someWrapperClass button span {
margin-top: 120%;
}
HTML:
<div class="someWrapperClass">
<button type="button" ng-click="SomeMethod()">
<span class="glyphicon glyphicon-chevron-left"></span>
</button>
</div>