Getting some odd behavior with a single input field on my login form that only happens in firefox...in chrome it's completely fine. The code is no different than any other input field in the forms on the page but this one is choosing to appear outside of the form div and will not allow you to type in it, also looks like it has a 0% length or atleast the smallest length possible. I'm using bootstrap for the field/form css.
An html snippet of the form (id: email_login is causing the issue):
<form action="process_login.php" name="login_form" method="post" id="login_form" class="form-horizontal" role="form">
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="email_login" type="text" class="form-control" name="email" placeholder="Email Address" />
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="password_login" type="password" class="form-control" name="password" placeholder="Password" />
</div>
<div style="margin-top:10px" class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<input onclick="formhash(this.form, this.form.password);" value="Login" id="btn-login" type="button" class="btn btn-primary" />
<i class="icon-hand-right"></i>
</div>
</div>
Heres an image of what's going on
Thanks in advance...will be happy to provide further info. I didn't include the css as it's just the standard bootstrap classes with no modifications.
EDIT:
I managed to fix this issue by modifying the .input-group class in bootstrap from display:table to display:inline-table.
This did not affect any other forms on my website, but managed to fix the display issue in firefox.
So consider it solved in my case.
Related
I have an input on my website which whenever i click in it displays the following
I have the following HTML for the input
<div id="searchFieldSectionDiv" class="form-group">
<div class="btn-group" style="width: 100%">
<label class="sr-only" for="searchField">Filter results</label>
<div class="input-group">
<!-- TODO: Need to filter products section as the user types -->
<input id="searchField" class="form-control" placeholder="Type to search..." autocomplete="off">
<span id="searchclear" class="glyphicon glyphicon-remove-circle"></span>
<div class="input-group-append">
<div class="input-group-text">
<i class="fas fa-search" style="margin-right: 0px"></i>
</div>
</div>
</div>
</div>
</div>
I have tried adding type="search but it still displays the address box.
Not to sure on how to hide it, all other browsers seem fine, just Chrome.
Ideally i want to add this at top level so i dont have to keep adding this to every input but again not too sure which level to add it too (body maybe?)
You have to change autocomplete="off" to autocomplete="disabled"
Chrome stopped supporting autocomplete="off" that's why it isn't working but it doesn't understand if you use autocomplete="disabled" that's why this works for now
I use a bootstrap Template. I use bootstrap modal for register in my website.
for textboxes, I use form-control class but it does not work.
Can anyone help me?
...<div class="modal-body" dir="rtl" style="font-family:BYekan; text-align:center">
<center>
<div class="form-group">
<asp:TextBox ID="txtemail_reg" runat="server" CssClass="form-control" placeholder=" Email Address" Width="300px"></asp:TextBox>
</div> ....
Make sure that you placed class="form-group". For example
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control" id="" placeholder="Amount">
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>
I checked the css of template. the input tag has some css,I remove those and my problem fixed.
I have the form below, in which I have a search glyphicon inside the input.
<form method="get">
<div class="input-group">
<input type="text" class="form-control" id="city" name="city"/>
<span class="input-group-addon btn"><span class="glyphicon glyphicon-search"></span></span>
</div>
</form>
I'd like to make my glyphicon submit my form, but for that I'd have to change the span for a input or button. In either way, the glyphicon goes outside the input and displays below it. I couldn't figure out why yet. I was able to put it in the correct position through absolute positioning, but it is not good for the way it is displayed in the website. Is there any way to solve this problem only with css and without absolute positioning?
The problem is bootstrap style buttons and inputs differently. You can use <span> and submit form with onclick event.
See this code:
<form id="myForm" method="get">
<div class="input-group">
<input type="text" class="form-control" id="city" name="city"/>
<span class="input-group-addon btn" onclick="document.getElementById('myForm').submit();" ><span class="glyphicon glyphicon-search"></span></span>
</div>
</form>
Working JSFiddle:
http://jsfiddle.net/q76dasdk/
I'd like to use a combo input checkbox that also shows required (angular) validation error when it's missing, but I cannot get the checkbox add-on and the help-block to play nice. Here's the markup:
<div class="form-group" ng-class="{'has-error': addressForm.street.$invalid && !addressForm.street.$pristine}">
<div class="col-md-10">
<div class="input-group">
<input type="text" placeholder="Street" name="street" class="form-control" ng-model="address.street" required>
<span class="help-block" ng-show="addressForm.street.$invalid && !addressForm.street.$pristine">Required</span>
<span class="input-group-addon">
<input type="checkbox" ng-model="address.listAddress"> List
</span>
</div>
</div>
</div>
It looks fine when there's no error:
But not fine when there is an error:
I've tried reordering, changing the error span to a div, inserting br, etc. Any help is much obliged. Would be even happier if it can be down without tons more markup (new to html/css and it's kind of amazing to me how so many chars are required to say something that seems simple).
You should move the required span outside of the input-group div.
<div class="col-md-10">
<span class="help-block" ng-show="addressForm.street.$invalid && !addressForm.street.$pristine">Required</span>
<div class="input-group">
<input type="text" placeholder="Street" name="street" class="form-control" ng-model="address.street" required>
<span class="input-group-addon">
<input type="checkbox" ng-model="address.listAddress"> List
</span>
</div>
</div>
When appending an input-group to a form-inline, the input-group appears below the form on a "new line" instead of inline with the other controls.
It seems that this is because the input-group wrapper class has display set to table whereas the other inputs, which work fine, have their display set to inline-block. Of course, it is not possible to give the input-group the inline-block display because its child add-on span, which has display: table-cell, needs the property of the parent to align correctly.
So my question is: is it possible to use input-group inside an inline form using Bootstrap classes exclusively? If not, what would be the best work-around allowing the use of custom classes.
Here is a demo illustrating my point. The code is the following:
<form action="" class="form-inline">
<input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/>
<input type="text" class="form-control" placeholder="Text Inputs" style="width: 120px;"/>
<div class="checkbox">
<label>
<input type="checkbox" /> and Checkboxes
</label>
</div>
<select class="form-control" style="width: 150px;">
<option>and Selects</option>
</select>
<button type="submit" class="btn btn-default">and Buttons</button>
<div class="input-group" style="width: 220px;">
<span class="input-group-addon">BUT</span>
<input type="text" class="form-control" placeholder="not with input-groups" />
</div>
</form>
This was indeed a bug and was resolved (check the issue on github for more info).
From now on the inline forms in BootStrap require to wrap the child form controls with .form-group.
So my code would become:
<form action="" class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/>
</div>
...
<div class="form-group">
<div class="input-group" style="width: 220px;">
<span class="input-group-addon">BUT</span>
<input type="text" class="form-control" placeholder="not with input-groups" />
</div>
</div>
</form>
I think you may need to separate your form into columns to get the inline layout you want. An example (I think of what you're after) is on the Bootstrap site here.
try putting
<div class="col-lg-1"></div>
around your controls to see what I mean. You of course need to work in columns of 12 so this will need to be adjusted accordingly.