I've created a search form using bootstrap. I've also used jquery to generate a delete search button (x) when text is input, however, I am stuck trying to get it on the same line as the search form (ideally in the box to the right).
As you can see in the second picture, when "1" is entered into the form the button is generated below the search form. I have included my code below, any help would be greatly appreciated.
<form id="PWFS">
<label for="Label">Info</label>
<button type="button" class="btn btn-link btn-xs"<i class="fa fa-question-circle fa-lg"></i></button>
<div class="row">
<div class="col-md-8">
<div class="input-group btn-group">
<span class="input-group-addon" id="basic-addon1"><i class="fa fa-search"></i></span>
<input type="text" class="form-control search" id="search" placeholder="Workflow #">
<span id="searchclear" class="searchclear fa fa-times"></span>
</div>
</div>
<button id="WFFsearch" type="submit">Search</button>
</div>
</form>
</div>
<br>
CSS
.searchclear {
position: relative;
z-index: 10;
right: 5px;
top: 0;
bottom: 0;
height: 14px;
margin: auto;
font-size: 14px;
cursor: pointer;
color: #ccc;
}
Thank you Lal, Phil and adamdc78. I just had to change the position to absolute.
Related
I hope that this question makes sense. I am developing a website which uses Identity Server 4 for authentication (probably not relevant, but it can't hurt). I have done a lot of testing on the sign in page and naturally Google (specifically Chrome, I assume) provides suggestions for previous entries. I am not very familiar with front end design and have no idea where to start in fixing this issue. I don't mind that there is autocomplete, but as you can see in the attached image, it interacts with the UI very strangely.
I am using Bootstrap 4 btw. Here is the cshtml for the card pictured:
<div class="card-body">
<form class="rounded-lg" asp-route="Login">
<input type="hidden" asp-for="ReturnUrl" />
<div class="form-group">
<input class="form-control custom-input rounded-lg" placeholder="Email or Username" asp-for="Username" required>
</div>
<div class="form-group password">
<input id="password-field" type="password" class="form-control rounded-lg" placeholder="Password" asp-for="Password" required autocomplete="off">
<span id="pass-status" class="fa fa-eye" aria-hidden="true"></span>
</div>
#if (Model.AllowRememberLogin)
{
<div class="form-group">
<div class="form-check">
<input class="form-check-input rounded-sm" asp-for="RememberLogin">
<label class="form-check-label" asp-for="RememberLogin">Remember Me</label>
</div>
</div>
}
<p>Default Username: Admin Password: P#ssword1</p>
<button class="btn btn-lg btn-primary btn-block text-uppercase rounded-pill" name="button" value="login">Sign In</button>
<div class="custom-link">
Or Register a New Account
</div>
</form>
</div>
And here is the css:
#import '../lib/bootstrap/dist/css/bootstrap.min.css';
.custom-input {
height: auto;
}
.custom-link {
padding-top: 15px;
}
.custom-body-container {
margin-top: 10%;
}
.password {
position: relative;
margin-bottom: 10px;
}
.password .fa-eye {
position: absolute;
top: 12px;
right: 12px;
font-size: 15px;
}
.password .fa-eye-slash {
position: absolute;
top: 12px;
right: 12px;
font-size: 15px;
}
As you just mentioned Chrome the solution would be adding the autocomplete property with the value.
autocomplete="chrome-off"
Disabling Chrome Autofill
The behaviour is very different for each browser so you may have to add some conditions if you would like full compatibility.
Firefox use autocomplete="off" instead How do you disable browser Autocomplete on web form field / input tag?
I'm trying to create a search box with a "drop down box" after the user insert search query into the input. It will make an ajax call and then create a drop down with some results.
I'm having some troubles using boostrap to do that.
Basically I want a structure like:
[CLOSE BUTTON][SELECT2][INPUT][SEARCHBTN]
The form is ready and working but I have two problems:
1- The select2 doesnt combine with input-group. If I insert it into input-group, it doesnt fit at all. The below code is what I have that works minimally, but it doesn't show like an input-group from bootstrap. It's showing as a separate select2. I'd like to make them seems the same "input".
2- I can't work in CSS to show a box with the results. It shows the results without box and in wrong scheme.
<div id="page-header-search" class="overlay-header">
<div class="content-header content-header-fullrow">
<form action="/search/" method="post" id="search-query" name="search-query">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-secondary" data-toggle="layout" data-action="header_search_off">
<i class="fa fa-times"></i>
</button>
</span>
<select class="js-select2 form-control input-group.input-group-sm" id="search_category" name="search_category" style="width: 10%;" data-placeholder="Choose one..">
<option></option>
<?php ListMainCategories($link); ?>
</select>
<input type="text" class="form-control" placeholder="Search or hit ESC.." id="search_text" name="search_text">
<span class="input-group-btn">
<button type="submit" class="btn btn-secondary">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<div class="input-group" id="resultados">
<div class="results" id="results"></div>
</div>
</form>
</div>
.resultados .results{
position:relative;
width: 100%;
color: #313131;
font-family: Rubik, sans-serif;
font-weight: 300
}
.resultados .results a{
position: relative;
float: left;
width: 100%;
border-bottom:1px solid #E0E0E0;
background-color: #ebebec;
list-style-type: none;
margin: 0px;
transition: all 275ms ease-in-out;
display: block;
cursor:pointer;
top: 0px;
right: 0px;
text-align: left;
/*border-radius: 40px;*/
transition: .5s ease-out;
padding-left: 20px;
}
How can I make changes to get a good result?
How can I make the box with results seems an extension of the search input?
I can't get it working.
I have a header-div on my Site. Inside the header I want to have a login-form in-line on the right side.
css:
#header {
position: absolute;
top: 0;
width: 100%;
height: 45px;
padding: 5;
background: #fff;
border-bottom: 1pt solid #ccc;
text-align: right;
font-weight: bold;
}
#header div {
/*display: inline-block;*/
cursor: pointer;
/*padding: 4px;*/
float: right;
text-decoration: none;
font-size: 15px;
margin-right: 5px;
}
#submitButton {
float:right;
}
html:
<div id="header">
<div id="login">
<form class="form-inline" role="form">
<div class="row">
<button type="submit" class="btn btn-default" id="submitButton">Login</button>
<div class="form-group col-sm-3">
<div class="input-group"> <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input type="email" class="form-control" placeholder="Enter email" />
</div>
</div>
<div class="form-group col-sm-3">
<div class="input-group"> <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input type="password" class="form-control" placeholder="password" />
</div>
</div>
</div>
</form>
</div>
</div>
That's what I have so far:
http://jsfiddle.net/n5qmc/254/
But if I go in the password form and press TAB I don't get in the email input field. Because of the float:right thing. I need to do this somehow different.
What is the right way to do this? Thanks!
What you need is tabindex but as your html is not good and in bootstrap you have used your own style so tabindex got different behaviour.
I have updated your fiddle with changes in html and css. Please check and let me know if its ok for you..
I have removed float and also removed extra margin which were causing problem now if you will use tab then it will go one by one and also will work better in resizing. I have also changed html so email field will be first in both case.
I am trying to add search image inside search box with form element.
My code is
<div class="col-xs-9">
<form action="search">
<input class="form-control" type="search" />
<span class="glyphicon glyphicon-search"></span>
<button type="submit" class="btn"><i class="glyphicon glyphicon-search"></i>
</button>
</form>
</div>
I want when user click on the search image inside search box form action should call
code is http://jsfiddle.net/chetfarley/WK3Q6/1/
Trying code from https://stackoverflow.com/a/19918345/876739
You can do it like this:
HTML:
<div class="col-xs-9">
<input class="form-control" type="search" />
<button type="submit"><span class="glyphicon glyphicon-search"></span></button>
</div>
CSS:
.form-control + button {
position: absolute;
right: 20px;
top: 7px;
border: 0;
background-color: transparent;
box-shadow: none;
}
And a little event listener, you won't need if you just want the form to be submited:
document.getElementsByTagName("button")[0].addEventListener("click", function(){
alert("doing");
});
Here is the demo: http://jsfiddle.net/WK3Q6/275/
I'm trying to position a clear button inside an input field, at the right before to the search icon, however it's not working; the "x" is displayed in front of the input field instead.
i use absolute positioning with right:0 and top:4px
You can see my example here: http://www.bootply.com/YUwdJ5Kvx6
A little update to get what you want:
input {
/* Avoid use typing under the clear button. */
padding-right: 30px !important;
}
.input-group-btn {
position: relative;
/* This avoid the "clear" button being hidden while
the input has focus on. */
z-index: 1000;
}
.input-group-btn a.btn {
position: absolute;
right: 38px;
top: 0px;
}
/* This avoid the bad effect when clicking the button. */
.input-group-btn a.btn:hover,
.input-group-btn a.btn:active {
box-shadow: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<div style="width: 300px;">
<div class="input-group">
<input class="form-control" placeholder="Search by ID..." type="text">
<span class="input-group-btn">
<a class="btn" style="color: rgb(204, 204, 204); text-decoration: none; " href="#clear">
<i class="glyphicon glyphicon-remove"></i>
</a>
<button type="submit" class="btn btn-default">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
I added position: relative to input-group-btn for position: absolute to work on the close button. Then just a negative right: 36px to move the button in the input field.
I put the close button inside the input-group-btn because it was easier for me, and it automatically takes care of the vertical alignment of your button (I just added the btn class to the a tag).
I added padding-left: 30px !important to the input field to avoid user typing under the x button. To have a symmetrical space, you would need 38px, but it looks a bit much... You can change this value at your discretion to get the result you want.
Since the a tag is inside the input-btn-group with the btn class, you need something like a:hover { box-shadow: none ; } to avoid ugly box-shadow in your input when clicking on the close button.
Try this i have appended the button before and after. Comment if this is you want or not. Did i understood you correct?
<form action="#" method="get" class="sidebar-form" id="id_search" style="width:300px;margin-left:100px;margin-top:100px;">
<div class="input-group double-input">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
<input type="text" placeholder="Second" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
</div><!-- /input-group -->
</form>