I'm using a form for the site search with a button inside the text-box. On the desktop version it works ok, howerver when resizing to mobile it is not. I am using a position: absolute; to set the button positioning, giving it a fixed position. Is there any way I can make this work on the mobile version as well?
HTML:
<!-- Right search form -->
<div class="col-md-3 col-xs-12">
<form class="form-inline" role="search">
<div class="form-group">
<input type="text" class="form-control search-input" size="40" placeholder="Cauta in site...">
<input type="submit" value="" class="search-button" id="searchsubmit">
</div>
</form>
</div>
CSS:
.search-button {
background: url('../images/search-btn.png') right no-repeat;
border: 0px solid black;
border-left: none;
cursor: pointer;
height: 35px;
width: 35px;
position:absolute;
left:241px;
top: 3px;
}
you can use the bootstrap class
reference here
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" placeholder="Cauta in site..." class="form-control">
</div><!-- /input-group -->
Related
I'm building a web page using Bootstrap that has a list box populated with names and a search box for filtering those names. The search box has a glyphicon-remove button that appears when typed in. When clicked, the button clears the search box. My problem is that the icon causes the size of the search box to shrink, and I can't figure out why that's happening.
Here's what it looks like:
Here's what it should look like:
I can fix the problem by giving it a set width using CSS, but I want it to resize with the window like the rest of the form.
HTML:
<div class="col-lg-4">
<form>
<div class="form-group has-feedback">
<label for="txtFilter">Select A User</label>
<div class="input-group">
<input class="form-control" type="text" id="txtFilter" placeholder="Filter by name">
<span class="form-control-feedback glyphicon glyphicon-remove filter-icon"></span>
</div>
</div>
<div class="form-group">
<select class="form-control" id="lstUsers" size="8"></select>
</div>
</form>
CSS:
.filter-icon{
cursor: pointer;
pointer-events: all;
z-index: 3;}
Whenever the icon disappears the box doesn't seem to change shape. Are you sure there isn't any other css you have that might be conflicting? Otherwise there doesn't seem to be another explanation since the code you provided doesn't produce the error.
.filter-icon{
cursor: pointer;
pointer-events: all;
z-index: 3;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-4">
<form>
<div class="form-group has-feedback">
<label for="txtFilter">Select A User</label>
<div class="input-group">
<input class="form-control" type="text" id="txtFilter" placeholder="Filter by name">
<span class="form-control-feedback glyphicon glyphicon-remove filter-icon"></span>
</div>
</div>
<div class="form-group">
<select class="form-control" id="lstUsers" size="8"></select>
</div>
</form>
</div>
</div>
</div>
You can try this Code
HTML
<html>
<head>
<title>SSSSSS</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="col-lg-12">
<form>
<div class="col-lg-12 form-group has-feedback">
<label for="txtFilter">Select A User</label>
</div>
<div class="col-lg-12 form-group">
<input id="txtFilter" type="search" class="form-control" placeholder="Filter by name">
<span id="searchclear" class="glyphicon glyphicon-remove"></span>
</div>
<div class="col-lg-12 form-group">
<select class="form-control" id="lstUsers" size="8"></select>
</div>
</form>
</div>
</body>
</html>
CSS
#searchclear {
position: absolute;
right: 18px;
top: 0;
bottom: 0;
height: 14px;
margin: auto;
font-size: 14px;
cursor: pointer;
color: #ccc;
}
Jquery
$("#searchclear").click(function(){
$("#txtFilter").val('');
});
$(document).ready(function(){
$('#searchclear').css("display","none");
$('#txtFilter').keyup(function () {
$('#searchclear').css("display","block");
});
})
I was able to fix this by using a variation of Kasunjuth Bimal's code below. The key was I needed to change the 'input-group' class to 'form-group'. Then I was able to re-align the icon with some additional CSS. Here's my updated code:
<form>
<div class="form-group has-feedback">
<label for="txtFilter">Select A User</label>
<div class="form-group relative">
<input class="form-control" type="text" id="txtFilter" placeholder="Filter by name">
<span class="form-control-feedback glyphicon glyphicon-remove filter-icon"></span>
</div>
</div>
<div class="form-group">
<select class="form-control" id="lstUsers" size="8"></select>
</div>
.filter-icon{
position: absolute;
right: 1px;
cursor: pointer;
pointer-events: all;
z-index: 3;
}
.relative{
position: relative;
max-width: 280px;
}
How to make it so that it appears nicely after input page with same height?
<div class="input-group">
<input type="text" class="form-control"/>
<button class="input-group-addon" type="submit">
<i class="fa fa-search"></i>
</button>
</div>
Here is code http://jsfiddle.net/6mcxdjdr/ The first one is original input-group, the second one is something what I am trying to have
If you follow bootstrap's documentation:
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="fa fa-search"></i>
</button>
</span>
</div>
Bootstrap 4 provides the classes input-group-prepend and input-group-append that allows the effect of button inside input.
Below the snippet for a left aligned button inside input-group (class input-group-prepend):
#import "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css";
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button">Prepended button</button>
</div>
<input type="text" class="form-control">
</div>
And the snippet for a right aligned button inside input-group (class input-group-append):
#import "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css";
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
here is my solution, using a little CSS to position the button to the right of the input field by adding position: absolute and a z-index:
button.input-group-addon {
position: absolute;
right: -38px;
top: 0;
padding: 2px;
z-index: 999;
height: 34px;
width: 38px;
}
http://jsfiddle.net/6mcxdjdr/1/
Another idea is to manipulate the form submit with javascript, so you dont have to create your own button but submit the form by clicking on the bootstrap span. This could be done by
$('.input-group-addon').click(function(){ $('#myform').submit(); });
You can also try this way
<div class="input-group">
<input type="text" class="form-control search-input" />
<span class="input-group-addon">
<i class="fa fa-search"></i>
</span><span class="input-group-addon">
<i class="fa fa-refresh"></i>
</span>
</div>
.search-input {
border-right: 0;
}
.input-group-addon {
background: white;
border-left: 0;
border-right: 0;
}
.input-group-addon:last-child {
border-left: 0;
border-right: 1px solid #ccc;
}
Try this,
.input-group-addon{
width:50px;
position:absolute;
margin-left:196px;
height:34px;
}
.input-group-addon > i{
text-align:center;
font-size:18px;
}
Here's how I did it, I had to override some css...
(Bootstrap 4 Beta 2)
Html
<div class="input-group">
<input type="search" class="form-control" placeholder="search..." />
<span class="input-group-addon input-group-addon-btn bg-white">
<button class="btn px-2" type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
</span>
</div>
And here's the css
#app-search .input-group-addon-btn {
padding: 0;
button {
border: none;
background: transparent;
cursor: pointer;
height: 100%;
}
}
I am using bootstrap 3 in a small div. When I increase the window's width by dragging the window - the fields (username and password input fields) that are supposed to stay in the interior of the div move out to almost the center of the window. Why? CSS and HTML are below
<body>
<div class="login">
<div class="container">
<div class="col-md-12">
<div class="row">
<form action="https://www.blah/login"/>
<h3>Login</h3>
<div class="col-xs-4">UserName:</div>
<div class="col-xs-8"><input class="rounded white" type="text" name="username" placeholder="Username:" required/><br></div>
<div class="col-xs-4">Password:</div>
<div class="col-xs-8"><input class="rounded white" type="password" name="password" placeholder="Password:" required/><br></div>
<input type="checkbox" name="retrieve" value="true"/>I forgot my password.
<ul class="no-bullets">
<li><input class="color-brown white rounded float-left" type="submit" name="register" value="Submit Now"></li>
<li><input class="rounded margin-left-5px" data-dismiss="modal" type="submit" value="Cancel"></li>
</ul>
</div>
</div>
</div>
</div>
</body>
CSS----
.login {
height: 200px;
width: 330px;
max-width: 330px;
padding: 10px 20px 10px 20px;
background-color: #242424;
border: 1px solid #545454;
border-radius: 5px;
color: #ddd;
}
JS Fiddle
The elements containing your labels (.col-xs-4) have a width: 33.33333%.
The elements containing your input fields (.col-xs-8) have a width: 66.6666667%.
When the screen is narrow these width values are small and the labels and inputs are close together.
When the screen expands, these width values expand as well, creating a progressively larger gap between label and input.
The answer is to give the container a width constraint.
Add this style to the container class:
.col-md-12 { max-width: 250px; }
I tested it in Chrome and it works. Also, here's a live demo:
http://jsfiddle.net/y0psw5dn/
You seemed to inproperly set .login to height:200px.
.login{
/*height:200px*/
}
Is is what you want?
Try this.
<div class="login">
<div class="row">
<div class="col-md-12">
<form action="https://www.blah/login" />
<h3>Login</h3>
<div class="col-xs-4">UserName:</div>
<div class="col-xs-8">
<input class="rounded white" type="text" name="username" placeholder="Username:" required/>
<br>
</div>
<div class="col-xs-4">Password:</div>
<div class="col-xs-8">
<input class="rounded white" type="password" name="password" placeholder="Password:" required/>
<br>
</div>
<input type="checkbox" name="retrieve" value="true" />I forgot my password.
<ul class="no-bullets">
<li>
<input class="color-brown white rounded float-left" type="submit" name="register" value="Submit Now">
</li>
<li>
<input class="rounded margin-left-5px" data-dismiss="modal" type="submit" value="Cancel">
</li>
</ul>
</div>
</div>
</div>
.login {
height: 200px;
width: 330px;
max-width: 330px;
padding: 10px 20px 10px 20px;
background-color: #242424;
border: 1px solid #545454;
border-radius: 5px;
color: #ddd;
}
JSfiddle
Just put the .login div under the .container div. Below the code is
<div class="container">
<div class="login">
See the jsfiddle demo.
I changed your structure. There was some wrong. You can check this demo on jsfiddle
I also using Bootstrap 3 here Just Check it out this code.
Your HTML code structure is not organized here. First you need to understand its row and columns architecture what the purpose Behind it.
and Here on many places you open the div but you are not closing your at proper Location Where you need to close it.
I used this HTML Code :
<div class="container">
<div class="col-md-12 login">
<form action="https://www.blah/login"/>
<h3>Login</h3>
<div class="row">
<div class="col-xs-4">UserName:</div>
<div class="col-xs-8">
<input class="rounded white" type="text" name="username" placeholder="Username" required/><br>
</div>
</div>
<div class="row">
<div class="col-xs-4">Password:</div>
<div class="col-xs-8">
<input class="rounded white" type="password" name="password" placeholder="Password" required/><br>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="checkbox" name="retrieve" value="true"/> I forgot my password.
</div>
</div>
<div class="row">
<div class="col-md-6">
<input class="bg-default btn-font" type="submit" name="register" value="Submit Now">
</div>
<div class="col-md-6">
<input class="bg-default btn-font" data-dismiss="modal" type="submit" value="Cancel">
</div>
</div>
</div>
and css code is here:
.login { height: 200px; width: 330px; max-width: 330px; padding: 10px 0px 10px 20px; background-color: #242424; border: 1px solid #545454; border-radius: 10px; color: #ddd; } .btn-font{ color: #000; }
and here is my running fiddle Example:
For Demo Click Here
hi please check below code it should be within container...
<div class="container">
<div class="login">
<div class="col-md-12">
<div class="row">
<form action="https://www.blah/login"/>
<h3>Login</h3>
<div class="col-xs-4">UserName:</div>
<div class="col-xs-8"><input class="rounded white" type="text" name="username" placeholder="Username:" required/><br></div>
<div class="col-xs-4">Password:</div>
<div class="col-xs-8"><input class="rounded white" type="password" name="password" placeholder="Password:" required/><br></div>
<input type="checkbox" name="retrieve" value="true"/>I forgot my password.
<ul class="no-bullets">
<li><input class="color-brown white rounded float-left" type="submit" name="register" value="Submit Now"></li>
<li><input class="rounded margin-left-5px" data-dismiss="modal" type="submit" value="Cancel"></li>
</ul>
</div>
</div>
</div>
check the demo here
Just change your upper starting structure of your html like this only
<div class="container">
<div class="row-fluid">
<div class="login">
the problem is with your html structure still many wrong things are
present you can make it better just try to improve by understanding the grid system of Bootstrap
it happens because of the improper structure sequence so that
here is the working demo jsfiddle
DEMO check out
here i tried to modify your code my way you can check out
.login {
height:280px;
max-width:250px;
padding: 10px 20px 10px 20px;
background-color: #242424;
border: 1px solid #545454;
border-radius: 5px;
color: #ddd;
}
.temp_div{
float: left;
margin-top: 10px;
}
.forgetPass_check{
padding-right:5px;
vertical-align:bottom;
padding-left: 15px;
}
.forgetPass_label{
padding-left:10px;
}
.no-bullets{
list-style-type: none;
margin: 0;
padding-left: 15px;
}
ul.no-bullets li{
float: left;
padding-right: 20px;
color:black;
}
<div class="container">
<div class="row-fluid">
<div class="login">
<form action="https://www.blah/login"/>
<h3 class="text-center">Login</h3>
<div class="col-xs-8"><label>UserName:</label><input class="rounded white" type="text" name="username" placeholder="Username:" required/></div>
<div class="col-xs-8"><label>Password:</label><input class="rounded white" type="password" name="password" placeholder="Password:" required/></div>
<div class="temp_div">
<div class="forgetPass_check">
<input type="checkbox" name="retrieve" value="true"/><label class="forgetPass_label">I forgot my password.</label>
</div>
<div class="button_wrapper">
<ul class="no-bullets">
<li><input class="color-brown white rounded float-left" type="submit" name="register" value="Submit Now"></li>
<li><input class="rounded margin-left-5px" data-dismiss="modal" type="submit" value="Cancel"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
here is the demo code as well
Please Check Out Modified
even you can check this
Another try
Here is my code for the form:
<div class="container-full">
<div class="jumbotron text-center" style="background-color:transparent; margin:auto">
<form name="verifyForm" ng-submit="submitForm()" novalidate>
<div class="input-group input-group-lg col-xs-1" style="margin: auto;" ng-class="{'has-error': verifyForm.verifyCode.$invalid}">
<input type="text" class="form-control" placeholder="Username" style="min-width:15em">
<span class="input-group-addon">
<button id="filter" class="btn btn-primary btn-block" onclick="submitForm();" style="background-color:#6e5cbf; color: #ffffff">
>
</button></span>
</div>
</form>
</div>
The problem I have is when I add a button to the button group, it is bigger than the input box:
How can I stop this from happening? Thanks
You could do it by changing the button to a span with role=button on the parent and switching a few styles around, like so
<div class="container-full">
<div class="jumbotron text-center" style="background-color:transparent; margin:auto">
<form name="verifyForm" ng-submit="submitForm()" novalidate>
<div class="input-group input-group-lg col-xs-1" style="margin: auto;" ng-class="{'has-error': verifyForm.verifyCode.$invalid}">
<input type="text" class="form-control" placeholder="Username" style="min-width:15em">
<span class="input-group-addon" style="background-color:#6e5cbf;" role="button">
<span id="filter" onclick="submitForm();" style="color: #ffffff">
>
</span>
</span>
</div>
</form>
</div>
</div>
While the bootstrap documentation doesn't say anything about buttons, it does say
We do not support multiple form-controls in a single input group.
Looking at the styling of buttons vs. form-controls I'd assume that the restriction extends to buttons as well.
It's going to look like this (image)
Try to add form-group for these input and button element.
something like
<form name="verifyForm" ng-submit="submitForm()" novalidate>
<div class="input-group input-group-lg col-xs-1" style="margin: auto;" ng-class="{'has-error': verifyForm.verifyCode.$invalid}">
<div class="form-group">
<input type="text" class="form-control" placeholder="Username" style="min-width:15em">
</div>
<div class="form-group">
<span class="input-group-addon">
<button id="filter" class="btn btn-primary btn-block" onclick="submitForm();" style="background-color:#6e5cbf; color: #ffffff"></button>
</span>
</div>
</div>
</form>
It will differentiate those two blocks and you can write cutom classes on top of that
Your button has class .btn which has following style:
.btn{
display: inline-block;
padding: 6px 12px; //this is what making it to extend space
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143; //and this too
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
So the work-around will be override those properties. Add a class say 'special' to the button and override following attributes:
.special{
padding:0px !important;
line-height:1
}
DEMO
Why is everyone making it complicated? Just put this and y'all will be fine.
This:
<input class="btn btn-outline-primary form-control-sm" type="button" Value="Send" />
instead of:
<button class="btn btn-outline-primary form-control-sm">Send</button>
Boom. We done.
I'm working in Bootstrap 3.0 trying to make a Google-style search box that has a "Search Help" link after the Submit button.
My problem: when I go responsive I lose my offset margins and the button wraps to the next line.
<div class="row search">
<div class="col-md-8 col-md-offset-2">
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="">Enter search terms</label>
<input type="search" class="form-control" id="k" name="k" placeholder="Enter search terms">
<input id="cn" name="cn" type="hidden" value="false" />
</div>
<button type="submit" id="s" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
Search Help
</form>
</div>
</div>
C.f.: http://jsfiddle.net/redo1134/su3eq/2/
Everything's fine at >991px. But at 991 and below I lose the offset.
This is certainly related to the #media (min-width: 992px) media query in bootstrap.css, but I don't know how to keep the offset.
And to make matters worse: when the viewport is <768px the button and the link wrap to the next line.
Again, I'm drawn to bootstrap.css and the min-width: 768px media query, but I don't know how to keep the input, button, and text all together.
Thanks!
<div class="row search">
<div class="col-sm-8 col-sm-offset-2">
<form role="form">
<div class="input-group">
<input type="text" class="form-control input-sm">
<span class="input-group-btn">
<button class="btn btn-default btn-sm" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</span>
Search Help
</div>
</form>
</div>
</div>
So, using Bootstrap will automatically make the spans break to show full widths at a certain breakpoint... it does that for responsiveness! I usually have to create my own styles when i would like something to act as I want it. Which is totally ok!
So, using inline styles just for a quick example, (you can turn them into proper styles for your stylesheet) you can do something like this with your search area... also updated the jsfiddle here
<!-- Global Search -->
<div class="row search">
<div class="col-md-8 col-md-offset-2">
<form class="form-inline" role="form">
<div class="form-group">
<div style="width:75%; float: left;">
<label class="sr-only" for="">Enter search terms</label>
<input type="search" class="form-control" id="k" name="k" placeholder="Enter search terms">
<input id="cn" name="cn" type="hidden" value="false" />
</div>
<div style="width: 25%; float: left; padding-left: 10px; box-sizing: border-box;">
<button type="submit" id="s" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
Search Help
</div>
<div class="clearfix"></div>
</div>
</form>
</div>
</div>
DEMO:http://jsbin.com/IKaKosoX/1/
EDIT: http://jsbin.com/IKaKosoX/1/edit?html,css,output
Remove the row col wrapping the form-inline and replace with this html:
<!-- Global Search -->
<form class="form-inline global-search" role="form">
<div class="form-group">
<label class="sr-only" for="">Enter search terms</label>
<input type="search" class="form-control" id="k" name="k" placeholder="Enter search terms">
<input id="cn" name="cn" type="hidden" value="false" />
</div>
<button type="submit" id="s" class="btn btn-default"><span class="glyphicon glyphicon-search"></span>
</button> Search Help
</form>
Remove previous custom css regarding the form and replace with:
/* center search */
.global-search {
text-align:center;
padding:10px;
}
.global-search * {
display:inline-block;
margin-bottom:0;
}
.global-search .form-control {
width:120px;
}
.global-search a {
display:block;
padding-top:10px;
}
#media (min-width:400px){
.global-search {
padding: 20px 0;
text-align:center;
}
.global-search .form-control {
width:300px;
}
}