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
Related
I have an issue on Edit button click in my modal page, once the record is submitted successfully i see this issue, can some one review my code and let me know the issue to fix this.
<div class="col-3">
<input class="form-control" type="search" name="DateOfBirth" [(ngModel)]="hldr.DateOfBirth" [hidden]="selRowData.actionmode==='ADD'"
disabled>
<div class="input-group" daterangepicker [options]="singlePicker" (selected)="singleSelect($event,hldr,'DateOfBirth')" [hidden]="selRowData.actionmode==='VIEW'">
<input class="form-control" type="search" name="DateOfBirth" [(ngModel)]="hldr.DateOfBirth" maxlength="10">
<div class="input-group-append" style="cursor:pointer">
<div class="input-group-text">
<i class="fa fa-calendar"></i>
</div>
</div>
</div>
</div>
CSS
.input-group {
margin-bottom: 0px !important;
}
Quite easy to spot the problem, difficult to share the solution due to incomplete information.
[hidden]="selRowData.actionmode==='ADD'"
[hidden]="selRowData.actionmode==='VIEW'"
When your component is initiated, the action mode has a value and its most likely view.
Your problem is that after edit, it's neither view not add.
Here is how my navbar should look:
As you can see there is a logo, loop icon, clear icon and input field that takes all the space between those two icons (no matter what resolution).
Here is how my navbar looks now:
I have tried several different aproches to fill the empty space with input without breaking responsive features, but I have failed.
How can I make input field fill the entire space between these two icons on every screen?
Here is plunker
Can you replace your form with
<form class="navbar-form">
<div class="form-group" style="display:inline;">
<div class="input-group" style="display:table;">
<span class="input-group-addon" style="width:1%;"><span class="glyphicon glyphicon-search"></span></span>
<input class="form-control" name="search" placeholder="Search Here" autocomplete="off" autofocus="autofocus" type="text">
<span class="input-group-addon" style="width:1%;"><span class="glyphicon glyphicon-remove"></span></span>
</div>
</div>
</form>
I hope it helps.
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.
I'm using a minimal bootstrap form input & fontawesome icon,
When the input is empty the cursor is slightly higher in its position,
And when there's something it shows like this (aka vertically aligned)
I'm not sure if it's a browser bug? I'm using chromium-browser 38 in Ubuntu.
Attached source code:
<div class="center-block text-center">
<form class="form-inline" role="form" action="#" method="post">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-automobile"></i>
</span>
<div class="form-group">
<input class="form-control" name="q" type="text" />
</div>
</div>
</form>
</div>
This is a browser specific behaviour.
Only chrome exhibits this kind of behaviour
You will not see this in Firefox or IE.
And this case is only for an empty input field in Chrome. If you are using a placeholder text for the input box, then there will not be any issue with the alignment.
I am using a template, the name is Treble One Page Rsponsive Theme from Wrapbootstrap which uses Twitter Bootstrap. I am implementing the template and encountered this small error which drove me crazy.
There is a search bar, consists of <input> tag and <button> tag. Previously it was fine, until I make it inside a <form>, the search bar started to act weird. The <input> field is centered, but the <button> appended into outside the field making the whole things uncentered.
Here is the image, to be clear:
picture
And here is my code:
<div class="row">
<div class="span8 offset2">
<div class="input-append">
<form method="get">
<input class="span5" id="appendedInputButton" type="text" placeholder="Search By Name" name="searchTerm" value="Search">
<button class="btn btn-primary sicon-search sicon-white" type="submit"><i>Search</i></button>
</form>
</div>
</div>
</div>
I've googled this template.
This code works on original template as expected:
<div class="row">
<div class="span8 offset2">
<form class="input-append" method="get">
<input class="span5" id="appendedInputButton" type="text" placeholder="Search By Name" name="searchTerm" value="Search" />
<button class="btn btn-primary sicon-search sicon-white" type="submit"><i>Search</i></button>
</form>
</div>
</div>
Main idea is to convert "input-append" div into form, instead of adding new form element within it.