hi I am trying to make an input text field with a cross icon in front of it. So that if user clicks cross that field gets removed. Right now I am using bootstrap class close over button tag. But the result is not coming. It needs to be done using bootstrap.
Here's my code:
<div class="col-lg-7 ven" hidden="hidden">
<label for="vendor" >Vendor</label>
<input type="text" class="form-control" id="vendor" placeholder="Enter Vendor" name="vendor" value="not defined">
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
Output right now:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="col-lg-7 ven">
<label for="vendor" >Vendor</label>
<div class="input-group margin-bottom-sm ">
<input type="text" class="form-control" id="vendor" placeholder="Enter Vendor" name="vendor" value="not defined">
<button type="button" class="close" aria-label="Close">
<span class="input-group-addon">×</span></button>
</div>
</div>
In my opinion, you should use the class .input-group by Bootstrap. It solves your issue.
Your final code would look like this given above.
Use this code with Bootstrap and you are good to go.
I hope I might be of help.
Related
With Bootstrap 5 I'd like to add a close button to form floating and form control input fields so users can easily clear text on mobile, but it's not working as expected. I'm after a simple 'x' on the right end that'll show after text input, as shown in the search field in this example.
Minimal reproduction of examples from docs with the close button I expected to work inserted:
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
</head>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name#example.com">
<button type="button" class="btn-close" disabled aria-label="Close"></button>
<label for="floatingInput">Email address</label>
</div>
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Email address</label>
<button type="button" class="btn-close" disabled aria-label="Close"></button>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name#example.com">
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
</html>
What am I doing wrong?
I might be doing something stupid, but I can't find any examples on this for Bootstrap 5, so please forgive the dumb question.
"I'm after a simple 'x' on the right end that'll show after text
input, as shown in the search field in this example."
The 'X' is that example is simply a search type input...
<div class="form-floating mb-3">
<input type="search" class="form-control" id="floatingInput" placeholder="name#example.com">
<label for="floatingInput">Email address</label>
</div>
Or, use an input group as explained in this similar question
<div>
<label for="exampleFormControlInput2" class="form-label">Email address</label>
<div class="input-group">
<input class="form-control border-end-0 border" type="email" placeholder="name#example.com" id="exampleFormControlInput2">
<span class="input-group-append">
<button class="btn btn-white border-start-0 border" type="button">
<i class="bi bi-search"></i>
</button>
</span>
</div>
</div>
Codeply
<div class="input-group position-relative d-inline-flex align-items-center">
<input class="form-control " formControlName="textInput" type="text" value="">
<i class="bi bi-search position-absolute"
style="
right: 10px;
cursor: pointer;
z-index: 100;">
</i>
</div>
https://codesandbox.io/s/bootstrap-5-playground-forked-z65ldi?file=/index.html
My Current implementation of what I want is done using ng-bootstrap for Angular4.
Image
As you can see I used the Check box button to display a response from the backend. If you click on the button the x button will be not be shown and it will also hide some other html elements below.
Upon clicked (checked)
I am actually looking to improve the layout, where I wish that the x button would somehow be spanned together for a smooth feeling.
I do not know of any components from Bootstrap4.x or ng-bootstrap itself that could do something.
Any design suggestions or improvements is what I am looking for.
code
<!-- Search Keywords go here -->
<div class="container" *ngIf="Output.length">
<div class="row">
<div class="col-sm-2">
<label class="col-form-label-lg"><b> Search History </b></label>
</div>
<div class="col-sm-10">
<div class="btn-group btn-group-toggle" *ngFor="let keyword of Output; let cbIndex = index">
<label class="btn-primary" ngbButtonLabel>
<input type="checkbox"
ngbButton
#kwCheck
(change)="cbInput= kwCheck.checked; hideKW(cbIndex)"
> {{keyword.kw}}
</label>
<span><button class="btn btn-xs btn-danger"
(click)="deleteKW(keyword.kw); $event.stopPropagation()"
[disabled]=kwCheck.checked
[hidden]="kwCheck.checked">×</button>
</span>
</div>
</div>
</div>
</div>
Output.length is an array of JSON responses from the backend.
There are, at least, two ways that you can do so.
Use btn-group. It is pretty well semantic also, except that you use btn class for the input container which is a not button.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="btn-group" role="group" aria-label="Basic example">
<label class="btn d-flex align-items-center bg-primary px-3 mb-0">
<input type="checkbox" class="" id="customCheck1">
<span class="px-1 mb-0" for="customCheck1">Check</span>
</label>
<button type="button" class="btn btn-danger">×</button>
</div>
Use input-group. I prefer this approach because all of the classes have meaning.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="input-group w-auto">
<label class="d-flex align-items-center w-auto bg-primary px-3 mb-0">
<input type="checkbox" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
<span class="pl-2">Check</span>
</label>
<div class="input-group-prepend">
<button class="btn btn-danger" type="button">×</button>
</div>
</div>
Update
In order to hide the checkbox's tick mark, use btn-group-toggle. It is the same method that bootstrap does.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="input-group w-auto ">
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary" style="border-radius: 0;">
<input type="checkbox" autocomplete="off"> Check
</label>
</div>
<div class="input-group-prepend">
<button class="btn-danger btn" id="basic-addon1">×</button>
</div>
</div>
As far as i know, there is no way to reset the border to zero. So, you have to use custom CSS.*
https://codepen.io/anon/pen/qKOdJv?editors=1000
There must be a way to display one form next to another in Bootstrap without having to manually set the CSS to display:inline-block.
I've created a fiddle here.
I've used the form-inline class but that doesnt seem to make much of a difference. Am I missing something?
Here is solution:
Add a class,"pull-left" with form-inline.
Hope this will help.
You could put two forms side by side using the grid system. For example:
<div class="container">
<div class="col-xs-6">
<form class='form-inline'>
<div class="input-group">
<input type="date"class="form-control">
<span class="input-group-btn">
<button type='submit' class="btn btn-secondary" type="button">View</button>
</span>
</div>
</form>
</div>
<div class="col-xs-6">
<form class='form-inline'>
<div class="input-group">
<input type="date"class="form-control">
<span class="input-group-btn">
<button type='submit' class="btn btn-secondary" type="button">View</button>
</span>
</div>
</form>
</div>
See a working example here on JS Fiddle
You should use input-group class, as shown here:innput-group
By applying col class in forms you will get the proper result.
<div class='container'>
<div class='row m-b-20 title'>
<div class='col-sm-6'>
<h1>Test page</h1>
</div>
<div class='col-sm-6 text-right'>
<form action='/error-logs' method='POST' class='input-group pull-left'>
<button type='' name='' class='btn btn-default' alt='' title=''><span class='fa fa-floppy-o'></span>Button 1</button>
</form>
<form action='/error-logs' method='POST' class='input-group pull-right'>
<div class="input-group">
<input type="date" name='fromdate' class="form-control">
<span class="input-group-btn">
<button type='submit' class="btn btn-secondary" type="button">View</button>
</span>
</div>
</form>
</div>
</div>
</div>
i-ve stumbled on this searching for an aswer for similar problem
i-ve solved it by doing this
<form action="cosprocess.php" method="post" style="float: left; padding: 1px;">
Bootstrap 3 was likely used when this question was originally asked. Sangrai's answer of using pull-left may have worked well in 3, but unfortunately it does not in Bootstrap 4 when there are too many form controls to fit onto a single line. The controls don't align well.
The following has worked well for me in Bootstrap 4. It may be risky, though, since the Bootstrap documentation says nothing about having an inline form within an inline form.
<div class="form-inline">
<form class="form-inline">
<!-- First set of form controls go here. -->
</form>
<form class="form-inline">
<!-- Second set of form controls go here. -->
</form>
</div>
FYI - The Bootstrap 4.6 documentation says that pull-left was removed because it was redundant to float-left.
Make the parent div come under a row and have 12 col length for all vw.
Use buttons after input field and put all of them in a single form with class in-line.
fiddle
`
<div class="input-group">
<input type="date" name='fromdate' class="form-control">
<span class="input-group-btn">
<button type='submit' class="btn btn-secondary" type="button">View</button>
<button type='' name='' class='btn btn-default' alt='' title=''><span class='fa fa-floppy-o'></span>Button 1</button>
</span>
</div>
</form>`
I created a Fiddle of my Problem (however in Fiddle it is displayed correctly).
https://jsfiddle.net/rjf8tsbk/1/
As you can see, i have a form with 4 inputs. Whenever i execute this on Webstorm, the website is displayed in chrome but ALL inputs have NO margin (no space). I copied my code to jsfiddle and its looks correct. I wonder if i have an error in webstorm or could this be an error within bootstrap?
This is a picture how it looks like normal :
EDIT (HTML CODE)
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" class="navbar-toggle collapsed">
<span class="sr-only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
LearnYou
</div>
<div class="navbar-collapse collapse">
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<div class="form-group">
<input type="submit" value="Sign in" class="btn btn-success ">
</div>
<div class="form-group">
<input type="button" value="Sign up" class="btn btn-success ">
</div>
</form>
</div>
</div>
</nav>
</body>
EDIT 2:
Looks like the problem comes from "Jade", whenever i execute simple html5 it is rendered correctly but when i use Jade it is displayed wrong.Any Ideas?This my Jade Code:
nav(class="navbar navbar-inverse")
div(class="container")
div(class="navbar-header")
button(type="button" ,class="navbar-toggle collapsed" ,data-toggle="collapse", data-target="#navbar", aria-expanded="false" ,aria-controls="navbar")
span(class="sr-only") Toggle
span(class="icon-bar")
span(class="icon-bar")
span(class="icon-bar")
a(class="navbar-brand" ,href="#") LearnYou
div(id="navbar",class="navbar-collapse collapse")
form(class="navbar-form navbar-right", role="form")
div(class="form-group")
input(type="text", placeholder="Email", class="form-control")
div(class="form-group")
input(type="password", placeholder="Password", class="form-control")
input(type="submit", class="btn btn-success" ,value="Sign in")
input(type="button", class="btn btn-success", value="Sign up")
.form-group {
margin-left:10px;
}
To apply margin you can use mx class
<div class="form-group mx-2">
<input type="text" placeholder="Email" class="form-control">
</div>
for margin right and left in the same time or you can use mr-2 (margin right) and ml-2 (margin left)
Bootstrap v5 dropped form-specific layout classes in favour of existing grid and utility classes. Using legacy classes with v5 will no longer produce the expected styling from previous versions — such as the form-group margins. See the form section in the Migration To v5 guide for more info.
The v5 form examples now use margin utility classes, which should produce the desired result. These classes should provide an easy solution without the need for custom styling rules.
Example:
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
...
</form>
I am using btn-btn-primary class of bootstrap for button styling but i have issue when form is invalid button is disabled with light blue color and grayish background that is not making enough difference with when it is enabled. How can i change background color and font in both cases ?
main.html
<form name="createProcessFormName" id="createProcessForm" role="form" class="form-horizontal">
<div class="panel-body formHeight">
<!--<p class="text-danger" ng-show="createProcessFormName.$dirty && createProcessFormName.$invalid">{{validationMessage}}</p>-->
<div class="row">
<div class="form-group col-md-6 fieldHeight">
<label for="name" class="col-md-5 required">Business
Name:</label>
<div class="col-md-7">
<input type="text" class="form-control" id="name"
ng-model="DTO.LongName" ng-model-options="{updateOn: 'blur'}"
placeholder="Name" maxlength="1024" name="Name"
required>
<p class="text-danger" ng-show="createProcessFormName.processName.$touched && createProcessFormName.processName.$error.required">Business Process Name is required</p>
</div>
</div>
</div>
</form>
<button ng-hide="edit" ng-disabled="createFormName.$invalid" class="btn btn-primary pull-right" type="button" ng-click="submit()">Save</button>
I suggest use ng-class https://docs.angularjs.org/api/ng/directive/ngClass
which will add css class based on condtion.
When createFormName.$invalid is true, it will apply invalidCssClassName
from your css.
When createFormName.$invalid is false, it will remove invalidCssClassName
from your css.
<button ng-hide="edit" ng-disabled="createFormName.$invalid" class="btn btn-primary pull-right" type="button" ng-class="{invalidCssClassName:createFormName.$invalid}" ng-click="submit()">Save</button>
Your best alternative would be to use the :invalid pseudo-class.
Once the form has all the required fields filled out, the form will no longer be invalid and therefore the button should go back to its normal state.
form + button.btn.btn-primary {
background: blue;
}
form:invalid + button.btn.btn-primary {
background: red;
}
<form>
<input type="text" required />
</form>
<button ng-hide="edit" ng-disabled="createFormName.$invalid" class="btn btn-primary pull-right" type="button" ng-click="submit()">Save</button>