Alignment of span elements as td in table - html

How to make the span elements to be in a ordered manner as in table column ?
i.e how to make step, glyphicons and X to be aligned same as in table
(eg:glyphicons are moved up if we use span)
Html
<div class="row moving">
<div class="col-md-12">
<span class="col-md-1"><h4>Step</h4></span>
<span class="col-md-8"><textarea class="form-control"></textarea></span>
<span class="col-md-1"><span class="glyphicon glyphicon-circle-arrow-up"></span></span>
<span class="col-md-1"><span class="glyphicon glyphicon-circle-arrow-down"></span></span>
<span class="col-md-1"><span>X</span></span>
</div>
</div>
</br>
<table>
<tr>
<td class="col-md-1"><h4>Step</h4></td>
<td class="col-md-8"><textarea class="form-control"></textarea></td>
<td class="col-md-1"><span class="glyphicon glyphicon-circle-arrow-down"></span></td>
<td class="col-md-1"><span class="glyphicon glyphicon-circle-arrow-up"></span></td>
<td class="col-md-1"><span>X</span></td>
</tr>
</table>
CSS
.moving{
margin-top:10px;
}
textarea{
resize:none;
}
Here is a fiddle

You can make use of CSS3 flexible box for your alignment. align-items: center will align the elements inside the flexible box container to be in the center of cross-axis(vertical-plane).
JSfiddle demo
.moving {
margin-top: 10px;
}
textarea {
resize: none;
}
.moving .centered-vertically {
display: flex;
align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row moving">
<div class="col-md-12 centered-vertically"> <span class="col-md-1"><h4>Step</h4></span>
<span class="col-md-8"><textarea class="form-control"></textarea></span>
<span class="col-md-1"><span class="glyphicon glyphicon-circle-arrow-up"></span></span> <span class="col-md-1"><span class="glyphicon glyphicon-circle-arrow-down"></span></span> <span class="col-md-1"><span>X</span></span>
</div>
</div>
</br>
<table>
<tr>
<td class="col-md-1">
<h4>Step</h4>
</td>
<td class="col-md-8">
<textarea class="form-control"></textarea>
</td>
<td class="col-md-1"><span class="glyphicon glyphicon-circle-arrow-down"></span>
</td>
<td class="col-md-1"><span class="glyphicon glyphicon-circle-arrow-up"></span>
</td>
<td class="col-md-1"><span>X</span>
</td>
</tr>
</table>

Related

Unwanted stretched text within Span element HTML

I am trying to display a message within a span like below
<span class="glyphicon glyphicon-exclamation-sign alert alert-danger" id="ErrorMessage" style="display: none;" aria-hidden="true"></span>`
This span has no text by default but will be populated with error text depending on what error occurs.
The problem is that the text appears stretched within the element and it looks bad. I am not sure what way to approach this. Any advice would be appreciated.
EDIT: The problem only occurs when I add the "glyphicon" class.
I am populating using JS like:
var msg = document.getElementById("ErrorMessage");
msg.innerHTML = "There has been an error";`
I have no custom CSS styles involved here.
<div role="main">
<span id="maincontent"/>
<div class="container">
<div class="jumbotron">
<div style="height: 50px; float: center;">
<h3>List Herd Numbers in Commonage</h3>
</div>
<form role="form" id="HerdForm">
<div class="form-inline">
<label class="control-label" for="commonage_id">Enter Commonage ID:</label>
<input id="commonage_id" type="text" class="form-control" autofocus="autofocus"
placeholder="Enter ID here " />
<button id="submitButton" type="submit" class="btn btn-primary">View</button>
</div>
</form>
</div>
<span class="glyphicon glyphicon-exclamation-sign alert alert-danger"
id="ErrorMessage" style="display: none;" aria-hidden="true"></span>
<div id="loader" class="loader" hidden></div>
<div id="result_table" hidden>
<table class="table table-striped" id="herdTable">
<thead>
<tr>
<th class="threeTH">Herd Number</th>
<th class="threeTH">Share</th>
<th class="threeTH">Active Farmer</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
A glyphicon does not expect to have other content than the icon itself. The problem is that the glyphicon class has more styles attached to it, which are unwanted for normal text. In this case, the font family!
Solution is to put the glyphicon itself in a span of its own, inside the ErrorMessage span.
span[aria-hidden='true'] {display:none}
a:active + span[aria-hidden='true'] {display:block}
a:active + span[aria-hidden='true']::after {content:'There has been an error.';}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<a>Press here to show text</a>
<span class="alert alert-danger" id="ErrorMessage" aria-hidden="true">
<span class="glyphicon glyphicon-exclamation-sign"></span>
</span>
You can use the glyphicon icon in separate span tag like this:
<span class="glyphicon glyphicon-exclamation-sign"></span>
<span class="alert alert-danger" id="ErrorMessage" style="display: none;" aria-hidden="true"></span>

alignment issues when showing the subtext for a label - html

I have the below html code,i want to add a subtext(select Dates) for MyCalendar label.
<tr style="height:5%;">
<td colspan="2">
<span style="float:right;"> <label style="float: right">MyCalendar<input id="t1" class="sid myClassValue" style="float: right" ng-model="myData"></label> </span>
<span style="float:left;"> <a style="text-align: right; float: right; color: #c94e00" target="_blank" href="http://myURL.com">Click on link</a> </span>
</td>
</tr>
I tried as below but the alignment is not as expected:
<tr style="height:5%;">
<td colspan="2">
<span style="float:right;"> <label style="float: right;display:block;">MyCalendar: <br /><span> <font size="1">(select Dates) <font size="1"></span><input id="t1" class="sid myClassValue" style="float: right" ng-model="myData"></label>
</span>
<span style="float:left;"> <a style="text-align: right; float: right; color: #c94e00" target="_blank" href="http://myURL.com">Click on link</a> </span>
</td>
</tr>
You may try using :after element like this so you don't have to touch your HTML structure :
span.more label {
position: relative;
}
span.more label:after {
content: "(Select dates)";
position: absolute;
bottom: -10px;
left: 10px;
font-size: 11px;
}
<tr style="height:5%;">
<td colspan="2">
<span class="more" style="float:right;"> <label style="float: right">MyCalendar<input id="t1" class="sid myClassValue" style="float: right" ng-model="myData"></label> </span>
<span style="float:left;"> <a style="text-align: right; float: right; color: #c94e00" target="_blank" href="http://myURL.com">Click on link</a> </span>
</td>
</tr>

expanding and collapsing table rows using angularjs ng-repeat -start and ng-repeat-end

i have one issue can anyone help me please...
i have a table in that table i have four users. and i have two icons(one is for expanding and another is for collapsing table rows data at time(all)) above table when i clicked on expand icon the data in table expanded and collapsed. so until this fine to me . now am going to expand particular row of table by clicking arrow(actually present in tr) it expanded particular row and collapsed that particular row. then this time if a clicked expand and collapse icons(expand all and collapse all). then expanding and collapsing are not working.
Here am using ng-repeat-start and ng-repeat-end.
<div class="comprehensiveINDiv" ng-show="visibleCarConferenceList">
<div class="top-bg-expand" >
<div class="col-md-5 color-blue">
<h1 class="main-heading1 ">Care Conference
<span class="expand-btns">
<a><i class="fa fa-compress color-blue" aria-hidden="true" ng-click="expanded = true"></i></a>
|
<a><i class="fa fa-expand" aria-hidden="true" ng-click="loadAllcareplans(); expanded = !expanded"></i></a>
</span>
</h1>
</div>
<div class="col-md-3 select-pan1 select-inner-pan1 careconfhed">
<label>Status: </label>
<select ng-model="filterOpt.opt"
ng-options="item.name for item in filterOpts.options"
ng-change="getCareConferenceList();resetPage();">
</select>
</div>
<div class="col-md-4 ">
<sm-range-picker-input class="margn0" fname="Range" label="Range"
form="test" ng-model="vm.rangeSelected" flex="100"
format="DD-MMM-YYYY" divider="To" week-start-day="Monday"
on-range-select="rangeSelected(range)"
ng-change="getCareConferenceList();">
</sm-range-picker-input>
</div>
</div>
<div ng-show="noConfData" class="margnL15">NO RECORDS FOUND</div>
<div>
<button type="button" class="btn btn-info btn-sm margnL15"
id="addnew_btn" ng-click="addNewconference();">ADD NEW</button>
</div>
<div ng-show="confGrid">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-data3 tablestyle" id="tbl1">
<thead>
<tr>
<th></th>
<th> Date / Time </th>
<th>Reason</th>
<th>Status </th>
<th>Action</th>
<!--<th>time</th>-->
</tr>
</thead>
<tbody>
<tr ng-show="noConfData"><td colspan="4" >NO RECORDS FOUND</td></tr>
<tr ng-repeat-start="careconf in residentCareConferenceList" class="md-table-content-row class_{{careconf.CareConferenceID}}">
<td><a ng-click="expanded = !expanded"><i class="fa fa-angle-right" aria-hidden="true"></i></a></td>
<td ng-class="customClass[h.field]" class="md-table-content">{{careconf.CareConferenceDate | date:'dd/MM/yyyy hh:mm a'}}</td>
<td ng-class="customClass[h.field]" class="md-table-content">{{careconf.ReasonDescription}}</td>
<td ng-class="customClass[h.field]" class="md-table-content">{{careconf.careconferencestatus.CareConferenceStatusDescription}}</td>
<td><span class="fa fa-pencil" ng-click="EditCareConference(careconf.CareConferenceID);$event.stopPropagation();"></span></td>
<!--<td ng-class="customClass[h.field]" class="md-table-content">{{careconf.TotalTime}}</td>-->
</tr>
<tr ng-repeat-end ng-class="{'hide' : expanded}">
<td colspan="5" style="width: 100%; border:none !important; padding-left:20px;">
<div class="col-md-12 scrolldata">
<div class="col-md-12 ">
<div class="col-md-12 residance-data-text">
<p>Facility :{{careconf.facilitybase.FacilityName }}</p>
<p> Resident : {{currentResident.personbase.FullName}}</p>
<p> Admitted :{{currentResidentDetails.AdmitReAdmiDischDate | date:'dd/MM/yyyy hh:mm a'}}</p>
<p> Physician : {{residentprovider}}</p>
</div>
</div>
<div class="col-md-12" id="table">
<div class="col-md-12">
<!-- Table one -->
<p> Interdisciplinary team members involved in this Resident's Care Planning since last Care Conference ({{careconf.LastCareConferenceDate | date:'dd/MM/yyyy hh:mm a'}}) :</p>
<div class="tablestyledit">
<table class="table">
<tr>
<th width="50%" class="bdr-table">Name </th>
<th width="50%" class="bdr-table">Credentials </th>
</tr>
<tr ng-repeat="teamMember in careconf.teamMembers">
<td class="bdr-table">{{teamMember.ParticipantName}}</td>
<td class="bdr-table">{{teamMember.ParticipantRole}}</td>
</tr>
</table>
</div>
<div class="col-md-12" style="padding-top:0px;">
<div class="row">
<div class="md-form">
<p style="margin:0px;">Care Conference Summary</p>
<div class="empty-text">{{careconf.CareConferenceSummary}}</div>
</div>
</div>
</div>
<!--- /Table one -->
<!-- Table two -->
<div class="col-md-12" style="padding:0px;">
<p style="margin:0px; padding-top:10px;">Care Conference Participants :</p>
<div class="tablestyledit">
<table class="table ">
<tr>
<th width="50%" class="bdr-table">IDT Participant Name</th>
<th width="25%" class="bdr-table">Credentials</th>
<th width="25%" class="bdr-table">In Person</th>
</tr>
<tr ng-repeat="participant in careconf.participants">
<td class="bdr-table">{{participant.ParticipantName}}</td>
<td class="bdr-table">{{participant.ParticipantRole}}</td>
<td class="bdr-table">
<fieldset class="form-group">
<input type="checkbox" data-ng-model="participant.IsInPerson" disabled>
</fieldset>
</td>
</tr>
</table>
</div>
</div>
<!--/ Table two -->
<!-- Table three -->
<div class="col-md-12" style="padding:0px;">
<p style="margin:0px; padding-top:10px;">Family/Resident Attendance : </p>
<div class="tablestyledit">
<table class="table table-data-sub ">
<tr>
<th class="bdr-table">Name of person Invited</th>
<th class="bdr-table">Relationship</th>
<th class="bdr-table">Attended</th>
<th class="bdr-table">In Person</th>
</tr>
<tr ng-repeat="familyMember in careconf.familyMembers">
<td class="bdr-table">{{familyMember.ParticipantName}}</td>
<td class="bdr-table">{{familyMember.Relationship}}</td>
<td class="bdr-table">
<fieldset class="form-group">
<input type="checkbox" data-ng-model="familyMember.HasAttended" disabled>
</fieldset>
</td>
<td class="bdr-table">
<fieldset class="form-group">
<input type="checkbox" data-ng-model="familyMember.IsInPerson" disabled>
</fieldset>
</td>
</tr>
</table>
</div>
</div>
<div class="col-md-12" style="margin-left:-15px;margin-bottom:8px;">
<p> Care Conference Date : {{careconf.CareConferenceDate | date:'dd/MM/yyyy hh:mm a'}}</p>
<p>Signed by:</p>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<div flex layout="column" class="pagi-nation">
<div ng-show="confTotal > 1" flex layout="column">
<section layout="row" layout-padding="">
<div class="col-md-5 col-xs-12">Showing Page <strong>{{confPage}}</strong></div>
<div class="col-md-7 col-xs-12">
<cl-paging id="confPage" flex cl-pages="confTotal" , cl-steps="3" , cl-page-changed="loadConfPages.onPageChanged()" , cl-align="center center"
, cl-current-page="Paging.currentPage"></cl-paging>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
<div ng-show="visibleCarConferenceAdd">
<div ng-include="'views/doctor/addCareConference.html'"></div>
</div>
</div>
and my controller code
$scope.loadAllcareplans = function () {
$scope.expanded = true;
}
and finally am so sorry for my stupid english. and check my functinality (expanded, $scope.loadAllcareplans() and icons at careconference foe expanding and collapsing all table data )
Check this fiddle
The content is not what you provided.
But the logic will be this
https://jsfiddle.net/athulnair/wkz5oq9z/
$scope.collapseAll = function() {
$scope.data.forEach(function(item) {
item.isCollapsed = false;
})
}
Rather than using the above ng-click function in the tag you could go with javascript and adding/removing classes dynamically.I have used ui-bootstrap and glyphicon. Follow the below code.
HTML:
<a data-toggle="collapse" data-target="#test"><i class="test_icon glyphicon glyphicon-collapse-down"></i><h4 class="header"> Test Class </h4></a>
JavaScript
$('#test').on('hidden.bs.collapse', function () {
$(".test_icon").removeClass("glyphicon-collapse-down").addClass("glyphicon-collapse-up");
});
$('#test').on('shown.bs.collapse', function () {
$(".test_icon").removeClass("glyphicon-collapse-up").addClass("glyphicon-collapse-down");
});

Selenium modal xpath

I need to select this input ...
(name="BtnNext" value="İLERİ" class="NavigationButtonNextLightBox ")
... with xpath after this modal popup. I cant use .FindByClass because there are same classes in the main page, but I need open which in (id="__LIGHTBOX__") modal;
<div style="overflow: visible; padding: 0px; width: auto; min-height: 143px; max-height: none; height: auto;" class="ui-dialog-content ui-widget-content" id="__LIGHTBOX__">
<div class="__BOX__">
<input name="BtnClose" class="BoxButtonClose" type="button">
<div>
<img src="/Content/themes/base/images/popup-bg-top.png">
</div>
<div class="popupCapsule clearFix">
<form action="/BillPayment/TransferInfo" method="post">
<div class="banner clearFix">
<h1 class="pageTitle">Fatura Ödeme</h1>
</div>
<div class="relatedPeopleContainer clearFix">
<div class="topDiv">
</div>
<div class="relatedPeople clearFix">
<table>
<tbody>
<tr>
<td class="t1">
<img src="Content/banks/bank205.png">
</td>
<td class="t2 SenderReceiverSubmit" rowspan="2" style="cursor: pointer;">
<div class="arrow">
</div>
</td>
<td class="t3">
<img src="Content/company/Turkcell.png">
</td>
</tr>
<tr>
<td class="t4">
<div class="info right">
<h2 class="NavigationButtonIndex" style="cursor: pointer;" title="Hesabınızı değiştirmek için tıklayınız.">HESABIM
<img src="/Content/themes/base/images/change-account.png" alt="" style="height: 20px; vertical-align: text-bottom;">
</h2>
<p class="first">
Beşyüzevler Şube
</p>
<p>
Cari Hesap
</p>
<p>
10136046-1
</p>
<p>
1.256,51 TL
</p>
</div>
</td>
<td class="t6">
<div class="info left">
<h2>TURKCELL
</h2>
<p class="first">
1774862559
</p>
<p>
5303003816
</p>
<p>
23,40 TL
</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="bottomDiv">
</div>
</div>
<div class="amountEntry clearFix">
<table class="moneyEditorTable ">
<tbody>
<tr>
<td>
<input class="integerinput " data-val="true" data-val-regex="The field Integer must match the regular expression '[0-9.,]{1,11}'." data-val-regex-pattern="[0-9.,]{1,11}" datavalrequired="" disabled="disabled" id="IntegerInput" name="Amount.Integer" onkeyup=";" value="23" type="text"></td>
<td class="spanTd">
<span class="currency ">,</span>
</td>
<td>
<input maxlength="2" class="decimalinput " data-val="true" data-val-range="The field Decimal must be between 0 and 99." data-val-range-max="99" data-val-range-min="0" datavalrequired="" disabled="disabled" id="DecimalInput" name="Amount.Decimal" onkeypress="return BOA.Web.Validation.NumericControl(event);" onkeyup=";BOA.Web.Validation.DecimalPoint(event, $(this));" onpaste="BOA.Web.Validation.NumericEditorPaste(event, $(this));" value="40" type="text"></td>
<td class="spanTd">
<span class="currency ">TL</span>
</td>
</tr>
</tbody>
</table>
<input id="Amount_FECCode" name="Amount.FECCode" value="TL" type="hidden">
<div class="Error clearFix">
<span class="field-validation-valid" data-valmsg-for="Amount" data-valmsg-replace="true"></span>
</div>
</div>
<table class="popupButtonArea">
<tbody>
<tr>
<td class="left">
<input name="BtnPrev" value="GERİ" class="NavigationButtonPrev " type="button">
</td>
<td class="right">
<input name="BtnNext" value="İLERİ" class="NavigationButtonNextLightBox " type="button">
<input name="FromStep" value="TransferInfo" type="hidden">
</td>
</tr>
</tbody>
</table>
<input name="__RequestVerificationToken" value="jzI4c0v-PPC60xzaY8B2FDiCLYmHwCCtQsYv7UbBIMgnBWFeEpJoLLMDgf4LGl24WxhfizGlsqEJdjhywzgNHT785XHRzmwcU2qDyaQfSh6SajD8WKCAEq2L8CejPMJ65QL45A2" type="hidden">
</form>
</div>
<div>
<img src="/Content/themes/base/images/popup-bg-sub.png">
</div>
</div>
</div>
You can try to find the element by the following xpath :
//div[contains(#id, 'LIGHTBOX')]//input[#name='BtnNext' and contains(#class, 'NavigationButtonNextLightBox')]
Above xpath attempt to find a <div> having id contains LIGHTBOX, then from within that <div> get <input> element having name attribute equals BtnNext and class attribute contains NavigationButtonNextLightBox
Not sure am i missing somehting here, but whats stopping you from selecting by name?
WebElement btnNext = driver().findElement(By.name("BtnNext"));

How to add browse button to glyphicon-picture in bootstrap

In my page I have a text area and it has glyphicon-picture's button and glyphicon-video's button, now I need to add browse button to these buttons, how can I do this?
Edit:
<table cellpadding="5px" cellspacing="5px" style="margin: auto; margin-top: 10px">
<tr>
<td class="design"><span class="glyphicon glyphicon-pencil" style="font-size: 18px;"></span></td>
<td class="design"><span class="glyphicon glyphicon-picture design-icon"></span></td>
<td class="design"><span class="glyphicon glyphicon-facetime-video design-icon"></span></td>
<td class="design"><span class="glyphicon glyphicon-link design-icon"></span></td>
<td class="design"><span class="glyphicon glyphicon-calendar design-icon"></span></td>
</tr>
</table>
now I just have this and I want to add browse button to glyphicon-picture and I dont know how do this.
You can add glyphicon image to a button ..Try the following code.Hope it helps
<button class="btn btn-success"><i class="icon-white icon-ok"></i>Elham Gdz</button>