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;
}
Related
I'm creating a form but I don't want input type"file" to shown, I mean it should work but Choose File button and No file chosen part shouldn't be shown.
here's my HTML code
<div class="row">
<div class="form-group col-md-12">
<label>File upload</label>
<div class="input-group col-xs-12 ">
<input type="file" id="files" name="files[]" class="form-control btn btn-primary mb-xl-4" multiple>
</div>
</div>
</div>
here's how it's shown
how code works
It's possible to hide to the input element and make the surrounding element clickable, so it triggers the 'Choose file' popup from the browser. Therefore you should add an id or exclusive class to the parent element.
<div class="row">
<div class="form-group col-md-12">
<label>File upload</label>
<div class="input-group col-xs-12" id="files">
<input type="file" name="files[]" class="form-control btn btn-primary mb-xl-4" multiple>
</div>
</div>
</div>
#files {
width: 100px;
height: 100px;
display: inline-block;
overflow: hidden;
cursor: pointer;
}
#files input=[type="file"] {
height: 100%;
width: 100;
opacity: 0;
cursor: pointer;
}
You're also able to make a button with the label in this way if you move the files id to the form-group div.
Try this
<div class="row">
<div class="form-group col-md-12">
<label>File upload</label>
<div class="input-group col-xs-12 ">
<input type="file" id="files" name="files[]" style="display:none" class="form-control btn btn-primary mb-xl-4" multiple>
<button onclick="document.getElementById('files').click()">Choose Files</button>
</div>
</div>
</div>
Trying to override the default width of a datetime-local input element but CSS changes are not getting applied to the element.
The datetime-local element displays over the sibling element that sits to its right side.
How do you style datetime-local elements?
HTML:
<div class="row">
<div class="form-group col-4">
<label>System User Account </label>
<div>
<input
type="text"
class="form-control input-lg"
name="sysuseracct"
id="sysuseracct"
placeholder="Account with issue or request"
>
</div>
</div>
<div class="form-group col-4">
<label>Date Issue Began</label>
<div>
<input
type="datetime-local"
id="dateissuebegan"
name="dateissuebegan"
style="height: 2.3rem; font-size: 1em;"
>
</div>
</div>
<div class="form-group col-4">
<label>External Trouble Ticket</label>
<div>
<input
type="text"
class="form-control input-lg"
name="externaltt"
id="externaltt"
style="padding: 1em;"
placeholder="If Applicable"
>
</div>
</div>
</div>
CSS:
input { display: inline-block;}
#dateissuebegan {
box-sizing: border-box;
width: 50px;
}
Check this code snippet out.
You can adjust the width to your taste.
input { display: inline-block;}
input[type="datetime-local"] {
width: 160px;
/* More styles here */
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="row">
<div class="form-group col-4">
<label>System User Account </label>
<div>
<input type="text" class="form-control input-lg" name="sysuseracct" id="sysuseracct" placeholder="Account with issue or request">
</div>
</div>
<div class="form-group col-4">
<label>Date Issue Began</label>
<div>
<!-- <input type="datetime-local" id="dateissuebegan" name="dateissuebegan" value="2018-06-12T19:30" min="2018-06-07T00:00" max="2018-06-14T00:00"> -->
<input type="datetime-local" id="dateissuebegan" name="dateissuebegan" style="height: 2.3rem; font-size: 1em;">
</div>
</div>
<div class="form-group col-4">
<label>External Trouble Ticket</label>
<div>
<input type="text" class="form-control input-lg" name="externaltt" id="externaltt" style="padding: 1em;" placeholder="If Applicable">
</div>
</div>
</div>
I created a simple Bootstrap "input-group" sample, which works fine in Chrome, but does not work in IE and Firefox.
As you can see in this sample, the "Help" button does not fill the full height of its parent. In Chrome (Version 58) it works as expected.
Remove padding-top and padding-bottom
.input-group {
width: 100%;
}
.input-group-btn {
height: 100%;
}
.btn {
height: 100%;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<div class="input-group">
<div class="input-group-addon">
<input type="checkbox" />
</div>
<label class="form-control">Option 1</label>
</div>
<div class="input-group">
<div class="input-group-addon">
<input type="checkbox" />
</div>
<label class="form-control">Option 2</label>
</div>
<div class="input-group-btn">
<button class="btn">Help</button>
</div>
</div>
Please set a height for input-group.
.input-group {
width: 100%;
height: 10px;
}
Then it should work like expected.
There is also another good answer for this problem here.
The parent needs height: 100%
.input-group {
width: 100%;
}
.input-group-btn, .outer, .btn {
height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group outer">
<div class="input-group">
<div class="input-group-addon">
<input type="checkbox" />
</div>
<label class ="form-control">Option 1</label>
</div>
<div class="input-group">
<div class="input-group-addon">
<input type="checkbox" />
</div>
<label class ="form-control">Option 2</label>
</div>
<div class="input-group-btn">
<button class="btn">Help</button>
</div>
</div>
I am aware this is very basic but I have been trying so many ways of removing the white space on the right side of my page yet still it's been a little problem for me as a learner. The sign_in and paratext are inline as shown but when I used set the margins and paddings to 0 to remove the white space from the right side of my page, the sign in (which is the login form) moves below the paratext instead of staying inline.
Here you go. Hope this helps you.
body {
margin: 0;
padding: 0;
}
.sign_in {
display: inline-block;
width: 55%;
font-size: 3vw;
margin-left: 30px;
}
.paratext {
display: inline-block;
font-size: 3vw;
width: 35%;
color: #008B8B;
}
<html>
<head>
<title>Example</title>
</head>
<body>
<div class="paratext">
<h1>Get ready to sell Smarter, Better, Faster.</h1>
<p>Dosty CRM is the latest e-customer relationship management system being used currently by tech companies. Easy and Secure. </p>
</div>
<div class="sign_in" id="sign_in">
<form (ngSubmit)="submitForm(l)" #l="ngForm">
<h1 style="color:#008B8B; font-weight: 900; font-size: 40px;" > <b>Sign In </b></h1><br>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" id="email" name="email" placeholder="First Name" [(ngModel)]="login.email" required>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" name="password" placeholder="password" [(ngModel)]="login.password">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<input type="checkbox" value="Remember Me" id="remember_me" >
<label >Remember Me </label>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<p class="text-right"><span class="forgot-password"><a style=" color:#008B8B;" href="#">Forgot password?</a></span></p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<div class="form-group">
<button class="button" type="submit" style="font-weight: 900; background-color:#008B8B;" ><span>Login </span></button>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<p class="text-right">
<span><a style="color:#008B8B;" href="#">Already a member?</a></span></p>
</div>
</div>
</div>
</form>
</div>
</body>
<html>
I have refactored your code by removing irrelevant row classes and inline styles. You also specified sign_in{width:70%}, but haven't specified what is 100%, so I added body{width:100%}. In addition to that, I commented out certain paddings and margins you can see that in the example below.
body{width: 100%;}
.paratext, h1, a{color:#008B8B;}
h1{
font-weight: 900;
font-size: 40px;
}
.form-group button{
font-weight: 900;
background-color:#008B8B;
}
.sign_in {
width: 70%;
/*margin-right: -30%;*/
}
.paratext {
display: inline-block;
/*padding-top: 250px;*/
font-size: 16px;
word-wrap: break-word;
/*width: 600px;*/
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="paratext">
<h1>Get ready to sell Smarter, Better, Faster.</h1>
<p>Dosty CRM is the latest e-customer relationship management system being used currently by tech companies. Easy and Secure.</p>
</div>
<div class="sign_in" id="sign_in">
<form (ngSubmit)="submitForm(l)" #l="ngForm">
<h1>Sign In</h1>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" id="email" name="email" placeholder="First Name" [(ngModel)]="login.email" required>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" name="password" placeholder="password" [(ngModel)]="login.password">
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<input type="checkbox" value="Remember Me" id="remember_me">
<label>Remember Me</label>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<p class="text-right forgot-password">Forgot password?</p>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<button class="button" type="submit">Login</button>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<p class="text-right">Already a member?</p>
</div>
</div>
</div>
</form>
</div>
</body>
Try this code example in your project and see if the problem remains. If you still have a problem then you need to update you question with the rest of the codebase you have.
I have a bootstrap form where I want some fields to be horizontal while others vertical. In the fiddle at the bottom, I want field 1 and field 2 to be in the same row and but of default size (not stretched). The button should be at center but in a separate row. How should I achieve this in bootstrap? I tried adjusting the size of text fields but it didn't work. Also, the button is not placing at the center and is too close to above form fields. Is table a good idea here? Please help me with this.
Fiddle: http://jsfiddle.net/r30kk8m4/
HTML
<div class="container-fluid">
<form class="form" role="form">
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-md-6 col-xs-6">
<input type="text" class="form-control" placeholder="Field 1" />
</div>
<div class="col-sm-6 col-md-6 col-xs-6">
<input type="text" class="form-control" placeholder="Field 2" />
</div>
</div>
</div>
<div class="form-group text-center">
<div class="row">
<input type="button" class="btn btn-primary" id="continueproductdetailsbutton" value="Continue" />
</div>
</div>
</form>
</div>
working fiddle
http://jsfiddle.net/r30kk8m4/1/
Update
You can make you buttons responsive
#media (max-width: 768px) {
.btn-responsive {
padding:2px 4px;
font-size:80%;
line-height: 1;
border-radius:3px;
}
}
#media (min-width: 769px) and (max-width: 992px) {
.btn-responsive {
padding:4px 9px;
font-size:90%;
line-height: 1.2;
}
}
Edit your layout (removed .row, moved button to separate .form-group), apply some clear: both;.
Since button is inline element, you can apply text-align: center; (<center> is deprecated).
.no-gutter-left {
padding-left: 0 !important;
}
.no-gutter-right {
padding-right: 0 !important;
}
.clear {
clear: both;
}
.tac {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="container-fluid">
<form class="form" role="form">
<div class="form-group">
<div class="col-xs-6 no-gutter-left">
<input type="text" class="form-control" placeholder="Field 1" />
</div>
<div class="col-xs-6 no-gutter-right">
<input type="text" class="form-control" placeholder="Field 2" />
</div>
<div class="clear"></div>
</div>
<div class="form-group tac">
<input type="button" class="btn btn-primary" id="continueproductdetailsbutton" value="Continue" />
</div>
</form>
</div>