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!!
Related
I have four inputs in the same row and one of the input is conditionally visible by clicking "Click" button.
So if all four inputs are visible, the inputs datepicker1 and datepicker2 are sticked on the inputs above.
What is the correct bootstrap way to arrange and beautify the distances between the inputs?.
Gutters are not available on bootstrap 3.
<div class="col-md-3">
<select class="lookup-type-select form-control" name="created_lookup_type_1">
<option value="range">Range</option>
<option value="range__exclude">Exclude Range</option>
</select>
</div>
<div class="lookup-value">
<div class="col-md-3">
<select name="created__1_0" class="filter-input shortcut form-control" id="id_created__1_0">
</select>
</div>
<div class="col-md-8 row custom" style="display: inline;">
<div class="col-md-6">
<div class="datetimepicker input-group start-date date" data-date-format="YYYY-MM-DD HH:mm:ss">
<input class="filter-input form-control" name="created__1_1" value="" type="text" id="datepicker1" placeholder="From">
<span class="input-group-addon">
<span class="glyphicon-calendar glyphicon"></span>
</span>
</div>
</div>
<div class="col-md-6">
<div class="datetimepicker input-group end-date date" data-date-format="YYYY-MM-DD HH:mm:ss">
<input class="filter-input form-control" name="created__1_2" value="" type="text" id="datepicker2" placeholder="To">
<span class="input-group-addon">
<span class="glyphicon-calendar glyphicon"></span>
</span>
</div>
</div>
</div>
<div class="col-md-3 row month_only" style="display: none;">
<div>
<div class="datetimepicker input-group start-date date month_only" style="display: none;">
<input class="filter-input form-control" name="created__1_3" value="" type="text" id="id_created__1_3" placeholder="Month">
<span class="input-group-addon">
<span class="glyphicon-calendar glyphicon"></span>
</span>
</div>
</div>
</div>
</div>
<button type="button" class="btn remove-button">
<span class="glyphicon glyphicon-remove"></span>
</button>
<button onclick="myFunction()">Ckick</button>
<script>
function myFunction() {
if (document.getElementById('id_created__1_0').style.display != "none") {
document.getElementById("id_created__1_0").style.display = "none";
} else {
document.getElementById("id_created__1_0").style.display = "inline";
}
}
</script>
Jsfiddle example
Should be like the following pic
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>
Before the first col, there is big space left, like I have used pull-1. Before the first row I have my navbar with margin-bottom:0;
Here is my code
<div class="container-fluid">
<div class="row" gpon-pic-area>
<div class="col-md-2" style="background-color: red">
Inspection
<br>
<div class="rail-select gpon-pic-area">
<div class="select-side">
<i class="fa fa-angle-down"></i>
</div>
<select class="form-control gpon-pic-area" >
<option value="portStatus">Port Status</option>
<option value="portAlarm">Port Alarm</option>
<option value="portUsage">Port Usage</option>
<option value="portBandwidth">Port Bandwidth</option>
</select>
</div>
</div>
</div>
</div>
I think you are talking about the space created by the container-fluid.
With container-fluid
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row" gpon-pic-area>
<div class="col-md-2" style="background-color: red">
Inspection
<br>
<div class="rail-select gpon-pic-area">
<div class="select-side">
<i class="fa fa-angle-down"></i>
</div>
<select class="form-control gpon-pic-area">
<option value="portStatus">Port Status</option>
<option value="portAlarm">Port Alarm</option>
<option value="portUsage">Port Usage</option>
<option value="portBandwidth">Port Bandwidth</option>
</select>
</div>
</div>
</div>
</div>
Without container-fluid
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row" gpon-pic-area>
<div class="col-md-2" style="background-color: red">
Inspection
<br>
<div class="rail-select gpon-pic-area">
<div class="select-side">
<i class="fa fa-angle-down"></i>
</div>
<select class="form-control gpon-pic-area">
<option value="portStatus">Port Status</option>
<option value="portAlarm">Port Alarm</option>
<option value="portUsage">Port Usage</option>
<option value="portBandwidth">Port Bandwidth</option>
</select>
</div>
</div>
</div>
</div>
Hope this helps!
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");
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.