I have a first ion-slides with effect cube.
Then when I try to add a second ion-slides, the screen is blank.
Any help will be much appreciated.
My code is per below.
<div class="body-content">
<ion-slides [effect]='type' [pager]='showPager' *ngIf="employees" class="main-emp-slide" (ionSlideDidChange)="slideChanged()">
<ion-slide class="ion-slide-main" *ngFor="let employee of employees">
<table class="employer-details">
<tr>
<td>
<div class="prev-emp"> <button (click)="goToPreviousSlide()"> <ion-icon class="icon-size" name="ios-arrow-back"></ion-icon></button></div>
</td>
<td>
<div class="counter-text">{{pager.currentPage}} out of {{pager.totalPages}} employees</div>
</td>
<td>
<div class="next-emp"> <button (click)="goToNextSlide()"> <ion-icon class="icon-size" name="ios-arrow-forward"></ion-icon></button></div>
</td>
</tr>
<tr>
<tr>
<ion-slides pager>
<ion-slide>
<h1>slide 1</h1>
<ion-slide>
<ion-slide>
<h1>slide 2</h1>
<ion-slide>
</ion-slides>
</tr>
</table>
</ion-slide>
</ion-slides>
</div>
Related
new to bootstrap and experimenting on a pet project. am a bit at my wits ends here.
my understanding is if you have <div class="col-sm-12 col-lg-5"> and <div class="col-sm-12 col-lg-7 "> on small screen each would take a new row (12 cols). vs on a large screen they'd share the row (5+7). in my code the second table(fruits) is supposed to share row with the chart on large screens and split on small screen but when I try small screens in debugging mode, the second column with the chart gets pushed out of the parent column (off screen). I have no clue what exactly is wrong here. any help would be appreciated
bellow is a portion of the code
<div class="container">
<div class="row">
<div class="media content-section col-sm-12 col-md-12 col-lg-12">
<form action="" method="post">
{% csrf_token %}
<label class="switch"
><input type="checkbox" id="togBtn" />
<div class="slider round">
<!--ADDED HTML --><span class="on">BUY</span
><span class="off">SELL</span
><!--END-->
</div></label
>
<div class="table-responsive-md">
<table class="table table-sm table-bordered tableformat">
<thead>
SUMMARY
<small class="text-muted"
>(edit cells to adjust position)</small
>
<tr>
<th scope="col">col 1</th>
<th scope="col">col 2</th>
<th scope="col">col 3</th>
<th scope="col">col 4</th>
<th scope="col">col 5</th>
<th scope="col">col 6</th>
<th scope="col">col 7</th>
<th scope="col">col 8</th>
<th scope="col">col 9</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td width="60">
<input
type="text"
maxlength="10"
width="50%"
placeholder="1"
size="10"
/>
</td>
<td width="60">
<input
type="text"
maxlength="10"
width="50%"
size="10"
placeholder="2"
/>
</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</tbody>
</table>
</div>
<div class="row">
<div class="col-md">
<button
type="button"
class="btn btn-primary btn-sm"
type="submit"
>
update position
</button>
<button
type="button"
class="btn btn-primary btn-sm"
type="submit"
>
reset to default
</button>
</div>
</div>
</form>
</div>
</div>
<div class="row">
<div class="media content-section col-sm-12-col-md-12 col-lg-12">
<div class="col-sm-12 col-lg-5">
<div class="table-responsive-md">
<table
class="table table-sm table-bordered tableformat text-center"
>
<thead>
fruits
<small class="text-muted"
>(hover on terms for quick definitions)</small
>
<tr>
<th scope="col">mango</th>
<th scope="col">banana</th>
<th scope="col">apple</th>
<th scope="col">peach</th>
<th scope="col">grapes</th>
<th scope="col">lemon</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="chart col-sm-12 col-lg-7 overflow-auto">
<div style="width: 560; height: 400;">
<canvas id="plchart"></canvas>
</div>
</div>
</div>
</div>
here is how it looks in debugging mode on large screen vs on small screen. I have in the meta tag <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
solved it. I missed the inner row before the cols.
essentially should be something like container->row->outer col->inner row -> inner-cols. I was doing container->row-> outer col -> inner cols
I have a jsa page Test.jsp page .There are two modal in the page.data is dynamically loded in modal. second modal open at first modal link.when both modal are open when i close second modal first modal also close and also scroll is not work correctly.
FIRST MODAL
<div id="panelModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Department Details</h4>
</div>
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover">
<tbody>
<tr>
<td class="col-md-2">Panel Name</td>
<td class="col-md-2">
<label id="panel1" text=""></label></td>
<td class="col-md-2">Panel Price</td>
<td class="col-md-2">
<label id="price1" text=""></label></td>
<td class="col-md-2">Description</td>
<td class="col-md-2">
<label id="description1"></label></td>
</tr>
<tr>
<td class="col-md-2">Mapped Test </td>
<td class="col-md-2" id="tests">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
SECOND MODAL
<div id="testModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Test Details</h4>
</div>
<!-- <div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body"> -->
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover">
<tbody>
<tr>
<td class="col-md-2">Test Common Name</td>
<td class="col-md-2">
<label id="testName1" text=""></label></td>
<td class="col-md-2">Test Technical Name</td>
<td class="col-md-2">
<label id="technicalName"></label></td>
<td class="col-md-2">Test Area</td>
<td class="col-md-2">
<label id="testArea1"></label></td>
</tr>
<tr>
<td class="col-md-2">Technology Long Form</td>
<td class="col-md-2">
<label id="testCategory1"></label></td>
<td class="col-md-2">Technology Short Form</td>
<td class="col-md-2">
<label id="testCategory2"></label></td>
<td class="col-md-2">Sub Test Technology</td>
<td class="col-md-2">
<label id="subTestCategory1"></label></td>
</tr>
<tr>
<td class="col-md-2">TAT</td>
<td class="col-md-2">
<label id="tat1"></label></td>
<td class="col-md-2">Test MRP</td>
<td class="col-md-2">
<label id="testMrp1"></label></td>
<td class="col-md-2">Specimen Type</td>
<td class="col-md-2" id="specimenType1">
</td>
</tr>
<tr>
<td class="col-md-2">Preservation</td>
<td class="col-md-2">
<label id="preservation1"></label></td>
<td class="col-md-2">Comment</td>
<td class="col-md-2">
<label id="comment1"></label></td>
<td class="col-md-2">NABL Accredited</td>
<td class="col-md-2">
<label id="nablAccredited"></label></td>
</tr>
<tr>
<td class="col-md-2">Test Type</td>
<td class="col-md-2">
<label id="testType1"></label></td>
<td class="col-md-2">Site</td>
<td class="col-md-2">
<label id="site1"></label></td>
<td class="col-md-2">Department</td>
<td class="col-md-2">
<label id="department1"></label></td>
</tr>
<tr>
<td class="col-md-2">Sub Department</td>
<td class="col-md-2">
<label id="subdepartment1"></label></td>
<td class="col-md-2">Description</td>
<td class="col-md-2">
<label id="description1"></label></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
You can use z-Index to solve your problem. For example:
var zIndex = 1040 + (10 * $('.modal:visible').length);
$(this).css('z-index', zIndex);
setTimeout(function() {
$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
}, 0);
Here is jsFiddle Demo
I have a table of 5 columns. Column 2 has some text for the Name. Column 1 is a radio button. Column 3, 4 and 5 is a radio button.
I would like to select the radio button from column 3 where name text is "MaidenName"
I can find MaidenName then i tried to use following-sibling to go to the next column. My XPATH is not working.
My XPATH is:
//table[#id="data_configuration_edit_mapping_tab_mappings_ct_mapping_body"]/tbody//tr//td//div//span[text()="MAIDENNAME"]/following-sibling::td[2]//div//span[#type="radio"]
The HTML sample is:
<table id="data_configuration_edit_mapping_tab_mappings_ct_mapping_body" cellspacing="0"
style="table-layout: fixed; width: 100%;">
<colgroup>
<tbody>
<tr class="GJPPK2LBFG" __gwt_subrow="0" __gwt_row="0">
# few trs here. I have removed. too long to paste otherwise
<tr class="GJPPK2LBFG" __gwt_subrow="0" __gwt_row="12">
<td class="GJPPK2LBEG GJPPK2LBGG GJPPK2LBHG">
<td class="GJPPK2LBEG GJPPK2LBGG">
<div __gwt_cell="cell-gwt-uid-1076" style="outline-style:none;">
<span class="" title="DOB"
style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;empty-cells:show;display:block;padding-right: 1px;">DOB</span>
</div>
</td>
<td class="GJPPK2LBEG GJPPK2LBGG">
<div __gwt_cell="cell-gwt-uid-1077" style="outline-style:none;">
<input type="radio" name="rb3386"/>
</div>
</td>
<td class="GJPPK2LBEG GJPPK2LBGG">
<div __gwt_cell="cell-gwt-uid-1078" style="outline-style:none;">
<input type="radio" name="rb3386"/>
</div>
</td>
<td class="GJPPK2LBEG GJPPK2LBGG GJPPK2LBBH">
<div __gwt_cell="cell-gwt-uid-1079" style="outline-style:none;">
<input type="radio" checked="" name="rb3386"/>
</div>
</td>
</tr>
<tr class="GJPPK2LBEH" __gwt_subrow="0" __gwt_row="13">
<td class="GJPPK2LBEG GJPPK2LBFH GJPPK2LBHG">
<div __gwt_cell="cell-gwt-uid-1075" style="outline-style:none;">
<input type="radio" name="rbCrossRow119"/>
</div>
</td>
<td class="GJPPK2LBEG GJPPK2LBFH">
<td class="GJPPK2LBEG GJPPK2LBFH">
<td class="GJPPK2LBEG GJPPK2LBFH">
<td class="GJPPK2LBEG GJPPK2LBFH GJPPK2LBBH">
</tr>
<tr class="GJPPK2LBFG GJPPK2LBMG" __gwt_subrow="0" __gwt_row="14">
<td class="GJPPK2LBEG GJPPK2LBGG GJPPK2LBHG GJPPK2LBNG">
<td class="GJPPK2LBEG GJPPK2LBGG GJPPK2LBNG">
<div __gwt_cell="cell-gwt-uid-1076" style="outline-style:none;">
<span title="MAIDENNAME"
style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;empty-cells:show;display:block;padding-right: 1px;">MAIDENNAME</span>
</div>
</td>
<td class="GJPPK2LBEG GJPPK2LBGG GJPPK2LBNG">
<div __gwt_cell="cell-gwt-uid-1077" style="outline-style:none;">
<input type="radio" name="rb3388"/>
</div>
</td>
<td class="GJPPK2LBEG GJPPK2LBGG GJPPK2LBNG">
<div __gwt_cell="cell-gwt-uid-1078" style="outline-style:none;">
<input type="radio" name="rb3388"/>
</div>
</td>
<td class="GJPPK2LBEG GJPPK2LBGG GJPPK2LBBH GJPPK2LBNG">
<div __gwt_cell="cell-gwt-uid-1079" style="outline-style:none;">
<input type="radio" checked="" name="rb3388"/>
</div>
</td>
</tr>
<tr class="GJPPK2LBEH" __gwt_subrow="0" __gwt_row="15">
<tr class="GJPPK2LBFG" __gwt_subrow="0" __gwt_row="16">
</tbody>
</table>
Having found MaideName I would like to go down 2 columns and select the radio button in the 2nd column from MaidenName
Thanks, Riaz
I would stop at the tr point checking that there is MAIDENNAME text inside the appropriate column and then get the desired column in this row:
//table[#id="data_configuration_edit_mapping_tab_mappings_ct_mapping_body"]/tbody//
tr[td[2]/div/span/text()="MAIDENNAME"]/
td[3]/div/input[#type="radio"]
newlines added for readability.
Also note that I also had to fix the tag name - you are targeting the input element and not the span element.
I have worked it out now. I should use the following attribute. It is in the same tr row. following-sibling would go down to the next tr node.
Need to stay in the same node.
My working XPATH is:
//table[#id="data_configuration_edit_mapping_tab_mappings_ct_mapping_body"]/tbody//tr//td//div//span[text()="MAIDENNAME"]/following::td[2]//div//input
I have a HTML table with some rows of input fields. Each input field has a value.
The input field I am looking for is any input field which contains the text "filter"
The actual text is "filter2" or it could be "filter3"
Can i use the contains keyword in the Xpath to find "filter" for the #value attribute?
The XPATH i have constructed is:
//table[#id="reporting_add_report_tab_manual_ct_match_filters"]/tbody//tr//td//input[#value="filter2"]
I would like to find the input field where it has filter in the value attribute, exclude the number 2
The HTML snippet is:
<table id="reporting_add_report_tab_manual_ct_match_filters" class="GJPPK2LBAV border" cellspacing="0"
__gwtcellbasedwidgetimpldispatchingfocus="true" __gwtcellbasedwidgetimpldispatchingblur="true">
<thead aria-hidden="false">
<colgroup>
<tbody style="">
<tr class="GJPPK2LBCD GJPPK2LBMD" __gwt_subrow="0" __gwt_row="0">
<td class="GJPPK2LBBD GJPPK2LBDD GJPPK2LBED">
<div __gwt_cell="cell-gwt-uid-684" style="outline-style:none;">
<input type="checkbox" tabindex="-1"/>
</div>
</td>
<td class="GJPPK2LBBD GJPPK2LBDD">
<div __gwt_cell="cell-gwt-uid-685" style="outline-style:none;">
<span>
<input type="text" tabindex="-1" value="rule1"/>
</span>
<span>
</div>
</td>
<td class="GJPPK2LBBD GJPPK2LBDD GJPPK2LBOD">
</tr>
<tr class="GJPPK2LBCE" __gwt_subrow="0" __gwt_row="1">
<td class="GJPPK2LBBD GJPPK2LBDE GJPPK2LBED">
<div __gwt_cell="cell-gwt-uid-684" style="outline-style:none;">
<input type="checkbox" tabindex="-1"/>
</div>
</td>
<td class="GJPPK2LBBD GJPPK2LBDE">
<div __gwt_cell="cell-gwt-uid-685" style="outline-style:none;">
<span>
<input type="text" tabindex="-1" value="filter2"/>
</span>
<span>
<div style="color:red;font-style:italic;"/>
</span>
</div>
</td>
<td class="GJPPK2LBBD GJPPK2LBDE GJPPK2LBOD">
</tr>
</tbody>
<tbody style="display: none;">
<tfoot style="display: none;" aria-hidden="true"/>
</table>
Thanks,
Riaz
//table[#id="reporting_add_report_tab_manual_ct_match_filters"]/tbody/tr/td//input[#value!="filter2"][contains(#value,"filter")]
I am using classic theme in Liferay and trying to make a layout. On IDE it is showing completely fine but when I apply it on to my page I don't get the page divided as in the layout.
I can add portlets horizontally line by line but not divided in the layout i created 1-2-2-1.
Below is the code. Please help.
<div class="home" id="main-content" role="main">
#if ($browserSniffer.isIe($request) && $browserSniffer.getMajorVersion($request) < 8)
<table class="portlet-layout">
<tr>
<td class="aui-w100 portlet-column portlet-column-only" id="column-1">
$processor.processColumn("column-1", "portlet-column-content portlet-column-content-only")
</td>
</tr>
</table>
<table class="portlet-layout">
<tr>
<td class="aui-w30 portlet-column portlet-column-first" id="column-2">
$processor.processColumn("column-2", "portlet-column-content portlet-column-content-first")
</td>
<td class="aui-w70 portlet-column portlet-column-last" id="column-3">
$processor.processColumn("column-3", "portlet-column-content portlet-column-content-last")
</td>
</tr>
</table>
<table class="portlet-layout">
<tr>
<td class="aui-w100 portlet-column portlet-column-only" id="column-4">
$processor.processColumn("column-4", "portlet-column-content portlet-column-content-only")
</td>
</tr>
</table>
#else
<div class="portlet-layout">
<div class="aui-w100 portlet-column portlet-column-only" id="column-1">
$processor.processColumn("column-1", "portlet_56_INSTANCE_F9mSTanO1pkp")
</div>
</div>
<div class="portlet-layout">
<div class="aui-w30 portlet-column portlet-column-first" id="column-2">
$processor.processColumn("column-2", "portlet-column-content portlet-column-content-first")
</div>
<div class="aui-w70 portlet-column portlet-column-last" id="column-3">
$processor.processColumn("column-3", "portlet-column-content portlet-column-content-last")
</div>
</div>
<div class="portlet-layout">
<div class="aui-w100 portlet-column portlet-column-only" id="column-4">
$processor.processColumn("column-4", "portlet_56_INSTANCE_mF6lT48JoIgZ")
</div>
</div>
#end
</div>
Liferay 6.2 use bootstrap style layout, so your code was valid up to 6.1.
Try to change all your aui-wXXX with the boostrap class spanXX.
For details about boostrap layout see: http://getbootstrap.com/2.3.2/scaffolding.html#fluidGridSystem
NB
Liferay use bootstrap 2.3.2 and not 3.0