Open travislwatson opened 10 years ago
@traviswatsonws
Thanks for reporting this
Altough FA is declared as "designed for bootstrap", dave preferred to remove framework specific workarounds in FA 4.0.
You made the right choice. Otherwise, you should override some values but you should be careful because that will also affect input-lg
and input-sm
, which are not affected by this issue: http://codepen.io/anon/pen/nbuFH http://codepen.io/anon/pen/CvodD
A better approach would be change .form-control-feedback
in bootstrap to .form-control + .form-control-feedback
so it will take priority on .fa
class.
I don't know where to document this, maybe a new section
Waiting for the fix.
@nghuuphuoc The fix I mentioned (loading FontAwesome then Bootstrap, letting BS cascade over FA) worked well for me. The project shipped with this change, and I saw no issues related to it. I can't guarantee there aren't other side effects of that order, but I didn't see any.
@traviswatsonws Thanks for the simple "fix". Saved me from venturing down a dark path.
What is the best way to approach this one now? I'm using the latest fa and bootstrap.
@QuantumInformation
fastest approach: https://github.com/FortAwesome/Font-Awesome/issues/4313#issuecomment-75190960
@tagliala thanks thats great
My favorite workaround without BS or FA override nor changing the link
order is simply do this :
<div class="form-group has-feedback">
<label class="control-label">Font Awesome</label>
<input type="text" class="form-control">
<span class="form-control-feedback">
<i class="fa fa-search"></i>
</span>
</div>
@Azaret thanks for sharing this!
Thanks @Azaret! Great fix until the official one.
Just started this wiki, feel free to improve it: https://github.com/FortAwesome/Font-Awesome/wiki/Bootstrap-Caveats
@Azaret Thank you very much!
@Azaret Thank you!
@Azaret Thx!
Currently with Font Awesome and Bootstrap 4, I have the following problem using the posted solution:
@Milanvdm, Bootstrap 4 uses background images for validation feedback. For example, https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss#L541 .
https://jsfiddle.net/kezkankrayon/g9sx0ahr/
<div class="form-group has-feedback">
<label class="control-label">Font Awesome</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"> <i class="fa fa-lock"></i></span>
<input type="text" class="form-control" placeholder="Password" aria-describedby="basic-addon1">
</div>
<span class="form-control-feedback">
<i class="fa fa-eye"></i>
</span>
</div>
https://jsfiddle.net/kezkankrayon/mo5mhLtn/
<div class="form-group has-feedback-custom">
<label class="form-control-label" for="inputSuccess1">Bootstrap 4 input with custom feedback</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"> <i class="fa fa-lock"></i></span>
<input type="text" class="form-control" placeholder="Password" aria-describedby="basic-addon1">
</div>
<span class="form-control-feedback-custom">
<i class="fa fa-eye"></i>
</span>
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
// SCSS derrived from Bootstrap 3 Form Control Feedback.
/* TODO: import Bootstrap4 variables */
$input-height-base: 38px; //TODO: use imported Bootstrap 4 variables.
$line-height-computed:20px; //TODO: use imported Bootstrap 4 variables.
.has-feedback-custom {
// Enable absolute positioning
position: relative;
// Ensure icons don't overlap text
.form-control {
padding-right: ($input-height-base * 1.25);
}
}
// Feedback icon (requires .glyphicon classes) //Note: Did not look in to the effect of .glyphicon.
.form-control-feedback-custom {
position: absolute;
top: 0;
right: 0;
z-index: 2; // Ensure icon is above input groups
display: block;
width: $input-height-base;
height: $input-height-base;
line-height: $input-height-base;
text-align: center;
pointer-events: none;
}
// Reposition feedback icon if input has visible label above
.has-feedback-custom label {
& ~ .form-control-feedback-custom {
//top: ($line-height-computed + 5); // Height of the `label` and its margin
top: 32px; //TODO: compute with bootstrap 4 variables.
}
&.sr-only ~ .form-control-feedback-custom {
top: 0;
}
}
Thanks a lot, that makes a lot of sense.
Could you explain a bit more in detail what you mean with the bootstrap 4 variables? As I would like to adapt it to a fully working sccs file for Bootstrap 4.
@kezkankrayon
So I currently calculated the variables as follows based on the bootstrap 3 LESS (http://getbootstrap.com/customize/):
@import "../../../../node_modules/bootstrap/scss/variables";
$line-height-computed: floor(($font-size-base * $line-height-base));
$padding-base-vertical: 1rem;
$input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2);
But this puts the eye quite a lot under the form.
Im curious on how those variables could be calculated correctly using bootstrap 4 and scss? As using your values for the variables results in a good solution, it is not fully responsive of course.
Edit: Use the fix from @Azaret below, it works great!
When attempting to use Font-Awesome icons within a Bootstrap input with feedback, the placement is off:
Font-Awesome is overwriting a couple of rules that fix this alignment:
The workaround I'm currently using is to place the Font-Awesome
<link>
above Bootstrap to give thefa
rules a lower precedence. Here's a snippet to reproduce (or in a codepen if you prefer):