I'm using a template based on Bootstrap 3 and there is a weird display issue with Firefox for file input elements: basically the click area covers a huge part of the page, which means that anything around them cannot be clicked without triggering a file upload.
Here is what I mean by large area (with Firebug, based on the <input type="file"> element):
While with Chrome it's fine:
And with IE it's also fine.
Here is the link to the theme page where you see the issue (only happening to the first type of "advanced file input", where the input element itself is displayed): http://www.keenthemes.com/preview/metronic_admin/components_form_tools.html
And here is the code for the file display:
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="input-group input-large">
<div class="form-control uneditable-input span3" data-trigger="fileinput">
<i class="fa fa-file fileinput-exists"></i>
<span class="fileinput-filename"></span>
</div>
<span class="input-group-addon btn default btn-file">
<span class="fileinput-new">Select file</span>
<span class="fileinput-exists">Change</span>
<input type="file" name="documents-0">
</span>
Remove
</div>
</div>
Any idea how I can force the input element click zone to stay within its limits on Firefox?
Thanks in advance!
Related
Trying to make css for input type file but not working.In my code choose file button is coming above of button css So how to remove using css?
I want to show only blue color button with file upload process
Demo: https://stackblitz.com/edit/angular6-bootstrap4-navbar-8hr7um?file=src/app/app.component.html
<input #file type="file" id="fileInput" accept='image/*' (change)="preview(file.files)" class="btn btn-primary btn-block mx-auto" value="UPLOAD IMAGE" />
use below html(assuming you are using bootstrap)
<label class="btn btn-primary">
Browse <input type="file" style="display: none;">
</label>
I think you are using Bootstrap's documentation for buttons, but what would work best for you is Bootstrap's documentation for input groups. Check out the second to last category on this page: https://getbootstrap.com/docs/4.5/components/input-group/. It's titled 'Custom file input.' I think if you put your style into these it would work.
Thank you for reading my message, here is my problem :
I'm using a navbar made with Bulma in which I display either login/register buttons or a profile picture icon from FontAwesome using {{#if currentUser}} as shown below ("S'inscrire" and "Se connecter" means register and login in French) :
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
{{#if currentUser}}
<!-- Displayed only when the user is logged in-->
<i class="fas fa-user icon is-large" id="userProfile"></i>
{{else}}
<!-- Displayed when the user is NOT logged in-->
<a class="button is-primary register">
<strong>S'inscrire</strong>
</a>
<a class="button is-light login">Se connecter</a>
{{/if}}
</div>
</div>
</div>
When the user is not logged in it only show the buttons :
And when he logs in I have only the icon :
My problem is that when user logs out, I got both user icon and buttons :
and if I log in and out multiple times I get multiple icons.
Looks like it's a problem with FontAwesome icon, I've tried with a normal image instead of the icon and it behaved normally, but I need to use icons inside this type of statement in some place of my app.
Thanks in advance !
This is because font awesome 5 replaces the <i> tag with an svg which will break your code reactivity if it's not wrapped inside another flow element. Try wrapping the <i> with a <span> in order to keep the reactivity going:
<span>
<i class="fas fa-user icon is-large" id="userProfile"></i>
</span>
You could also make this a short stateless template:
<template name="icon">
<span>
<i class="fas fa-{{name}} {{#if large}}is-large{{/if}}" id="{{id}}"></i>
</span>
</template>
and call it like
{{>icon name="user" large=true id="userProfile"}}
I have an input that displays too high in Chrome while in Firefox it looks normal:
Chrome
Firefox
Here is my code:
<div class="input-group">
<input class="form-control" type="date" placeholder="Date de déprat"/>
<span class="input-group-btn">
<button class="btn btn-warning" type="button"><i class="fa fa-search"></i></button>
</span>
</div>
When I change the input type to text it works perfectly. So how do I fix this without hard coding the input height?
NB: I use the code in this page for normalization
Inspect the input field in Chrome like this:
https://i.stack.imgur.com/Hz2LZ.jpg (this is just an example, you should inspect your own html page)
Then see on the right within the Style Tab what CSS properties cause the height's problem such as: margin, height, line-height, padding...
You can add in yor CSS rules like height, padding or wherever to a specific type of input in this case
input[type="date"]{
...
}
I'm using Angular UI Bootstrap datepicker popup on a modal dialog. The width of the outside border is not calculated properly based on the inside contents. In some cases, the outside box is bigger than inside contents. In other cases, the outside is smaller. Also, it seems the width of the outside of the datepicker has impact on the width of the popup. For example, "col-sm-4" will make the border smaller, while "col-sm-5" will make the border larger.
Can anyone please point me to the right direction to check where the problem might be?
Thanks in advance!
Look this: http://plnkr.co/edit/JTkIvBwl9agQCYxLaN6X?p=preview
Just change to: is-open="opened" to: is-open="$parent.opened"
So relevant snippets of HTML will look like:
<div class="input-group">
<input type="text" class="form-control"
datepicker-popup="dd.mm.yyyy"
ng-model="dt"
is-open="$parent.opened"
ng-required="true"
close-text="Close" />
<span class="input-group-btn">
<button style="height:34px;" class="btn btn-default" ng-click="open()">
<i class="icon-calendar"></i>
</button> <b><- button not working</b>
</span>
</div>
Just figured that out. It was a mistake. I have changed the "dropdown-menu" css class buried somewhere, which affects the datepicker layout.
I am trying to get an input-group styled properly in Bootstrap 3 with a drop-down selector, using this sample code:
<div class="form-group">
<div class="input-group">
<span class="input-group-btn">
<select class="btn">
<option>USD</option>
<option>GBP</option>
<option>ZAR</option>
</select>
</span>
<input type="text" class="form-control">
<span class="input-group-btn">
<div class="btn btn-default" type="button">Button</div>
</span>
</div>
</div>
It works fine in Bootply (http://www.bootply.com/ZVSunDnXif):
but if I put it into my site (ASP.Net Web Forms) using exactly the same code, it breaks:
I wouldn't mind so much (in vanilla bootstrap it's only lacking the border around the select box), except that I'm using a Bootswatch themed version, which doesn't even align properly:
The css path to the input group is body > form > div #MainBody > div.row > div.col-md-9 > div.form-group.
If I remove the select element, it displays fine, so is there something wrong with how I've defined that?
try adding row class to the form-group div parent of the select element. My select element was breaking the form div and going into another row. Adding the row class kept it inside visually although it is still going outside the html form tag. I am going to post about that separately.