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
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've posted the code for a table in django templates that is generated dynamically using an array from views.py. I've added a bootstrap4 collapse, that runs when a chevron button is clicked. However, it shows ALL of the hidden collapses instead of just the collapsible data for that given row (see img below).
I know that I can set ids dynamically, but I haven't had any luck passing functions to the "data-target" attribute.
<table class="table table-hover">
<thead class>
<tr>
<th style="width:5%"></th>
<th>Sample</th>
<th>Reference</th>
<th>Cost</th>
<th>Sum</th>
</tr>
</thead>
<tbody>
<div class="container" id="accordion">
<div class="card">
{% for r in result %}
<tr>
<td>
<button type="button" class="fa fa-chevron-right rotate" data-toggle="collapse"
data-target="#demo" onclick="">
</button>
</td>
<td> {{ r.split.0 }} </td> <!-- sample word -->
<td> {{ r.split.2 }}</td> <!-- ref word -->
<td> {{ r.split.4 }}</td> <!-- cost -->
<td> {{ r.split.3 }}</td> <!-- sum -->
</tr>
<tr>
<td id="demo" class="collapse" colspan="5" >
<!-- COLLAPSE CONTENT -->
</td>
</tr>
{% endfor %}
</div>
</div>
</tbody>
</table>
The "toogle button" have this HTML code:
<button type="button" class="fa fa-chevron-right rotate" data-toggle="collapse"
data-target="#demo">
and the collapsible content is the following:
<td id="demo" class="collapse">[...]</td>
It's normal every toggle button show or hide all collapsible contents in your page, because all these elements are related to the same #demo identifier.
You have to make sure the id of collapsible content is unique accross all the document, and ensure the corresponding button references the same unique id. Maybe use your result id (from context variable) to do something like that:
<button type="button" class="fa fa-chevron-right rotate" data-toggle="collapse"
data-target="#demo-{{ r.pk }}">
<td id="demo-{{ r.pk }}" class="collapse">[...]</td>
EDIT: Of course, you have to adapt it to YOUR data. In this example, I imagine your list result contain many model instances, so in each result r, the value r.pk is unique.
In your template, if results contain something else, you have to make sure a unique str or int is extracted from each value to uniquify the idyou write into your HTML.
Maybe it will be demo-{{ r.split.6 }} or demo-{{ r.a_unique_attr_in_my_object }} or demo-{{ r.slugify }}.
Try to put the content you want to hide under the " COLLAPSE CONTENT ".
like this:
<table class="table table-hover">
<thead class>
<tr>
<th style="width:5%"></th>
<th>Sample</th>
<th>Reference</th>
<th>Cost</th>
<th>Sum</th>
</tr>
</thead>
<tbody>
<div class="container" id="accordion">
<div class="card">
{% for r in result %}
<tr>
<td>
<button type="button" class="fa fa-chevron-right rotate" data-toggle="collapse"
data-target="#demo" onclick="">
</button>
</td>
</tr>
<tr>
<td id="demo" class="collapse" colspan="5" >
<td> {{ r.split.0 }} </td> <!-- sample word -->
<td> {{ r.split.2 }}</td> <!-- ref word -->
<td> {{ r.split.4 }}</td> <!-- cost -->
<td> {{ r.split.3 }}</td> <!-- sum -->
</td>
</tr>
{% endfor %}
</div>
</div>
</tbody>
</table>
By the way, don't forget the Bootstrap CDN
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 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")]
template is
<button type="submit" id="add" class="button_style" onclick="addreporter();" value="Add New Authorised Reporter">Add New Authorised Reporter</button>
<div id="authorisedreporter" style="display:none">
<form method="post" action="{% url incident.views.about_me %}">{% csrf_token %}
<table width="100%">
<tr>
<td style="width:100px;">First name:</td>
<td>{{registerform.first_name}}{{registerform.first_name.errors}}</td>
</tr>
<tr>
<td>Last name:</td>
<td>{{registerform.last_name}}{{registerform.last_name.errors}}</td>
</tr>
<tr>
<td>Daytime phone:</td>
<td>{{createprofile.phone_daytime}}{{createprofile.phone_daytime.errors}}</td>
</tr>
<tr>
<td>Mobile phone:</td>
<td>{{createprofile.phone_mobile}}{{createprofile.phone_mobile.errors}}</td>
</tr>
<tr>
<td>Email:</td>
<td>{{registerform.email}}{{registerform.email.errors}}</td>
</tr>
<tr>
<td>User name</td>
<td>{{registerform.username}}{{registerform.username.errors}}</td>
</tr>
<tr>
<td>Password</td>
<td>{{registerform.password}}{{registerform.password.errors}}</td>
</tr>
<tr>
<td colspan=2 "">
<input type="checkbox" name="is_qualified_firstaiders" style="margin: 0;vertical-align:middle" />Qualified First Aiders</td>
</tr>
</table>
</form>
</div>
js:
function addreporter(){
$("#authorisedreporter").toggle();
if ($("#authorisedreporter").is(":visible")) {
$("#authorisedreporter").show();
$("#add").hide();
}
}
Using the jquery toggle,the gets open on click of this <button>Add new Authorized Reporter</button>,every thing is fine except that if their is any error in form,the form is going to be in hide mode,if i want to see the errors again i need to click the <button>Add new Authorized Reporter</button>,its a small logic to set if errors are in form,the form should not hide.What i thought is if i validate the display:none in <div> will work but no idea how to validate it in template.
Thanks
You can do:
<div id="authorisedreporter" {% if not registerform.errors %}style="display:none"{% endif %}>
Also, you might have to modify addreporter() accordingly.