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.
Related
I'm using bootstrap to make input elements with prepended text, using code from
https://getbootstrap.com/docs/4.0/components/input-group/#basic-example
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">#</span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
The problem is that the inputs are wrongly displayed:
This is how it should be displayed
I already deleted all the contents of my css file to test if the problem was there but it isn't.
I assume that can be fixed with css, but I don't know how.
For that to happen your classes are not calling the CSS anexed to them.
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 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/
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.
Here is my partial bootstrap code. The form lets you search a person by first name and last name:
<div style="text-align:right">
<div class="form-inline">
<div class="form-group">
<label for="Search">Search</label>
</div>
<div class="form-group">
<input class="form-control text-box single-line" id="FirstName" name="FirstName" placeholder="First Name" type="text" value="" />
</div>
<div class="form-group">
<input class="form-control text-box single-line" id="LastName" name="LastName" placeholder="Last Name" type="text" value="" />
</div>
<div class="form-group">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</div>
The topmost div helps the set of inner controls to be shown on the right side of the web page (as desired).
When the viewport is wide enough, all the controls are displayed in one line as they are supposed to be.
However, when the viewport width is reduced, the text-box controls line up vertically (as expected) but the "Search" label and the "search" button stay on the right of the page.
Why are some elements aligning vertically while some others are not?
This does not happen if I remove the topmost div. However, I do need it to display the controls on the right side of the page.
I am wondering if there is a way to make all the controls in the set work consistently. Regards.
Use the * selector to choose all elements within the div form-inline
.form-inline *
{
/* Desired style here */
}
Best way to do it is by using the * selector, this says that the style will be applied to all the elements within the div class form-inline
.form-inline *
{
/* Place your styling stuff here */
}
Setting left-align style on label as well as the button solved my problem:
<div class="form-group" style="text-align:right">
<label for="Search">Search</label>
</div>
Now, when the viewport is wide enough, all the elements are shown in one line on the right side of the view port. When the viewport reduces in width, all the controls are shown vertically as left-aligned.