Issue when trying to update object - spring-mvc

I'm facing a prblm with updating an object, because when i'm trying to display my object id on updateApp function i got 0 which mean its not the same object on editApp function
Controller
#RequestMapping(value = { "/edtApp-{id}" }, method = RequestMethod.GET)
public String editApp(#PathVariable int id, ModelMap model) {
PIL_P_APPLCTN application = appService.findById(id);
logger.info("=========>"+application.getId()+" "+application.getAPPLCTN_CD());
List<PRM_CONTEXTE> cntxt = cntxtService.findAllOBJECTS();
model.addAttribute("cntxt", cntxt);
model.addAttribute("application", application);
model.addAttribute("edit", true);
model.addAttribute("loggedinuser", getFullName());
return "formApp";
}
#RequestMapping(value = { "/edtApp-{id}" }, method = RequestMethod.POST)
public String updateApp(#Valid #ModelAttribute("application") PIL_P_APPLCTN application, BindingResult result, ModelMap model,
#PathVariable int id) {
logger.info("====**=====>"+application.getId()+" "+application.getAPPLCTN_CD());
logger.info("====**=====>"+application.getId()+" "+application.getAPPLCTN_DS());
logger.info("====**=====>"+application.getId()+" "+application.getAPPLCTN_ID());
logger.info("====**=====>"+application.getId()+" "+application.getDECLG_IDNTFNT_NU());
logger.info("====**=====>"+application.getId()+" "+application.getVersion());
logger.info("====**=====>"+application.getId()+" "+application.getActive());
List<PRM_CONTEXTE> cntxt = cntxtService.findAllOBJECTS();
if (result.hasErrors()) {
model.addAttribute("cntxt", cntxt);
return "formApp";
}
appService.updateOBJECT(application);
return "redirect:/appli";
}
EDIT1
<form:form method="POST" modelAttribute="application" class="form-horizontal form-label-left" >
<form:input type="hidden" path="id" id="id"/>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="active">ACTIVE</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="">
<form:checkbox id="active" path="active" name="active" class="js-switch" />
</div>
<form:errors path="active" cssClass="alerttt"/>
</div>
</div>
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="APPLCTN_CD">APPLCTN CD </label>
<div class="col-md-6 col-sm-6 col-xs-12">
<form:input type="text" path="APPLCTN_CD" id="APPLCTN_CD" name="APPLCTN_CD" class="form-control col-md-7 col-xs-12"/>
</div>
<form:errors path="APPLCTN_CD" cssClass="alerttt" />
</div>
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="APPLCTN_ID">APPLCTN ID
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<form:input type="text" path="APPLCTN_ID" id="APPLCTN_ID" name="APPLCTN_ID" class="form-control col-md-7 col-xs-12"/>
</div>
<form:errors path="APPLCTN_ID" cssClass="alerttt"/>
</div>
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="APPLCTN_DS">APPLCTN DS
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<form:input type="text" path="APPLCTN_DS" id="APPLCTN_DS" name="APPLCTN_DS" class="form-control col-md-7 col-xs-12"/>
</div>
<form:errors path="APPLCTN_DS" cssClass="alerttt"/>
</div>
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="DECLG_IDNTFNT_NU">DECLG IDNTFNT NU
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<form:input type="text" path="DECLG_IDNTFNT_NU" id="DECLG_IDNTFNT_NU" name="DECLG_IDNTFNT_NU" class="form-control col-md-7 col-xs-12"/>
</div>
<form:errors path="DECLG_IDNTFNT_NU" cssClass="alerttt"/>
</div>
<c:if test="${edit}">
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="version">VERSION
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<form:input type="text" path="version" id="version" name="version" class="form-control col-md-7 col-xs-12"/>
</div>
<form:errors path="version" cssClass="alerttt"/>
</div>
</c:if>
<c:if test="${!edit}">
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="version">VERSION
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<form:input disabled="true" type="text" path="version" id="version" name="version" class="form-control col-md-7 col-xs-12"/>
</div>
<form:errors path="version" cssClass="alerttt"/>
</div>
</c:if>
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="CONTEXT">CONTEXT</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<form:select itemValue="id" path="CONTEXTE" itemLabel="CONTEXTE_CD" items="${cntxt}" class="select2_single form-control" tabindex="-1" />
</div>
<form:errors path="CONTEXTE" cssClass="alerttt"/>
</div>
<div class="ln_solid"></div>
<div class="form-group">
<div class="col-md-6 col-md-offset-3">
<c:choose>
<c:when test="${edit}">
<button type="button" class="btn btn-primary" onClick="location.href='<c:url value='/appli' />'">Annuler</button>
<input type="submit" class="btn btn-success" value="Modifier" />
</c:when>
<c:otherwise>
<button type="button" class="btn btn-primary" onClick="location.href='<c:url value='/appli' />'">Annuler</button>
<input type="submit" class="btn btn-success" value="Ajouter"/>
</c:otherwise>
</c:choose>
</div>
</div>
</form:form>
thanks for any advices..

The issue is fixed by changing the name of the pathVariable, because it was the same as the id and by adding setter for id in my Entity
#RequestMapping(value = { "/edtApp-{i}" }, method = RequestMethod.GET)
public String editApp(#PathVariable int i, ModelMap model) {
//....
}
#RequestMapping(value = { "/edtApp-{i}" }, method = RequestMethod.POST)
public String updateApp(#Valid #ModelAttribute("application") {
//....
}

Related

PagedList loses its values because it keeps invoking httpGet method

I have the following code which shows that I am using PagedList to display my search result in a paged order. The problem with it is that at the first result of the search it shows the number of pages related to the search result but once I click on the next page it keeps invoking the method of the page list in the HttpGet rather than keeping browsing the result that came from the the HttpPost method. How can I fix this
Controller:
public ActionResult SearchResult(int? page)
{
var result = from app in db.AllJobModel select app;
return View(result.ToList().ToPagedList(page ?? 1,5));
}
[HttpPost]
public ActionResult SearchResult(string searchTitle, string searchLocation, int? page)
{
setUpApi(searchTitle, searchLocation);
//setUpApi(searchTitle);
var result = db.AllJobModel.Where(a => a.JobTitle.Contains(searchTitle) && a.locationName.Contains(searchLocation));
return View(result.ToList().ToPagedList(page ?? 1, 5));
}
View :
#using (Html.BeginForm("SearchResult", "Home", FormMethod.Post))
{
<div class="job-listing-section content-area">
<div class="container">
<div class="row">
<div class="col-xl-4 col-lg-4 col-md-12">
<div class="sidebar-right">
<!-- Advanced search start -->
<div class="widget-4 advanced-search">
<form method="GET" class="informeson">
<div class="form-group">
<label>Keywords</label>
<input type="text" name="searchTitle" class="form-control selectpicker search-fields" placeholder="Search Keywords">
</div>
<div class="form-group">
<label>Location</label>
<input type="text" name="searchLocation" class="form-control selectpicker search-fields" placeholder="Location">
</div>
<br>
<a class="show-more-options" data-toggle="collapse" data-target="#options-content5">
<i class="fa fa-plus-circle"></i> Date Posted
</a>
<div id="options-content5" class="collapse">
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox15" type="checkbox">
<label for="checkbox15">
Last Hour
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox16" type="checkbox">
<label for="checkbox16">
Last 24 Hours
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox17" type="checkbox">
<label for="checkbox17">
Last 7 Days
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox18" type="checkbox">
<label for="checkbox18">
Last 30 Days
</label>
</div>
<br>
</div>
<a class="show-more-options" data-toggle="collapse" data-target="#options-content">
<i class="fa fa-plus-circle"></i> Offerd Salary
</a>
<div id="options-content" class="collapse">
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox2" type="checkbox">
<label for="checkbox2">
10k - 20k
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox3" type="checkbox">
<label for="checkbox3">
20k - 30k
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox4" type="checkbox">
<label for="checkbox4">
30k - 40k
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox1" type="checkbox">
<label for="checkbox1">
40k - 50k
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox7" type="checkbox">
<label for="checkbox7">
50k - 60k
</label>
</div>
<br>
</div>
<input type="submit" value="Update" class="btn btn-success" />
</form>
</div>
</div>
</div>
<div class="col-xl-8 col-lg-8 col-md-12">
<!-- Option bar start -->
<div class="option-bar d-none d-xl-block d-lg-block d-md-block d-sm-block">
<div class="row">
<div class="col-lg-6 col-md-7 col-sm-7">
<div class="sorting-options2">
<span class="sort">Sort by:</span>
<select class="selectpicker search-fields" name="default-order">
<option>Relevance</option>
<option>Newest</option>
<option>Oldest</option>
<option>Random</option>
</select>
</div>
</div>
<div class="col-lg-6 col-md-5 col-sm-5">
<div class="sorting-options">
<i class="fa fa-th-list"></i>
<i class="fa fa-th-large"></i>
</div>
</div>
</div>
</div>
#foreach (var item in Model)
{
<div class="job-box">
<div class="company-logo">
<img src="~/JobImageUploads/#Html.DisplayFor(modelItem => item.UniqueJobImageName)" alt="logo">
</div>
<div class="description">
<div class="float-left">
<h5 class="title">#item.JobTitle</h5>
<div class="candidate-listing-footer">
<ul>
<li><i class="flaticon-work"></i>#Html.DisplayFor(modelIem => item.maximumSalary)</li>
<li><i class="flaticon-time"></i>#Html.DisplayFor(modelIem => item.maximumSalary)</li>
<li><i class="flaticon-pin"></i>#Html.DisplayFor(modelIem => item.locationName)</li>
</ul>
<h6>Deadline: Jan 31, 2019</h6>
</div>
<div>
#item.JobDescription
</div>
</div>
<div class="div-right">
#Html.ActionLink("Details", "Details", new { id = item.Id }, new { #class = "apply-button" })
Details
<i class="flaticon-heart favourite"></i>
</div>
</div>
</div>
}
</div>
</div>
</div>
</div>
<div class="pagining">
#Html.PagedListPager(Model, page => Url.Action("SearchResult", new
{ page }))
</div>
}
One solution to preserve browsing results would be to pass searchTitle and searchLocation to your SearchResult GET method as well and keep them in the ViewBag to persist search results on paging.
This is because the PagedList helper uses a Url.Action which invokes the the SearchResults GET request.
EDIT: upon further testing, I would do away with the post method all together and change your form to use the GET method for everything. I have updated the code to reflect this approach.
public ActionResult SearchResult(int? page, string searchTitle = null, string searchLocation = null)
{
ViewBag.searchTitle = searchTitle;
ViewBag.searchLocation = searchLocation;
ViewBag.page = page;
var result = new List<Job>(); //replace with AllJobModel class
if(!string.IsNullOrEmpty(ViewBag.searchTitle) || !string.IsNullOrEmpty(ViewBag.searchTitle))
{
setUpApi(searchTitle, searchLocation);
//setUpApi(searchTitle);
result = db.AllJobModel.Where(a => a.JobTitle.Contains(searchTitle) && a.locationName.Contains(searchLocation));
}
else
{
result = from app in db.AllJobModel select app;
}
return View(result.ToList().ToPagedList(page ?? 1, 5));
}
and then in your view, set the values (if any) in the searchTitle and searchLocation text boxes. Also add them to the pagedList helper so the values persist on paging.
Edit: Also gonna need to add a hidden field to persist the page value on searches.
#using (Html.BeginForm("SearchResult", "Home", FormMethod.Get))
{
<input type="hidden" name="page" value="#ViewBag.page">
<div class="job-listing-section content-area">
<div class="container">
<div class="row">
<div class="col-xl-4 col-lg-4 col-md-12">
<div class="sidebar-right">
<!-- Advanced search start -->
<div class="widget-4 advanced-search">
<form method="GET" class="informeson">
<div class="form-group">
<label>Keywords</label>
<input type="text" name="searchTitle" class="form-control selectpicker search-fields" placeholder="Search Keywords" value="#ViewBag.searchTitle">
</div>
<div class="form-group">
<label>Location</label>
<input type="text" name="searchLocation" class="form-control selectpicker search-fields" placeholder="Location" value="#ViewBag.searchLocation">
</div>
<br>
<a class="show-more-options" data-toggle="collapse" data-target="#options-content5">
<i class="fa fa-plus-circle"></i> Date Posted
</a>
<div id="options-content5" class="collapse">
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox15" type="checkbox">
<label for="checkbox15">
Last Hour
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox16" type="checkbox">
<label for="checkbox16">
Last 24 Hours
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox17" type="checkbox">
<label for="checkbox17">
Last 7 Days
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox18" type="checkbox">
<label for="checkbox18">
Last 30 Days
</label>
</div>
<br>
</div>
<a class="show-more-options" data-toggle="collapse" data-target="#options-content">
<i class="fa fa-plus-circle"></i> Offerd Salary
</a>
<div id="options-content" class="collapse">
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox2" type="checkbox">
<label for="checkbox2">
10k - 20k
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox3" type="checkbox">
<label for="checkbox3">
20k - 30k
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox4" type="checkbox">
<label for="checkbox4">
30k - 40k
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox1" type="checkbox">
<label for="checkbox1">
40k - 50k
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox7" type="checkbox">
<label for="checkbox7">
50k - 60k
</label>
</div>
<br>
</div>
<input type="submit" value="Update" class="btn btn-success" />
</form>
</div>
</div>
</div>
<div class="col-xl-8 col-lg-8 col-md-12">
<!-- Option bar start -->
<div class="option-bar d-none d-xl-block d-lg-block d-md-block d-sm-block">
<div class="row">
<div class="col-lg-6 col-md-7 col-sm-7">
<div class="sorting-options2">
<span class="sort">Sort by:</span>
<select class="selectpicker search-fields" name="default-order">
<option>Relevance</option>
<option>Newest</option>
<option>Oldest</option>
<option>Random</option>
</select>
</div>
</div>
<div class="col-lg-6 col-md-5 col-sm-5">
<div class="sorting-options">
<i class="fa fa-th-list"></i>
<i class="fa fa-th-large"></i>
</div>
</div>
</div>
</div>
#foreach (var item in Model)
{
<div class="job-box">
<div class="company-logo">
<img src="~/JobImageUploads/#Html.DisplayFor(modelItem => item.UniqueJobImageName)" alt="logo">
</div>
<div class="description">
<div class="float-left">
<h5 class="title">#item.JobTitle</h5>
<div class="candidate-listing-footer">
<ul>
<li><i class="flaticon-work"></i>#Html.DisplayFor(modelIem => item.maximumSalary)</li>
<li><i class="flaticon-time"></i>#Html.DisplayFor(modelIem => item.maximumSalary)</li>
<li><i class="flaticon-pin"></i>#Html.DisplayFor(modelIem => item.locationName)</li>
</ul>
<h6>Deadline: Jan 31, 2019</h6>
</div>
<div>
#item.JobDescription
</div>
</div>
<div class="div-right">
#Html.ActionLink("Details", "Details", new { id = item.Id }, new { #class = "apply-button" })
Details
<i class="flaticon-heart favourite"></i>
</div>
</div>
</div>
}
</div>
</div>
</div>
</div>
<div class="pagining">
#Html.PagedListPager(Model, page => Url.Action("SearchResult", new
{ page, searchTitle = ViewBag.searchTitle, searchLocation = ViewBag.SearchLocation }))
</div>
}
I know this is a slight change to your original design, so please let me know if you'd like to discuss it further.
Hope this helps you!

Unable to do spring form submission

Hi I am new to spring MVC, and unable to do form submission.
My Jsp Code
<form:form method="POST" action="save" commandName="report">
<div id="collapseOne" class="panel-collapse collapse in"
role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<div class="col-md-3 col-sm-12 col-xs-12 form-group" >
<label><spring:message code="label.report.report_type"/><span class="required">*</span></label>
<form:select id="reportTypeSelect" class="form-control" path="reportType">
<form:options items="${report.reportTypes}"></form:options>
</form:select>
<!-- <select
class="form-control" name="scheduleType">
<option><spring:message code="label.report.chose_type"/></option>
<option><spring:message code="label.report.adhoc"/></option>
<option><spring:message code="label.report.scheduled"/></option>
</select> -->
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">
<spring:message code="label.report.sql_query"/></label>
<div class="col-md-9 col-sm-9 col-xs-12">
<form:textarea class="resizable_textarea form-control"
placeholder="Write Sql Queries to exceute the records ..." name="query" path="reportQuery"></form:textarea>
</div>
</div>
<div class="col-md-3 col-sm-12 col-xs-12 form-group">
<label><spring:message code="label.report.query_name"/><span class="required">*</span></label>
<form:input type="text" placeholder="Query Name" name="reportQueryName" path="reportType" class="form-control"></form:input>
</div>
<div class="col-md-3 col-sm-12 col-xs-12 form-group">
<label><spring:message code="label.report.schedule_date"/><span class="required">*</span></label> <input
id="eventDate"
class="date-picker form-control col-sm-12 col-xs-12"
required="required" type="text">
</div>
<div class="col-md-6 col-sm-12 col-xs-12 form-group">
<label><spring:message code="label.report.emailid"/><span class="required">*</span></label> <form:input
type="text" placeholder="Maximum 4 Email Recepients" name="email" path="emails" class="form-control"></form:input>
</div>
<div class="clearfix"></div>
<div class="form-group">
<div class="button-right">
<!--<button type="submit" class="btn btn-primary">Save</button>-->
<button type="submit" class="btn btn-success"> <spring:message code="label.button.save"/>
</button>
</div>
</div>
</div>
</div>
</form:form>
My Controller
#Controller
public class ReportsViewController {
private static final Logger logger = LoggerFactory.getLogger(ReportsViewController.class);
#RequestMapping(value="/reports",method=RequestMethod.GET)
public String displayReports(ModelMap model) {
logger.info("Start of displayReports()...............");
ReportsViewBean report = new ReportsViewBean();
report.setReportTypes(getReportType());
model.addAttribute("report", report);
logger.info("End of displayReports()...............");
return "reportsView";
}
#RequestMapping(value="/reports/save",method=RequestMethod.POST)
public String updateReports(#ModelAttribute("query") String query) {
System.out.println("username" + query);
return "reportsView";
}
private List<String> getReportType() {
List<String> type = new ArrayList<String>();
type.add("Adhoc");
type.add("Schedule");
return type;
}
}
Your problem is here :
#RequestMapping(value="/reports/save",method=RequestMethod.POST)
public String updateReports(#ModelAttribute("query") String query)
This should be :
#RequestMapping(value="/reports/save",method=RequestMethod.POST)
public String updateReports(#ModelAttribute("report") ReportsViewBean report)
This is the only way to get your model after the POST and then you can retrieve the attribute's values of your model.
You don't add the code of your model but be sure that it has all attributes you put in each path attribute of your form.

Bootstrap spacing in between labels and inputs

What provides the space in between the labels and inputs when using bootstrap?
In the picture above you will see mailing address 1 has a nice space after the input but the rest are pretty close together. What is causing this space? I want it in between all of mine. Just curious of what is causing it.
<div class="row">
<div class="col-lg-12">
<label for="firstname_<cfoutput>#Add#</cfoutput>">Name of <cfoutput>#numberMapping[Peoplecount]#</cfoutput> owner as it appears on driver license:</label>
<div class="form-group">
<div class="col-lg-4">
<cfoutput><input type="text" class="form-control input-sm" name="firstname_#Add#" id="firstname_#Add#" placeholder="First" validateat="onSubmit" validate="noblanks" maxlength="100" required="yes" value="#session.checkout.info["firstname_" & Add]#" /></cfoutput>
</div>
<div class="col-lg-4">
<cfoutput><input type="text" class="form-control input-sm" name="middlename_#Add#" id="middlename_#Add#" placeholder="Middle" maxlength="100" value="#session.checkout.info["middlename_" & Add]#" /></cfoutput>
</div>
<div class="col-lg-4">
<cfoutput><input type="text" class="form-control input-sm" name="lastname_#Add#" id="lastname_#Add#" placeholder="Last" validateat="onSubmit" validate="noblanks" maxlength="100" required="yes" value="#session.checkout.info["lastname_" & Add]#" /></cfoutput>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<label for="birthmonth_<cfoutput>#Add#</cfoutput>">Date of birth:</label>
<div class="form-group">
<div class="col-lg-4">
<cfinclude template="../ddl/birthmonth.cfm">
</div>
<div class="col-lg-4">
<cfinclude template="../ddl/birthday.cfm">
</div>
<div class="col-lg-4">
<cfinclude template="../ddl/birthyear.cfm">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<label for="gender_<cfoutput>#Add#</cfoutput>">Sex:</label>
<div class="form-group">
<div class="col-lg-12">
<cfinclude template="../ddl/gender.cfm">
</div>
</div>
</div>
<div class="col-lg-7">
<label for="driverlicense_<cfoutput>#Add#</cfoutput>" class="labelspace">Driver license number:</label><cfinclude template="../includes/tooltip.cfm">
<div class="form-group">
<div class="col-lg-2">
<cfoutput>
<cfinclude template="../ddl/dlstates.cfm"> <!--- If you need to re-insert into HTML and not use as include, then you have to correct the file location i.e(../../../) --->
</div>
<div class="col-lg-5">
<input type="text" class="form-control input-sm" name="driverlicense_#Add#" id="driverlicense_#Add#" validateat="onSubmit" validate="noblanks" maxlength="50" required="yes" value="#session.checkout.info["driverlicense_" & Add]#" />
</cfoutput>
<span id="result_<cfoutput>#Add#</cfoutput>"></span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<label for="street_<cfoutput>#Add#</cfoutput>">Mailing address 1:</label>
<cfoutput><input type="text" class="form-control input-sm" name="street_#Add#" validateat="onSubmit" validate="maxlength" id="autocomplete#Add#" size="54" maxlength="120" required="yes" onFocus="geolocate()" value="#session.checkout.info["street_" & Add]#" /></cfoutput>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-lg-7">
<label for="m2street_<cfoutput>#Add#</cfoutput>">Mailing address 2:</label>
<cfoutput><input type="text" class="form-control input-sm" name="m2street_#Add#" placeholder="Apartment, suite, unit etc. (optional)" validateat="onSubmit" validate="maxlength" id="route#Add#" size="54" maxlength="120" value="#session.checkout.info["m2street_" & Add]#" /></cfoutput>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-lg-4">
<label for="city_<cfoutput>#Add#</cfoutput>">City:</label>
<cfoutput><input type="text" class="form-control input-sm" name="city_#Add#" validateat="onSubmit" validate="maxlength" id="locality#Add#" size="30" maxlength="50" required="yes" value="#session.checkout.info["city_" & Add]#" /></cfoutput>
</div>
<div class="col-lg-4">
<label for="state_<cfoutput>#Add#</cfoutput>" class="labelspace">State:</label>
<cfoutput><input type="text" class="form-control input-sm" name="state_#Add#" validateat="onSubmit" validate="maxlength" id="administrative_area_level_1#Add#" size="26" maxlength="50" required="yes" value="#session.checkout.info["state_" & Add]#" /></cfoutput>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-2">
<div class="form-group">
<label for="postal_<cfoutput>#Add#</cfoutput>">Zip code:</label>
<cfoutput><input type="text" class="form-control input-sm" name="postal_#Add#" id="postal_code#Add#" size="8" maxlength="12" required="yes" value="#session.checkout.info["postal_" & Add]#" /></cfoutput>
</div>
</div>
</div>
For 'Mailing address 1', your form-group is inside the col-lg-7.

Bootstrap Modal Form: Labels don't right-align/getting widths correct for in-line sections

I have a bootstrap 3 modal form that uses mixed form-horizontal and form-inline classes. I've fiddled around with the column widths but can't seem to get the form just right. There are two problems that I can't seem to get resolved:
The labels don't right align.
The State field is not the correct width.
My Html:
<div class="row">
<div class="col-md-7">
<h2>Agents</h2>
</div>
<div class="col-md-2">
<a id="addAgentButton" href="#" class="btn btn-primary">Add Agent</a>
</div>
</div>
<div id="agentModal" data-bind="with:detailAgent" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body col-md-12">
<form role="form" data-bind="submit: save">
<div class="form-group col-md-12">
<label class="col-md-2 control-label" for="txtAgentName">Name: </label>
<div class="col-md-6"><input class="form-control input-sm" id="txtAgentName" type="text" data-bind="value:Name" /></div>
</div>
<div class="form-group col-md-12">
<label class="col-md-2 control-label" for="txtAgentAddressLine1">Address 1: </label>
<div class="col-md-6">
<input class="form-control input-sm" id="txtAgentAddressLine1" type="text" data-bind="value:Address1" />
</div>
</div>
<div class="form-group col-md-12 form-inline">
<label class="col-md-2 control-label" for="txtAgentCity">City: </label>
<div class="col-md-2">
<input class="form-control input-sm" id="txtAgentCity" type="text" data-bind="value:City" />
</div>
<label class="col-md-2 control-label" for="txtAgentState">State: </label>
<div class="col-md-2">
<select class="form-control input-sm" id="txtAgentState" data-bind="options: $root.states, value: State, optionsCaption:'Choose a state...'"></select>
</div>
<label class="col-md-1 control-label" for="txtAgentZip">Zip: </label>
<div class="col-md-2">
<input type="tel" class="form-control input-sm" id="txtAgentZip" data-bind="value:Zip" />
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
My Javascript to show the modal:
$("#addAgentButton").on("click", function() {
$("#agentModal").modal("show");
});
My CSS:
.modal-dialog {
width: 800px;/* your width */
}
#addAgentButton {
margin-top: 15px;
}
And here's the jsfiddle.
Ok, I hope I understood you correct. Take a look at this fiddle
I had to change your inline-form html part a bit:
<div class="form-group col-md-12">
<label class="control-label col-md-2" for="txtAgentCity">City: </label>
<div class="col-md-2">
<input class="form-control input-sm" id="txtAgentCity" type="text" data-bind="value:City" />
</div>
<label class="col-md-2 control-label text-right" for="txtAgentState">State: </label>
<div class="col-md-2">
<select class="form-control input-sm" id="txtAgentState" data-bind="options: $root.states, value: State, optionsCaption:'Choose a state...'"></select>
</div>
<label class="col-md-2 control-lntZip text-right">Zip: </label>
<div class="col-md-2">
<input type="tel" class="form-control input-sm" id="txtAgentZip" data-bind="value:Zip" />
</div>
</div>
Just add the class .text-right to the label you want to be aligned right.

Bootstrap 3 pull-right not working

I am creating a multi column form using Bootstrap 3.
Here is the first column.
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<form class="form-inline" role="form">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="RecordID" class="col-md-4 nopadding">Record ID</label><div class="col-md-8 nopadding pull-right"><input class="form-control" id="RecordID" type="text"></div>
</div>
<div class="form-group">
<label for="ID" class="col-md-5 nopadding">ID</label><div class="col-md-7 nopadding pull-right"><input class="form-control" id="ID" type="text"></div>
</div>
<div class="form-group nopadding">
<label for="FamilyName" class="col-md-5 nopadding">Family Name</label><div class="col-md-7 nopadding"><input class="form-control" id="FamilyName" type="text" maxlength="30"></div>
</div>
<div class="form-group">
<label for="GivenName" class="col-md-5 nopadding">Given Name</label><div class="col-md-7 nopadding"><input class="form-control" id="GivenName" type="text" maxlength="30"></div>
</div>
<div class="form-group">
<label for="MiddleName" class="col-md-5 nopadding">Middle Name</label><div class="col-md-7 nopadding"><input class="form-control" id="MiddleName" type="text" maxlength="30"></div>
</div>
</div>
//other column
</div>
</form>
</div>
</div>
</div>
However, I got the first column looks like this.
I wanted to align the text fields to the right so I added the "pull-right" class to the div that encapsulated the text field of ID. However, it doesn't work.
Here is the JSFiddle link, you will find the nopadding class in the link, it just remove the padding.
The result box of JSFiddle is not large enough by default, you will need to pull the result box to get the result I got.: JSFiddle link
add class="form-group col-md-12 nopadding" to div which was currently <div class="form-group">
I would suggest something like that:
<div class="container nopadding">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="recordId" class="col-sm-2 control-label">Record Id</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="recordId" placeholder="Record Id">
</div>
</div>
<div class="form-group">
<label for="id" class="col-sm-2 control-label">Id</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="id" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="familyName" class="col-sm-2 control-label">Family Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="familyName" placeholder="Family Name" maxlength="30">
</div>
</div>
<div class="form-group">
<label for="givenName" class="col-sm-2 control-label">Given Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="givenName" placeholder="Given Name" maxlength="30">
</div>
</div>
<div class="form-group">
<label for="middleName" class="col-sm-2 control-label">Middle Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="middleName" placeholder="Middle Name" maxlength="30">
</div>
</div>
</form>
http://jsfiddle.net/y838v/3/
Based on http://getbootstrap.com/css/#forms-horizontal

Resources