Am trying to add the button within the input box using input-group, it not working in IE.
Code Sample :-
<div class="col-md-12">
<div class="form-group row">
<label for="cVal" class="col-md-1 control-label pull-left text-
nowrap">C Id:</label>
<div class="col-md-3 input-group">
<input type="text" class="form-control" id="cVal"
name="cVal" placeholder="C Id" value='<jsp:getProperty
property="c_id" name="adminObj"/>'>
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!
</button>
</span>
</div>
<label for="cVal" class="col-md-1 control-label pull-left
text-nowrap">C Id:</label>
<div class="col-md-3 input-group">
<input type="text" class="form-control" id="cVal"
name="cVal" placeholder="C Id"
value='<jsp:getProperty property="c_id"
name="adminObj"/>'>
<span class="input-group-btn"><button class="btn btn-
default" type="button">Go!</button></span>
</div>
<label for="endDateVal" class="col-md-1 control-label pull-
left text-nowrap">Image Cat Id:</label>
<div class="col-md-3">
<input type="text" class="form-control" id="endDateVal"
name="endDateVal" placeholder="End Date"
value='<jsp:getProperty property="end_valid_date"
name="adminObj"/>'>
</div>
</div>
</div>
Use input-group-btn class instead of input-group-addon.
.input-group-addon class attaches an icon or help text next to the input field.
.input-group-btn attaches a button next to an input field.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="form-group row">
<label for="cVal" class="col-md-1 control-label pull-left text-nowrap">C Id:</label>
<div class="col-md-3 input-group">
<input type="text" class="form-control" id="cVal" name="cVal" placeholder="C Id" value='<jsp:getProperty property="c_id" name="adminObj"/>'>
<span class="input-group-btn"><button class="btn btn-default" type="button">Go!</button></span>
</div>
</div>
</div>
Related
Please, how can I inline a button and an input field without using <form>? I'm trying this way but it's not working.
.inline-button .inline-input{
vertical-align:middle;
}
<div class="row">
<div class="col-md-2">
<div class="form-group mb-2">
<label for="contractNumID" class="sr-only">Contract Number</label>
<input type="text" readonly id="contractNumID" class="form-control-plaintext" mid="staticContract" value="Contract Number"/>
</div>
<div class="form-group mx-sm-3 mb-2">
<label for="contractNumber" class="sr-only">Contract</label>
<input type="text" class="form-control inline-input" id="contractNumber"/>
</div>
<div class="form-group mx-sm-3 mb-2 inline-button" data-inline="true">
<button type="" class="btn btn-primary mb-2">
Populate
</button>
</div>
</div>
</div>
I changed the form to a div and removed the additional CSS. I've also included the Bootstrap library because it appears that's what you're using.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-inline">
<div class="form-group mb-2">
<label for="contractNumID" class="sr-only">Contract Number</label>
<input type="text" readonly id="contractNumID" class="form-control-plaintext" mid="staticContract" value="Contract Number" />
</div>
<div class="form-group mx-sm-3 mb-2">
<label for="contractNumber" class="sr-only">Contract</label>
<input type="text" class="form-control inline-input" id="contractNumber" />
</div>
<button type="" class="btn btn-primary mb-2">Populate</button>
</div>
you can use
.col-md-2 > div {
display: inline;
}
<div class="row">
<div class="col-md-2">
<div class="form-group mb-2">
<label for="contractNumID" class="sr-only">Contract Number</label>
<input type="text" readonly id="contractNumID" class="form-control-plaintext" mid="staticContract" value="Contract Number"/>
</div>
<div class="form-group mx-sm-3 mb-2">
<label for="contractNumber" class="sr-only">Contract</label>
<input type="text" class="form-control inline-input" id="contractNumber"/>
</div>
<div class="form-group mx-sm-3 mb-2 inline-button" data-inline="true">
<button type="" class="btn btn-primary mb-2">
Populate
</button>
</div>
</div>
</div>
I am trying to enlarge the text box with input-lg but it doesn't work, it remained the same. Also, the text overflowed to the next line, trying to make them align into a single line next to the text box.
<div class="modal-body form-horizontal">
<form class="form-horizontal" id="step2">
<div class="form-group row align-items-center justify-content-center">
<label for="name" class="col-sm-2 control-label col text-right" ><b>Email:</b></label>
<div class="col-sm-4">
<input id="name" class="form-control input-lg" type="text" placeholder="Enter Your Email Address" />
</div>
</div>
<div class="form-group row align-items-center justify-content-center">
<label for="name" class="col-sm-2 control-label col text-right" ><b>New Password:</b></label>
<div class="col-sm-4">
<input id="name" class="form-control input-lg" type="text" placeholder="Enter Your New Password" />
</div>
</div>
<div class="form-group row align-items-center justify-content-center">
<label for="name" class="col-sm-2 control-label col text-right" ><b>Role:</b></label>
<div class="col-sm-4">
<select class="form-control input-lg" id="selectStaff">
<option>1</option>
<option>2</option>
</select>
</div>
</div>
<div class="form-group row align-items-center justify-content-center">
<label for="name" class="col-sm-2 control-label col text-right" ><b>Created At:</b></label>
<div class='col-sm-4'>
<input type='text' class="form-control input-lg" id='datetimepicker4' />
</div>
</div>
<div class="form-group row align-items-center justify-content-center">
<label for="name" class="col-sm-2 control-label col text-right" ><b>Updated At:</b></label>
<div class="col-sm-4">
<input id="name" class="form-control input-lg" type="text" placeholder="Enter Your New Password" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="Submit" class="btn btn-primary">Done</button>
</div>
</form>
</div>
Which version of bootstrap you are using? Bootstrap 4 has no input-lg class. I have added the latest bootstrap 4.5.0 on your code.
I modified the col-sm-2 to col-sm-4 and col-sm-4 to col-sm-8 to adjust the width for label and input text.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<div class="modal-body form-horizontal">
<form class="form-horizontal" id="step2">
<div class="form-group row align-items-center justify-content-center">
<label for="name" class="col-sm-4 control-label col text-right"><b>Email:</b></label>
<div class="col-sm-8">
<input id="name" class="form-control input-lg" type="text" placeholder="Enter Your Email Address" />
</div>
</div>
<div class="form-group row align-items-center justify-content-center">
<label for="name" class="col-sm-4 control-label col text-right"><b>New Password:</b></label>
<div class="col-sm-8">
<input id="name" class="form-control input-lg" type="text" placeholder="Enter Your New Password" />
</div>
</div>
<div class="form-group row align-items-center justify-content-center">
<label for="name" class="col-sm-4 control-label col text-right"><b>Role:</b></label>
<div class="col-sm-8">
<select class="form-control input-lg" id="selectStaff">
<option>1</option>
<option>2</option>
</select>
</div>
</div>
<div class="form-group row align-items-center justify-content-center">
<label for="name" class="col-sm-4 control-label col text-right"><b>Created At:</b></label>
<div class='col-sm-8'>
<input type='text' class="form-control input-lg" id='datetimepicker4' />
</div>
</div>
<div class="form-group row align-items-center justify-content-center">
<label for="name" class="col-sm-4 control-label col text-right"><b>Updated At:</b></label>
<div class="col-sm-8">
<input id="name" class="form-control input-lg" type="text" placeholder="Enter Your New Password" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="Submit" class="btn btn-primary">Done</button>
</div>
</form>
</div>
I have two buttons in a bootstrap 4 flex row that refuse to align vertically. I want to align bottom with the inputs on the same row.
The fiddle is here.
The code:
<div class="container">
<div class="card-header">SEIZED BY</div>
<div class="card-body d-flex flex-column">
<div class="row form-group">
<div class="col-md-2">
<label class="control-label control-label-left" for="OC">O/C</label>
<input id="OC" type="text" class="form-control textbox" data-role="text">
</div>
<div class="col-md-3">
<label class="control-label control-label-left" for="SeizedByName">Name</label>
<input id="SeizedByName" type="text" class="form-control textbox" data-role="text">
</div>
<div class="col-md-5">
<label class="control-label control-label-left">Station</label>
<input type="text" class="form-control typeahead" name="query" id="query" placeholder="Type Station" data-provide="typeahead" autcomplete="off">
</div>
<div class="col-md-2">
<button type="button" class="mt-auto btn btn-primary align-item-centre" data-toggle="modal" data-target="#signature">
Signature
</button>
</div>
</div>
<br>
<div class="row form-group">
<div class="col-md-2">
<label class="control-label control-label-left" for="OC">Witness</label>
<input id="Witness" type="text" class="form-control textbox" data-role="text">
</div>
<div class="col-md-3">
<label class="control-label control-label-left" for="SeizedByName">Name</label>
<input id="WitnessName" type="text" class="form-control textbox" data-role="text">
</div>
<div class="col-md-5">
<label class="control-label control-label-left">Station</label>
<input type="text" class="form-control typeahead" name="query" id="query1" placeholder="Type Station" data-provide="typeahead" autcomplete="off">
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#signature">
Witness Signature
</button>
</div>
</div>
</div>
I have tried adding mt-auto to the <button> element as per this Stack Overflow answer but it ad no apparent effect.
d-flex and flex-column are already added to card-body.
I would like the solution to use bootstrap helper utilities. The buttons also touch the inputs on small screens.
Maybe you can use this code align-items-end in each group of form-group:
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="card-header">SEIZED BY</div>
<div class="card-body d-flex flex-column">
<div class="row form-group align-items-end">
<div class="col-md-2">
<label class="control-label control-label-left" for="OC">O/C</label>
<input id="OC" type="text" class="form-control textbox" data-role="text">
</div>
<div class="col-md-3">
<label class="control-label control-label-left" for="SeizedByName">Name</label>
<input id="SeizedByName" type="text" class="form-control textbox" data-role="text">
</div>
<div class="col-md-5">
<label class="control-label control-label-left">Station</label>
<input type="text" class="form-control typeahead" name="query" id="query" placeholder="Type Station" data-provide="typeahead" autcomplete="off">
</div>
<div class="col-md-2 ">
<button type="button" class="mt-auto btn btn-primary align-item-centre" data-toggle="modal" data-target="#signature">
Signature
</button>
</div>
</div>
<br>
<div class="row form-group align-items-end">
<div class="col-md-2">
<label class="control-label control-label-left" for="OCQID">Witness</label>
<input id="Witness" type="text" class="form-control textbox" data-role="text">
</div>
<div class="col-md-3">
<label class="control-label control-label-left" for="SeizedByName">Name</label>
<input id="WitnessName" type="text" class="form-control textbox" data-role="text">
</div>
<div class="col-md-5">
<label class="control-label control-label-left">Station</label>
<input type="text" class="form-control typeahead" name="query" id="query1" placeholder="Type Station" data-provide="typeahead" autcomplete="off">
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#signature">
Witness Signature
</button>
</div>
</div>
</div>
and the result:
You can use .align-items-baseline after using .flex row.
I'm trying to have 2 input fields next to each other in a (bootstrap-css) col-md, but can't seem to get it right.
Here is what I have so far
https://jsfiddle.net/9hrx59bd/
It also doesn't help when I put both input fields in the same input group, by removing this:
...
</div>
<div class="input-group ">
How can I get them next to each other, and use the full width?
You need to make both input-groups a col-md-6, here is the result: link
<div class="row">
<form class="form-inline" id="searchform" action="" accept-charset="utf-8" method="post">
<div class="input-group col-md-6 col-sm-6 col-xs-6">
<input class=" form-control " placeholder="city" id="location" type="text" name="location">
</div>
<div class="input-group col-md-6 col-sm-6 col-xs-6">
<input class="search-query form-control newtab-search-text" placeholder="keywords or company name" id="kw" type="text" name="job">
<span class="input-group-btn">
<button class="btn btn-danger" type="submit">
<span class=" glyphicon glyphicon-search" ></span>
</button>
</span>
</div>
</form>
</div>
Edit
I made it work on smaller screens by adding col-sm-6 and col-xs-6 aswell
Bootstrap Inline Form
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<form id="searchform" action="" accept-charset="utf-8" method="post">
<div class="col-md-6">
<div class=" form-group">
<input class="form-control" placeholder="city" id="location" type="text" name="location">
</div>
</div>
<div class="col-md-6">
<div class="form-group input-group">
<input class="search-query form-control newtab-search-text" placeholder="keywords or company name" id="kw" type="text" name="job">
<span class="input-group-btn">
<button class="btn btn-danger" type="submit">
<span class=" glyphicon glyphicon-search" ></span>
</button>
</span>
</div>
</div>
</form>
</div>
</div>
I think you just want a form-control and an input-group.
<div class="row">
<div class="col-md-6">
<form class="form-inline" id="searchform" action="" accept-charset="utf-8" method="post">
<input class="form-control" placeholder="city" id="location" type="text" name="location">
<div class="input-group">
<input class="search-query form-control newtab-search-text" placeholder="keywords or company name" id="kw" type="text" name="job">
<span class="input-group-btn">
<button class="btn btn-danger" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</span>
</div>
</form>
</div>
</div>
Demo
EDIT: Another option is to use the grid columns, but remove the padding:
.pr-0{
padding-right:0;
}
.pl-0{
padding-left:0;
}
<form class="row" id="searchform" action="" accept-charset="utf-8" method="post">
<div class="col-xs-6 col-sm-3 pr-0">
<input class="form-control" placeholder="city" id="location" type="text" name="location">
</div>
<div class="col-xs-6 col-sm-3 pl-0">
<div class="input-group">
<input class="search-query form-control newtab-search-text" placeholder="keywords or company name" id="kw" type="text" name="job">
<span class="input-group-btn">
<button class="btn btn-danger" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</span>
</div>
</div>
</form>
See the 2nd item in the demo
Assuming you want the input next to each other, refer code:
Please view the results in full page view.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form action="" class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Password">
</div>
</form>
I have a problem with <div>, as you can see :
firefox display:
chrome display:
html structure :
<div class="row">
<div class="form-group col-xs-12 col-sm-4">
<input type="text" name="from_area" class="form-control input-lg typeahead typeahead-area-tariff" id="from_area" placeholder="Origin" />
</div>
<div class="form-group col-xs-12 col-sm-4">
<input type="text" name="to_area" class="form-control input-lg typeahead typeahead-area-tariff" id="to_area" placeholder="Destination" />
</div>
<div class="form-group col-xs-12 col-sm-4">
<div class="input-group">
<input type="number" name="weight" class="form-control input-lg" id="weight" placeholder="Weight" />
<span class="input-group-addon">Kg</span>
</div>
</div>
<div class="form-group col-xs-12 col-sm-4">
<div class="input-group">
<input type="number" name="length" class="form-control input-lg" id="length" placeholder="Length" />
<span class="input-group-addon">Cm</span>
</div>
</div>
<div class="form-group col-xs-12 col-sm-4">
<div class="input-group">
<input type="number" name="width" class="form-control input-lg" id="width" placeholder="Width" />
<span class="input-group-addon">Cm</span>
</div>
</div>
<div class="form-group col-xs-12 col-sm-4">
<div class="input-group">
<input type="number" name="height" class="form-control input-lg" id="height" placeholder="Height" />
<span class="input-group-addon">Cm</span>
</div>
</div>
<div class="form-group col-xs-12 col-sm-4 col-sm-offset-4 text-center">
<button type="submit" class="btn btn-primary btn-lg btn-block" tabindex="7"><span class="fi flaticon-search"></span> Search </button>
</div>
</div>
I am using <div class="col-sm-4"> but when I see it on firefox, input text "Width" breaks to a new line. Please help :(
[SOLVED] Added <div class="clearfix"></div> after the third input text.
Reference