Remove extra space before first col in bootstrap - twitter-bootstrap-3

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!

Related

How to position font-awesome icon vertically in bootstrap row when one column has textarea

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!!

Unable to select from dropdown in webpage using selenium VBA

I am trying to select an option from a dropdown which in a form in web page with Selenium webdriver using VBA. There are 8 checkbox each checkbox gives 2 or 3 dropdown to select, Checkbox 3 and 4 has the same option so I am unable to select the 2nd option in 4th checkbox.
bot.FindElementsByCss(".bs-FilterControl-item-checkbox")(4).Click ' to select 4th checkbox it works
bot.FindElementByXPath("//*[#value='false']").Click ' this code selects the 2nd option in the 3rd checkbox
so i tried the below code it results as NoSuchElementError :
bot.FindElementByXPath("//*[#value='false'][2]").Click
Here is the complete HTML code of form:
<form>
<div class="bs-FilterControl-flyout">
<div class="bs-FilterControl-flyout-inner">
<div class="bs-FilterControl-flyout-gradient"></div>
<div class="bs-FilterControl-flyout-contents">
<div class="bs-FilterControl-flyout-header"><button class="Button bs-ButtonLegacy Flex-flex" type="button" href=""><div class="Button-fill bs-ButtonLegacy-fill Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--baseline Flex-direction--row" style="position: relative;"><div class="TextAligner" style="line-height: 16px; font-size: 13px; flex: 0 0 auto;"></div><div class="Box-root Flex-flex Flex-alignItems--baseline Flex-direction--row Flex-justifyContent--flexStart" style="flex: 1 1 auto; line-height: 0;"><span class="Button-label Text-color--default Text-fontSize--13 Text-fontWeight--medium Text-lineHeight--16 Text-typeface--base Text-wrap--noWrap Text-display--block" style="margin-top: -1px; transform: translateY(0.5px);"><span>Clear</span></span></div></div></button>
<h2><span>Filters</span></h2><button class="Button bs-ButtonLegacy Button--color Button--color--blue Flex-flex" type="submit" href=""><div class="Button-fill bs-ButtonLegacy-fill Box-root Box-background--blue Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--baseline Flex-direction--row" style="position: relative;"><div class="TextAligner" style="line-height: 16px; font-size: 13px; flex: 0 0 auto;"></div><div class="Box-root Flex-flex Flex-alignItems--baseline Flex-direction--row Flex-justifyContent--flexStart" style="flex: 1 1 auto; line-height: 0;"><span class="Button-label Text-color--white Text-fontSize--13 Text-fontWeight--medium Text-lineHeight--16 Text-typeface--base Text-wrap--noWrap Text-display--block" style="margin-top: -1px; transform: translateY(0.5px);"><span>Done</span></span></div></div></button></div>
<div
class="bs-FilterControl-list">
<div class=""><label class="bs-FilterControl-item-label"><input class="bs-FilterControl-item-checkbox" type="checkbox" value="created"><span>Date</span></label>
<div class="bs-FilterControl-item-content">
<div class="bs-FilterControl-item-children">
<select>
<option value="inTheLast">is in the last</option>
<option value="equals">is equal to</option>
<option value="between">is between</option>
<option value="isOnOrAfter">is on or after</option>
<option value="isBefore">is before</option>
<option value="isBeforeOrOn">is before or on</option>
</select>
<div class="bs-FilterControl-input-container">
<div class="bs-FilterControl-inTheLast-container"><span><input class="bs-FilterControl-textInput" type="text" value=""></span>
<select class="bs-FilterControl-unitSelect">
<option value="days">days</option>
<option value="months">months</option>
</select>
</div>
</div>
<div class="bs-FilterControl-timezone">
<div class="Box-root">
<div class="Box-root Flex-flex Flex-alignItems--center Flex-direction--row Flex-justifyContent--flexStart" style="margin-left: -8px;">
<div class="Box-root Box-hideIfEmpty Margin-left--8">
<div class="bs-FilterControl-timezoneLabel"><span>Timezone:</span></div>
</div>
<div class="Box-root Box-hideIfEmpty Margin-left--8"><label class="Radio bs-FilterControl-timezoneRadio" for="radio46"><input title="CST/CDT - Chicago" class="Radio-source" id="radio46" type="radio"><div class="Radio-box Box-root Flex-flex Flex-alignItems--center" style="height: 20px;"><div class="Radio-target Box-root Box-background--blue"><div class="Radio-dot Box-root Box-background--white"></div></div></div><div class="Radio-copy Box-root Margin-left--8"><span class="Text-color--default Text-fontSize--14 Text-fontWeight--medium Text-lineHeight--20 Text-typeface--base Text-wrap--wrap Text-display--block">CST/CDT</span></div></label></div>
<div
class="Box-root Box-hideIfEmpty Margin-left--8"><label class="Radio bs-FilterControl-timezoneRadio" for="radio47"><input title="UTC - UTC" class="Radio-source" id="radio47" type="radio"><div class="Radio-box Box-root Flex-flex Flex-alignItems--center" style="height: 20px;"><div class="Radio-target Box-root Box-background--white"><div class="Radio-dot Box-root"></div></div></div><div class="Radio-copy Box-root Margin-left--8"><span class="Text-color--default Text-fontSize--14 Text-fontWeight--medium Text-lineHeight--20 Text-typeface--base Text-wrap--wrap Text-display--block">UTC</span></div></label></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class=""><label class="bs-FilterControl-item-label"><input class="bs-FilterControl-item-checkbox" type="checkbox" value="amount"><span>Amount</span></label>
<div class="bs-FilterControl-item-content">
<div class="bs-FilterControl-item-children">
<select>
<option value="equals">is equal to</option>
<option value="between">is between</option>
<option value="greaterThan">is greater than</option>
<option value="lessThan">is less than</option>
</select>
<div class="bs-FilterControl-input-container"><span> </span><span><input class="bs-FilterControl-textInput" type="text" value=""></span></div>
</div>
</div>
</div>
<div class="bs-FilterControl-item--expanded"><label class="bs-FilterControl-item-label"><input class="bs-FilterControl-item-checkbox" type="checkbox" value="paid"><span>Status</span></label>
<div class="bs-FilterControl-item-content">
<div class="bs-FilterControl-item-children">
<select>
<option value="true">is successful</option>
<option value="false">is failed</option>
<option value="pending">is pending</option>
</select>
</div>
</div>
</div>
<div class="bs-FilterControl-item--expanded"><label class="bs-FilterControl-item-label"><input class="bs-FilterControl-item-checkbox" type="checkbox" value="refunded"><span>Refunded</span></label>
<div class="bs-FilterControl-item-content">
<div class="bs-FilterControl-item-children">
<select>
<option value="true">is fully refunded</option>
<option value="false">is not refunded</option>
<option value="partial">is partially refunded</option>
</select>
</div>
</div>
</div>
<div class=""><label class="bs-FilterControl-item-label"><input class="bs-FilterControl-item-checkbox" type="checkbox" value="captured"><span>Captured</span></label>
<div class="bs-FilterControl-item-content">
<div class="bs-FilterControl-item-children">
<select>
<option value="true">has been captured</option>
<option value="false">has not been captured</option>
</select>
</div>
</div>
</div>
<div class=""><label class="bs-FilterControl-item-label"><input class="bs-FilterControl-item-checkbox" type="checkbox" value="disputed"><span>Disputed</span></label>
<div class="bs-FilterControl-item-content">
<div class="bs-FilterControl-item-children">
<select>
<option value="true">is disputed</option>
<option value="false">is not disputed</option>
</select>
</div>
</div>
</div>
<div class=""><label class="bs-FilterControl-item-label"><input class="bs-FilterControl-item-checkbox" type="checkbox" value="source"><span>Payment source</span></label>
<div class="bs-FilterControl-item-content">
<div class="bs-FilterControl-item-children">
<select>
<option value="card">Card</option>
<option value="bank_account">Bank Account</option>
<option value="ach_credit_transfer">ACH Credit Transfer</option>
<option value="ach_debit">ACH Debit</option>
<option value="alipay">Alipay</option>
<option value="bancontact">Bancontact</option>
<option value="eps">EPS</option>
<option value="giropay">Giropay</option>
<option value="ideal">iDEAL</option>
<option value="multibanco">Multibanco</option>
<option value="p24">P24</option>
<option value="sofort">SOFORT</option>
<option value="three_d_secure">3D Secure</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>

Try
bot.FindElementByXPath("//*[text()='is not refunded']").Click
It matches the element on the desired text of the drop down option.

Anomaly in Bootstrap 3.3.7, 'row' class and 'col' cllass

I have an abnormal behavior when I use the 'row' class
the 'notes' field is not displayed for the whole width. seems to behave in his own way.
I used bootstrap 3.3.7, jquery-1.12.4, jquery.dataTables 1.10.16, bootstrap-select 1.12.4
<div class="table-bordered" style="padding:10px;margin:5px; border-color:dodgerblue; border-width:2px">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<h3 style="margin-bottom:5px; margin-top:20px; color:dodgerblue; align-content:center">Aggiungi Anomalie<span class="badge badge-default"></span></h3>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<select id="ListaAnomalieSelect" name="ListaAnomalieSelect" class="selectpicker form-control" title="Selezionare Ammaloramento..."></select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<select class="selectpicker form-control" title="Selezionare Gravità...">
<option>Lieve</option>
<option>Medio</option>
<option>Alto</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<select class="selectpicker form-control" title="Selezionare Estensione...">
<option value="5">5%</option>
<option value="10">10%</option>
<option value="15">15%</option>
<option value="20">20%</option>
<option value="25">25%</option>
<option value="30">30%</option>
<option value="40">40%</option>
<option value="50">50%</option>
<option value="60">60%</option>
<option value="70">70%</option>
<option value="80">80%</option>
<option value="90">90%</option>
<option value="100">100%</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<textarea rows="3" class="form-control" id="Note" name="Note" placeholder="Note"></textarea>
</div>
</div>
</div>
<button id="AddAnomalia" class="btn btn-success" type="button" style="margin-bottom:20px; margin-top:20px;"><i class="glyphicon glyphicon-ok"></i> Aggiungi</button>
</div>
the result on the chrome browser is
does anyone know where the error is? thank you

The problem is that .row can only contain columns. Wrap the content in a .col- like this:
<div class="row">
<div class="col-xs-12">
<h3 style="margin-bottom:5px; margin-top:20px; color:dodgerblue">Anomalie Elemento<span class="badge badge-default"></span></h3>
<div class="table-responsive" style="width: 100%; border: 1px solid black; padding: 3px; margin-top:10px;">
<table id="AnomalieDatatable" class="display table-striped table-hover table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Anomalia</th>
<th>Estensione</th>
<th>Note</th>
</tr>
</thead>
</table>
</div>
</div>
</div>

Bootstrap - Buttons inline with input with label above

I have code like below. How to make buttons in-line with input ? Now buttons are inline with adjacent column and looks ugly. Live demo here
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="x" class="control-label">Function</label>
<input type="text" id="x" class="form-control" placeholder="x"/>
</div>
</div>
<div class="col-md-1">
Get
</div>
<div class="col-md-1">
Stat
</div>
</div>

You can use an input group (though bootstrap say you shouldn't use input groups with selects because it doesn't always behave)
http://getbootstrap.com/components/#input-groups-buttons
edit: for the label above the input group:
<div class="container" style="width: 600px;">
<form id="form" role="form">
<div class="row">
<label for="x" class="control-label">Function</label>
<div class="input-group">
<select id="x" class="form-control" placeholder="x">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<span class="input-group-btn">
Get
Stat
</span>
</div>
</div>
</form>
</div>
or for the label as part of the input group:
<div class="container" style="width: 600px;">
<form id="form" role="form">
<div class="row">
<div class="input-group">
<span class="input-group-addon"><label for="x" class="control-label">Function</label></span>
<select id="x" class="form-control" placeholder="x">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<span class="input-group-btn">
Get
Stat
</span>
</div>
</div>
</form>
</div>
I added an update to your fiddle:
input above group: http://jsfiddle.net/ced7k0hq/11/
input as part of group: http://jsfiddle.net/ced7k0hq/12/
From the bootstrap docs: http://getbootstrap.com/components/#input-groups
Textual <input>s only
Avoid using <select> elements here as they cannot be fully styled in WebKit browsers.
Avoid using <textarea> elements here as their rows attribute will not be respected in some cases.
thanks #ovitinho for comment about joining the two anchors inside a single input-group-btn :D

Two inputs same form column taking all the cell width Bootstrap 3

I'm trying to get hands over Bootstrap 3 and I'm kindof struggling with the new classes for the grid. Previous versions of Bootstrap let you set the width of a input by adding the span-* class so if you wanted to put two inputs on the same form column, adding span-2 and span-10 did the job. I'm trying to do this with bootstrap 3 but I don't get the same result as you can see in this fiddle, I want to set the select and the input on the same col. I want the labels at top of the inputs so adding the inline class to the form don't work.
What I'm missing here?
Cheers and thanks in advance

http://jsbin.com/esewOyo/1/
Most people can't believe how many classes are involved but form-control is always 100% so each one must go inside a col-- class and if you want to put elements on the same row, in this situation, then you'd use a nested row with columns as follows:
<div class="container">
<form role="form">
<div class="row my-row">
<div class="col-sm-4">
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label>C-Band</label>
<select class="form-control">
<option value="C15+">C15+</option>
<option value="C12-14">C12-14</option>
<option>
</select>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label> </label>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label>C-Band</label>
<select class="form-control">
<option value="C15+">C15+</option>
<option value="C12-14">C12-14</option>
<option>
</select>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label>C-Band</label>
<select class="form-control">
<option value="C15+">C15+</option>
<option value="C12-14">C12-14</option>
<option>
</select>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label>C-Band</label>
<select class="form-control">
<option value="C15+">C15+</option>
<option value="C12-14">C12-14</option>
<option>
</select>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label>C-Band</label>
<select class="form-control">
<option value="C15+">C15+</option>
<option value="C12-14">C12-14</option>
<option>
</select>
</div>
</div>
</div>
</form>
</div>
Because the gutter is too wide for my taste:
.row.my-row, .row.my-row .row {
margin-left:-1%;
margin-right:-1%
}
.row.my-row [class*="col-"] {
padding-left: 1%;
padding-right: 1%;
}
.row.my-row .row [class*="col-"] {
padding-left: 1%;
padding-right: 1%;
}