I am selecting date from calendar in two places in the same page,But the calendar id is dynamic and not able to pick the static value suggestion please how to use in selenium webdriver
<p-calendar id="effectiveFromDate" class="ng-touched ng-dirty ng-valid" inputstyleclass="form-control" name="effectiveFromDate" placeholder="MM/DD/YYYY" required="">
<!--template bindings={}-->
<span class="ui-calendar">
<input id="dp1479794880786" class="form-control hasDatepicker ui-inputtext ui-widget ui-state-default ui-corner-all ui-state-hover" placeholder="MM/DD/YYYY" readonly="" type="text"/>
<!--template bindings={}-->
</span>
<p-calendar id="effectiveToDate" class="ng-pristine ng-valid ng-touched" inputstyleclass="form-control" name="effectiveToDate" placeholder="MM/DD/YYYY">
<!--template bindings={}-->
<span class="ui-calendar">
<input id="dp1479794880787" class="form-control hasDatepicker ui-inputtext ui-widget ui-state-default ui-corner-all ui-state-hover" placeholder="MM/DD/YYYY" readonly="" type="text"/>
<!--template bindings={}-->
</span>
I am using the below code but not able to use in the same page
driver.findElement(By.className("ui-calendar")).click();
<p-accordiontab id="invOverviewTab" header="Invoice Overview" styleclass="margin-b-10">
<div class="ui-accordion-header ui-state-default ui-corner-all ui-state-active">
<div class="ui-accordion-content-wrapper" style="">
<div class="ui-accordion-content ui-widget-content">
<div class="col-md-6 col-sm-6 col-xs-12 margin-t-10 margin-b-10">
<div class="form-group">
<div class="form-group">
<div class="form-group">
<div class="form-group">
<div class="form-group">
<div class="item form-group">
<div class="item form-group invoice-config marginB">
<div class="form-group">
<label for="effectiveFromDate">
<p-calendar id="effectiveFromDate" class="ng-touched ng-dirty ng-valid" inputstyleclass="form-control" name="effectiveFromDate" placeholder="MM/DD/YYYY" required="">
<!--template bindings={}-->
<span class="ui-calendar">
<input id="dp1479805294453" class="form-control hasDatepicker ui-inputtext ui-widget ui-state-default ui-corner-all ui-state-hover" placeholder="MM/DD/YYYY" readonly="" type="text"/>
<!--template bindings={}-->
</span>
<!--template bindings={}-->
</p-calendar>
<p class="text-danger" hidden="">Effective From Date is required</p>
</div>
<!--template bindings={}-->
<div class="form-group">
</div>
<div class="col-md-6 col-sm-6 col-xs-12 margin-t-10 margin-b-10">
<div class="col-md-12 col-sm-12 col-xs-12 form-group text-right">
</div>
</div>
</p-accordiontab>
<p-accordiontab id="invOverviewTab" header="Invoice Overview" styleclass="margin-b-10">
<div class="ui-accordion-header ui-state-default ui-corner-all ui-state-active">
<div class="ui-accordion-content-wrapper" style="">
<div class="ui-accordion-content ui-widget-content">
<div class="col-md-6 col-sm-6 col-xs-12 margin-t-10 margin-b-10">
<div class="form-group">
<div class="form-group">
<div class="form-group">
<div class="form-group">
<div class="form-group">
<div class="item form-group">
<div class="item form-group invoice-config marginB">
<div class="form-group">
<label for="effectiveFromDate">
<p-calendar id="effectiveFromDate" class="ng-touched ng-dirty ng-valid" inputstyleclass="form-control" name="effectiveFromDate" placeholder="MM/DD/YYYY" required="">
<!--template bindings={}-->
<span class="ui-calendar">
<input id="dp1479805294453" class="form-control hasDatepicker ui-inputtext ui-widget ui-state-default ui-corner-all ui-state-hover" placeholder="MM/DD/YYYY" readonly="" type="text"/>
<!--template bindings={}-->
</span>
<!--template bindings={}-->
</p-calendar>
<p class="text-danger" hidden="">Effective From Date is required</p>
</div>
<!--template bindings={}-->
<div class="form-group">
</div>
<div class="col-md-6 col-sm-6 col-xs-12 margin-t-10 margin-b-10">
<div class="col-md-12 col-sm-12 col-xs-12 form-group text-right">
</div>
</div>
</p-accordiontab>
<p-accordion id="accMenu" class="custom-theme-accordion">
<div class="ui-accordion ui-widget ui-helper-reset">
<p-accordiontab id="billClientTab" header="Bill To Client Information">
<div class="row">
<p-accordiontab id="invOverviewTab" header="Invoice Overview" styleclass="margin-b-10">
<div class="ui-accordion-header ui-state-default ui-corner-all ui-state-active">
<div class="ui-accordion-content-wrapper" style="">
<div class="ui-accordion-content ui-widget-content">
<div class="col-md-6 col-sm-6 col-xs-12 margin-t-10 margin-b-10">
<div class="form-group">
<div class="form-group">
<div class="form-group">
<div class="form-group">
<div class="form-group">
<div class="item form-group">
<div class="item form-group invoice-config marginB">
<div class="form-group">
<!--template bindings={}-->
<div class="form-group">
<label for="effectiveToDate">Effective To Date</label>
<p-calendar id="effectiveToDate" class="ng-untouched ng-pristine ng-valid" inputstyleclass="form-control" name="effectiveToDate" placeholder="MM/DD/YYYY">
<!--template bindings={}-->
<span class="ui-calendar">
<input id="dp1479805294454" class="form-control hasDatepicker ui-inputtext ui-widget ui-state-default ui-corner-all ui-state-hover" placeholder="MM/DD/YYYY" readonly="" type="text"/>
<!--template bindings={}-->
</span>
<!--template bindings={}-->
</p-calendar>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 margin-t-10 margin-b-10">
<div class="col-md-12 col-sm-12 col-xs-12 form-group text-right">
</div>
</div>
</p-accordiontab>
if span tag is child element of p-calender tag:
If you want to click effectiveFromDate then use the following XPATH:
driver.findElement(By.xpath("//*[#id='effectiveFromDate']/span")).click();
If you want to click on effectveToDate:
driver.findElement(By.xpath("//*[#id='effectiveToDate']/span")).click();
Instead of clicking the calender, you can directly enter the Date in FromDate (MM/DD/YYYY format) by identifying input tag as follows:
driver.findElement(By.xpath("//*[#id='effectiveFromDate']/span/input")).sendKeys("01/01/1990");
Similarly for To Date
driver.findElement(By.xpath("//*[#id='effectiveToDate']/span/input")).sendKeys("02/01/1990");
Related
Having an issue with the bootstrap grid columns not lining up when using radio buttons in the grid. essentially all the columns should line up exactly but they are not. The example has virtually no styling but as you can see the columns are not lining up as you would expect. Goal is to make the column and rows dynamic so user can add and edit new column and rows.
You need to expand the snippet to see the issue.
<!DOCTYPE html>
<html>
<head>
<title>Radio Bootstrap Example</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.row {
outline: 1px dotted rgba(0, 0, 0, 0.25);
}
[class*="col-md"] {
outline: 1px dotted rgba(0, 0, 0, 0.5);
}
.textAlignCenter {
text-align: center;
}
label {
padding: 4px;
}
</style>
</head>
<body>
<form novalidate="novalidate">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Same/Different Example</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2 col-md-offset-4 textAlignCenter">
<div class="form-group">
<label class="">Very <br>Disinterested </label>
</div>
</div>
<div class="col-md-2 textAlignCenter">
<div class="form-group">
<label class="">Somewhat <br>Disinterested </label>
</div>
</div>
<div class="col-md-2 textAlignCenter">
<div class="form-group">
<label class="">Somewhat <br>Interested </label>
</div>
</div>
<div class="col-md-2 textAlignCenter">
<div class="form-group">
<label class="">Very <br>Interested </label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group ">
<label class="col-md-4">Travel</label>
<div>
<div class="form-check col-md-2 textAlignCenter">
<input type="radio" value="Very Disinterested">
</div>
<div class="form-check col-md-2 textAlignCenter">
<input type="radio" value="Somewhat Disinterested">
</div>
<div class="form-check col-md-2 textAlignCenter">
<input type="radio" value="Somewhat Interested">
</div>
<div class="form-check col-md-2 textAlignCenter">
<input type="radio" value="Very Interested">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group ">
<label class=" col-md-4">Fashion</label>
<div class="cbl -radio">
<div class=" form-check textAlignCenter col-md-2">
<input type="radio" value="Very Disinterested">
</div>
<div class=" form-check textAlignCenter col-md-2">
<input type="radio" value="Somewhat Disinterested">
</div>
<div class=" form-check textAlignCenter col-md-2">
<input type="radio" value="Somewhat Interested">
</div>
<div class=" form-check textAlignCenter col-md-2">
<input type="radio" value="Very Interested">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group ">
<label class=" col-md-4">Health & Fitness</label>
<div class="cbl -radio">
<div class=" form-check textAlignCenter col-md-2">
<input type="radio" value="Very Disinterested">
</div>
<div class=" form-check textAlignCenter col-md-2">
<input type="radio" value="Somewhat Disinterested">
</div>
<div class=" form-check textAlignCenter col-md-2">
<input type="radio" value="Somewhat Interested">
</div>
<div class=" form-check textAlignCenter col-md-2">
<input type="radio" value="Very Interested">
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Use Bootstrap table to fix align.
Or replace the code using this code.
<!DOCTYPE html>
<html>
<head>
<title>Radio Boostrap Example</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<style>
table,th,tr,td,thead,tbody {
border: 1px dotted #ccc;
}
</style>
<body>
<div class="container py-5">
<form novalidate="novalidate">
<h4 class="">Same/Different Example</h4>
<table class="table">
<thead>
<tr>
<th scope="col"></th>
<th scope="col" class="text-center">Very <br>Disinterested</th>
<th scope="col" class="text-center">Somewhat <br>Disinterested</th>
<th scope="col" class="text-center">Somewhat <br>Interested</th>
<th scope="col" class="text-center">Very <br>Interested</th>
</tr>
</thead>
<tbody class="text-center">
<tr>
<td>Travel</td>
<td><input type="radio" name="travel" value="Very Disinterested"></td>
<td><input type="radio" name="travel" value="Somewhat Disinterested"></td>
<td><input type="radio" name="travel" value="Somewhat Interested"></td>
<td><input type="radio" name="travel" value="Very Interested"></td>
</tr>
<tr>
<td>Fashion</td>
<td><input type="radio" name="fashion" value="Very Disinterested"></td>
<td><input type="radio" name="fashion" value="Somewhat Disinterested"></td>
<td><input type="radio" name="fashion" value="Somewhat Interested"></td>
<td><input type="radio" name="fashion" value="Very Interested"></td>
</tr>
<tr>
<td>Health & Fitness</td>
<td><input type="radio" name="health" value="Very Disinterested"></td>
<td><input type="radio" name="health" value="Somewhat Disinterested"></td>
<td><input type="radio" name="health" value="Somewhat Interested"></td>
<td><input type="radio" name="health" value="Very Interested"></td>
</tr>
</tbody>
</table>
</form>
</div>
</body>
</html>
Think I found a suitable solution for radio and check input specific row/columns. For those specific rows I eliminated the gutters on the cols using the following CSS:
.no-gutters > [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Radio Boostrap Example</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.row {
outline: 1px dotted rgba(0, 0, 0, 0.25);
}
[class*="col-md"] {
outline: 1px dotted rgba(0, 0, 0, 0.5);
}
.textAlignCenter {
text-align: center;
}
.no-gutters > [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
label {
padding: 4px;
}
</style>
</head>
<body>
<form class="container-fluid" novalidate="novalidate">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Same/Different Example</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 textAlignCenter">
<div class="form-group">
<label class=""></label>
</div>
</div>
<div class="col-md-2 textAlignCenter">
<div class="form-group">
<label class="">Very <br>Disinterested </label>
</div>
</div>
<div class="col-md-2 textAlignCenter">
<div class="form-group">
<label class="">Somewhat <br>Disinterested </label>
</div>
</div>
<div class="col-md-2 textAlignCenter">
<div class="form-group">
<label class="">Somewhat <br>Interested </label>
</div>
</div>
<div class="col-md-2 textAlignCenter">
<div class="form-group">
<label class="">Very <br>Interested </label>
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-md-12">
<div class="form-group ">
<label class="col-md-4">Travel</label>
<div>
<div class="form-check col-md-2 textAlignCenter">
<input type="radio" value="Very Disinterested" onclick="socratesProcess.ToggleRadioSelection(event,'Dataset.Scratch.Text6')">
</div>
<div class="form-check col-md-2 textAlignCenter">
<input type="radio" value="Somewhat Disinterested" onclick="socratesProcess.ToggleRadioSelection(event,'Dataset.Scratch.Text6')">
</div>
<div class="form-check col-md-2 textAlignCenter">
<input type="radio" value="Somewhat Interested" onclick="socratesProcess.ToggleRadioSelection(event,'Dataset.Scratch.Text6')">
</div>
<div class="form-check col-md-2 textAlignCenter">
<input type="radio" value="Very Interested" onclick="socratesProcess.ToggleRadioSelection(event,'Dataset.Scratch.Text6')">
</div>
</div>
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-md-12">
<div class="form-group ">
<label class=" col-md-4">Fashion</label>
<div class="cbl -radio">
<div class=" form-check textAlignCenter col-md-2">
<input type="radio" value="Very Disinterested">
</div>
<div class=" form-check textAlignCenter col-md-2">
<input type="radio" value="Somewhat Disinterested">
</div>
<div class=" form-check textAlignCenter col-md-2">
<input type="radio" value="Somewhat Interested">
</div>
<div class=" form-check textAlignCenter col-md-2">
<input type="radio" value="Very Interested">
</div>
</div>
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-md-12">
<div class="form-group ">
<label class=" col-md-4">Health & Fitness</label>
<div class="cbl -radio">
<div class=" form-check textAlignCenter col-md-2">
<input type="radio" value="Very Disinterested">
</div>
<div class=" form-check textAlignCenter col-md-2">
<input type="radio" value="Somewhat Disinterested">
</div>
<div class=" form-check textAlignCenter col-md-2">
<input type="radio" value="Somewhat Interested">
</div>
<div class=" form-check textAlignCenter col-md-2">
<input type="radio" value="Very Interested">
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
I would like the flag in the far right column to be vertically in the middle of the "row"
Looking for bootstrap 3 solution
Here is my code:
<div class="panel panel-primary" id="panelid">
<div class="panel-heading">
<h1 class="panel-title">Panel Title <i class="fa fa-info-circle fa-fw" aria-hidden="true" style="cursor:pointer;"></i> </h1>
</div>
<div class="panel-body">
<div class="well well-sm ">
<div class="row form-row">
<div class="form-group col-xs-11 col-sm-4 col-lg-3">
<label class="field-label control-label" id="Field1_Label" for="Field1">Field 1</label>
<sup><i title="A Required Field" class="fa fa-fw fa-asterisk text-danger" aria-hidden="true" style="cursor:default" aria-label="A Required Field"></i></sup>
<select name="Field1" class="form-control input-sm" id="Field1" onchange="" data-required="true" data-field-id="1">
<option value=""> </option>
<option value="1">Yes</option>
<option selected="selected" value="0">No</option>
</select>
</div>
<div class="form-group col-xs-11 col-sm-7 col-lg-8">
<label class="field-label control-label" id="Comments_desc_Label" for="comments">Field 1 Comments</label>
<textarea name="comments" class="form-control " id="comments" placeholder="Enter Comments" rows="3" cols="20" data-required="false"></textarea>
</div>
<div class="col-xs-1">
<i class="text-danger fa fa-flag fa-2x fa-fw"></i>
</div>
</div>
</div>
</div>
</div>
This is it:
<div class="panel panel-primary" id="panelid">
<div class="panel-heading">
<h1 class="panel-title">Panel Title <i class="fa fa-info-circle fa-fw" aria-hidden="true" style="cursor:pointer;"></i> </h1>
</div>
<div class="panel-body">
<div class="well well-sm ">
<div class="container">
<div class="row>">
<div class="form-group">
<div class="col-xs-11 col-sm-4 col-lg-3">
<label class="field-label control-label" id="Field1_Label" for="Field1">Field
1</label>
<sup><i title="A Required Field" class="fa fa-fw fa-asterisk text-danger"
aria-hidden="true" style="cursor:default"
aria-label="A Required Field"></i></sup>
<select name="Field1" class="form-control input-sm" id="Field1" onchange="" data-required="true" data-field-id="1">
<option value=""> </option>
<option value="1">Yes</option>
<option selected="selected" value="0">No</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-xs-11 col-sm-7 col-lg-8">
<label class="field-label control-label" id="Comments_desc_Label" for="comments">Field 1
Comments</label>
<textarea name="comments" class="form-control " id="comments" placeholder="Enter Comments" rows="3" cols="20" data-required="false"></textarea>
</div>
</div>
<div class="col-xs-1 col-sm-1 col-lg-1">
<i class="glyphicon glyphicon-flag" style="color: #A54142; font-size: 20px; padding-top: 30px;"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
you can see:https://jsfiddle.net/sugandhnikhil/vdhmjn17/
Thanks!!
I want to put + and - buttons inside input box but bootstraps input-group-btn property is not working in materialize CSS framework
<div class="row marg">
<h6 class="small">Selling Quantity</h6>
<div class="input-field input-group col s12">
<span class="suffix btn-number" data-type="minus" data-field="num">
<a class="waves-effect waves-light ">
<i class="material-icons grey-text text-darken-1 left">remove</i>
</a>
</span>
<input type="text" name="num" class="form-control input-number" value="">
<span class="suffix btn-number" data-type="plus" data-field="num">
<a class=" waves-effect waves-light "><i class="material-icons grey-text text-darken-1 left">add</i></a>
</span>
</div>
</div>
There is no class like "input-group" in Materialize.
Bootstrap and Materialize differ in class names.
Check their Forms.html - http://materializecss.com/forms.html
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<i class="material-icons prefix">account_circle</i>
<input id="icon_prefix" type="text" class="validate">
<label for="icon_prefix">First Name</label>
</div>
<div class="input-field col s6">
<i class="material-icons prefix">phone</i>
<input id="icon_telephone" type="tel" class="validate">
<label for="icon_telephone">Telephone</label>
</div>
</div>
</form>
I have a simple form and want it to be horizontal on medium an large devices and vertical on small devices with twitter-bootstrap-3.
I got it working responsive, but it's not switching to vertical style on small devices.. Isn't that possible?
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-offset-1 col-md-10">
<form method="POST" action="...url.." class="form-horizontal">
<div class="form-group">
<label for="telefon" class="control-label col-xs-3">Telefon</label>
<div class="col-xs-8">
<input type="text" name="telefon" class="form-control">
</div>
</div>
<div class="form-group">
<label for="email" class="control-label col-xs-3">Email</label>
<div class="col-xs-8">
<input type="email" name="email" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-6">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
http://jsfiddle.net/quyw5fnL/
EDIT:
I want it to look like this on large screens:
Label1: Inputbox1
Label2: Inputbox2
And on small Screens like this:
Label1:
Inputbox1
Label2:
Inputbox2
Just realized that there was never a correct answer given. Perhaps it's just to easy, but for the sake of completion and all who are stumbling over this, here is the simple answer:
<form method="POST" action="...something..." class="form-horizontal">
<div class="form-group">
<label for="" class="col-xs-12 col-sm-3 control-label">Name</label>
<div class="col-xs-12 col-sm-9">
<p class="form-control-static">John Muller</p>
</div>
</div>
<div class="form-group">
<label for="town" class="col-xs-12 col-sm-3 control-label">Town</label>
<div class="col-xs-12 col-sm-9">
<input type="text" name="town" class="form-control " placeholder="" value="New York">
</div>
</div>
<div class="form-group">
<label for="something" class="col-xs-12 col-sm-3 control-label">Something else</label>
<div class="col-xs-12 col-sm-9">
<input type="text" name="something" class="form-control " placeholder="" value="Got it">
</div>
</div>
</form>
The important part is to set col-xs-12 and col-sm-3 on the label and col-xs-12 and col-sm-9 on the input.
Fiddle
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-offset-1 col-md-10">
<form method="POST" action="...url.." class="form-inline">
<div class="form-group">
<label for="telefon" class="">Telefon</label>
<input type="text" name="telefon" class="form-control">
</div>
<div class="form-group">
<label for="email" class="">Email</label>
<input type="email" name="email" class="form-control">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
I am integrating Bootstrap 3 with Kendo UI controls.
I am having alignment issues with multiple form-horizontal sections, here is the HTML
<ul id="acc-form-panelbar">
<li class="k-state-active">
<span class="k-link k-state-selected">Project Info</span>
<section style="padding:10px 0;">
<div class="form-horizontal form-widgets col-sm-6">
<div class="form-group">
<label class="control-label col-sm-4" for="procod">Project Code</label>
<div class="col-sm-8">
<input id="procod" style="width: 25%;"/>
</div>
</div>
</div>
<div class="form-horizontal form-widgets col-sm-6">
<div class="form-group">
<label class="control-label col-sm-4" for="proshocod">Project Short Code</label>
<div class="col-sm-8">
<input id="proshocod" style="width: 25%;"/>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="form-horizontal form-widgets col-sm-12">
<div class="form-group">
<label class="control-label col-sm-2" for="protit">Project Title</label>
<div class="col-sm-10">
<input id="protit" style="width: 75%;" />
</div>
</div>
</div>
</section>
</li>
<li class="">
<span class="k-link">Users Info</span>
<div class="row" style="margin: 20px 0;">
<div class="form-horizontal form-widgets col-sm-6">
<div class="form-group">
<label class="control-label col-sm-3" for="name">Name</label>
<div class="col-sm-8">
<input id="name" value="Bilal Haidar" style="width: 75%;" /> <!-- styles="width:100%;" -->
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="birthday">Birthday</label>
<div class="col-sm-8">
<input id="birthday" type="date" value="10/09/1979" style="width: 75%;" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="gender">Gender</label>
<div class="col-sm-8">
<select id="gender" style="width: 75%;"><option value="Male" selected="selected">Male</option><option value="Female">Female</option></select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="language">Language</label>
<div class="col-sm-8">
<select id="language" style="width: 75%;"><option value="English" selected="selected">English</option><option value="German">German</option></select>
</div>
</div>
</div>
</div>
</li>
</ul>
Anyone can tell me what's wrong with the alignment?
Thanks
First I will advice you strip your code of all inline styles, and the put every successive that should be on the same column in a div / section of class row. Bootstrap is based on the 12-grid system. That means once 12 columns are complete, the last element is dropped to a new line. Try these and see what will happen.