I am Trying to Create a simple basic form , I am unable to achieve Horizontal layout when added input-append class to the form , it kicks the second input box to be displayed in the same line ? wondering where the CODE ERROR is ? please suggest what is causing issue
<body>
<div class="container">
<hr/>
<form class="form-horizontal">
<!--<span class="offset2">Sign Into the Email</span>-->
<div class="control-group">
<div class="controls"><span>Welcome to My Email</span></div>
</div>
<div class="control-group input-append">
<label for="emailid" class="control-label">Email id</label>
<div class="controls">
<input type="text" />
<span class="add-on">#</span>
</div>
</div>
<div class="control-group input-append">
<label for="passwd" class="control-label">Password</label>
<div class="controls">
<input type="password" />
<span class="add-on">***</span>
</div>
</div>
<div class="control-group">
<div class="controls" >
<label class="checkbox">
<input type="checkbox" />Remember Me
</label>
<button class="btn">Sign In</button>
</div>
</div>
</form>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</body>
I would just put the input-append in an inner div
<div class="control-group">
<div class="input-append">
<label for="emailid" class="control-label">Email id</label>
<div class="controls">
<input type="text" /> <span class="add-on">#</span>
</div>
</div>
</div>
Check this fiddle
.input-append has a display: inline-block Hence the issue
Related
I have Select2 in wicket, and I want to add form validation on it. I use atributte required, but it doesnt work. I want that select2 after unsuccessful validation have red background, or at least red border. When I try to submit form with required attribute, It dont do any validation. Select where I try to do validation is origin country. Can someone give me a point, how to achive this behaiviour? Thanks for any help.
<wicket:head xmlns:wicket="http://wicket.apache.org/">
<style>
/*.form-group .form-control {*/
/* padding: 0;*/
/* height: 33px;*/
/* }*/
.p-0 {
padding: 0px !important;
height: 30px;
}
</style>
</wicket:head>
<wicket:panel xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.apache.org/">
<div class="col-xs-12">
<div class="col-xs-12">
<div class="form-group">
<div class="col-sm-3">
<input type="submit" value="Request" class="btn btn-danger"/>
</div>
<div class="col-sm-3">
<label for="quotationId" wicket:id="quotationIdLabel"></label>
<div>
<input wicket:id="quotationId" type="text" size="20"/>
</div>
</div>
<div class="col-sm-3">
<label for="product" wicket:id="productLabel"></label>
<div>
<select class="form-control" wicket:id="product"/>
</div>
</div>
<div class="col-sm-3">
<label for="contract" wicket:id="contractLabel"></label>
<div>
<input type="hidden" wicket:id="contract"/>
</div>
</div>
<div class="col-sm-3" style="padding: 0">
<label for="customer" wicket:id="customerLabel"></label>
<div>
<input class="form-control p-0" type="hidden"
wicket:id="customer" />
</div>
</div>
<div class="col-sm-3">
<label for="serviceLevel" wicket:id="serviceLevelLabel"></label>
<div>
<select class="form-control" wicket:id="serviceLevel"/>
</div>
</div>
<div class="col-sm-3">
<label for="equipmentType" wicket:id="equipmentTypeLabel"></label>
<div>
<input class="form-control p-0" type="hidden" wicket:id="equipmentType"/>
</div>
</div>
<div class="col-sm-3">
<label for="commodity" wicket:id="commodityLabel"></label>
<div>
<select class="form-control" wicket:id="commodity"/>
</div>
</div>
<span class="col-sm-3">
<label for="originCountry" wicket:id="originCountryLabel"></label>
<div>
<input type="hidden" wicket:id="originCountry" required/>
</div>
</span>
<div class="col-sm-3">
<label for="originDgfStation" wicket:id="originDgfStationLabel"></label>
<div>
<input type="hidden" wicket:id="originDgfStation"/>
</div>
</div>
<div class="col-sm-3">
<label for="destinationCountry" wicket:id="destinationCountryLabel"></label>
<div>
<input type="hidden" wicket:id="destinationCountry"/>
</div>
</div>
<div class="col-sm-3">
<label for="destinationDgfStation" wicket:id="destinationDgfStationLabel"></label>
<div>
<input type="hidden" wicket:id="destinationDgfStation"/>
</div>
</div>
<div class="col-sm-3">
<label for="shippingTerms" wicket:id="shippingTermsLabel"></label>
<div>
<select class="form-control" wicket:id="shippingTerms"/>
</div>
</div>
</div>
<br/>
</div>
</div>
<div class="clearfix"></div>
</wicket:panel>
I think the problem is with hidden fields which can not be declared as required in HTML. You might need to use some hack to use a regular text field and hide it with CSS. See this answer: make hidden field required
I am using bootstrap 4, jQuery 3.3.1 and datepicker (http://www.eyecon.ro/bootstrap-datepicker/)
I have three issues:
The Calendar icon is not the size of the input box
When submit without selecting the date, bootstrap validation message not working.
Auto close is not working.
$(document).ready(function()
{
$('#depositeDate').datepicker({
"setDate": new Date(),
"autoclose": true
});
})
<div class="form-group row">
<label for="depositeDate" class="col-sm-4 col-form-label col-form-label-lg">Deposit Date</label>
<div class="col-sm-2 input-group date">
<input type="text" class=" text-input form-control" id ="depositeDate" placeholder="MM/DD/YYYY">
<div class="input-group-addon">
<i class="fas fa-calendar-alt fa-3x" style="color:RED"></i> </div>
<div class="invalid-feedback">
Please enter a valid Order Number.
</div>
</div>
</div>
The Calendar icon is not the size of the input box
The markup for input group addon is changed in Bootstrap 4.0 stable
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">#example.com</span>
</div>
</div>
Your code should be
<div class="input-group date" >
<input type="text" class="form-control" id ="depositeDate" placeholder="MM/DD/YYYY">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2"><span class="fa fa-calendar"></span></span>
</div>
</div>
3.Auto close is not working.
I don't see setting like "autoclose": true , we should explicitly call to close the datepicker.
.on('changeDate', function(ev) {
checkout.hide();
})
<div class="form-group row justify-content-center align-items-center">
<label for="depositeDate" class="col-sm-3 col-form-label">Deposit Date</label>
<div class="col-sm-3 input-group date" >
<input type="text" class="text-input form-control" id ="depositeDate" placeholder="MM/DD/YYYY">
<div class="input-group-addon" style="cursor: pointer;" onclick="$('#depositeDate').focus();">
<i class="fas fa-calendar-alt fa-2x"></i>
</div>
</div>
</div>
this code will do:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<br>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<label for="Order number">Order number</label>
<input type="text" id="Order number" >
</div>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<label for="male">Deposit Date</label>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<script>$(function() {
$('#datetimepicker1').datetimepicker();
});</script>
check out the fiddle:https://jsfiddle.net/rqy7L2do/
I am using Bootstrap 3, what I want cover whole form on full page like attached image, in the image I am using kendo UI popup window. pop up window width is 1000px
Here is my HTML code,
<section class="container-fluid padding-rl">
<div class="row">
<div class="col-sm-3">
<div class="profile-box">
<img class="profile-picture" src="" alt="" />
</div>
</div>
<div class="col-sm-8">
<div class="row">
<div class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-1">First Name:</label>
<div class="col-sm-3">
<input type="text" class="form-control" data-bind="value: selectedRecord.FirstName" />
</div>
<label class="control-label col-sm-1 col-sm-offset-1">Last Name:</label>
<div class="col-sm-3">
<input type="text" class="form-control" data-bind="value: selectedRecord.LastName" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-1">Email:</label>
<div class="col-sm-3" style="">
<input type="text" class="form-control" data-bind="value: selectedRecord.Email" />
</div>
<label class="control-label col-sm-1 col-sm-offset-1 ">Mobile:</label>
<div class="col-sm-3" style="">
<input type="text" class="form-control" data-bind="value: selectedRecord.Mobile" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-1">Phone:</label>
<div class="col-sm-3" style="">
<input type="text" class="form-control" data-bind="value: selectedRecord.OfficePhone" />
</div>
<label class="control-label col-sm-1 col-sm-offset-1 ">Account:</label>
<div class="col-sm-3" style="">
<input type="text" id="txtContactAccount" class="form-control" data-bind="value: selectedRecord.ContactAccount" />
</div>
</div>
</div>
</div>
</div>
</div>
Attached image
Thank you in advance
Unfortunately I don't see your code in your question. From the sample picture I'm guessing what you are looking to do is create a modal?
Take a look at bootstrap's documentation here:
Bootstrap JavaScript
Scroll down a bit to the part about modals, they have nice samples there too.
I would like to design a two column horizontal form using Bootstrap V2.3.2. The following is the html:
<div id='content' class='row-fluid'>
<div class='span12 main'>
<h2>Product Data</h2>
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<label for="inputAppName" class="control-label col-xs-2">Application Name </label>
<div class="col-xs-10">
<input type="text" class="form-control" id="app_name" name="app_name" placeholder="Application Name">
</div>
</div>
<div style="height:10px;"></div>
<div class="form-group">
<label for="inputAppDesc" class="control-label col-xs-2">Description </label>
<div class="col-xs-10">
<textarea class="form-control" id="app_desc" name="app_desc" rows="4" placeholder="Application Description"></textarea>
</div>
</div>
</fieldset>
</form>
</div>
</div>
I find that the width of the input-text and textarea on the second column are smaller. I would like to extend them to take up the rest space. I tried to use the "input-block-level" class but the input-text and textarea will then not be on the same row as the label.
Can anyone help?
Thanks in advance!
The first thing to do is to don't use the Bootstrap 3 class...
Try Bootstrap 2 instead... Replace col-xx-[1-12] by span[1-12]
Your code with input in span11 :
http://www.bootply.com/119374
<div id="content" class="row-fluid">
<div class="span12 main">
<h2>Product Data</h2>
<form class="form-horizontal">
<fieldset>
<div class="form-group row-fluid">
<label for="inputAppName" class="control-label span2">Application Name </label>
<div class="span10">
<input type="text" class="form-control span11" id="app_name" name="app_name" placeholder="Application Name">
</div>
</div>
<div style="height:10px;">
</div>
<div class="form-group row-fluid">
<label for="inputAppDesc" class="control-label span2">Description </label>
<div class="span10">
<textarea class="form-control span11" id="app_desc" name="app_desc" rows="4" placeholder="Application Description"></textarea>
</div>
</div>
</fieldset>
</form>
</div>
</div>
try this
<form>
<div class="row">
<div class="col-xs-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<input type="text" class="form-control">
</div>
</div>
<div class="col-xs-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio">
</span>
<input type="text" class="form-control">
</div>
</div>
</div>
</form>
I have researched stackoverflow to make a drop-down button with login form stay open when completing the form. Right now as soon as you try to type, the login form closes. Here is my code:
<div class="top-nav">
<div class="btn-group pull-right dropdown-toggle"> <a class="btn btn-login" href="#"><i class="icon-user icon-white"></i> Login</a> <a class="btn btn-login dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<form class="form-horizontal dropdown-menu">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox">
Remember me </label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>
At the end of my code just before the body tag I entered this script:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script language="javascript">
$('.dropdown-toggle').dropdown();
$('.dropdown-menu').find('form').click(function (e) {
e.stopPropagation();
});
</script>
I was able to reproduce the issue using your code. Removing .find('form') from the JavaScript fixed the problem.