I need to make a scrollable table with fixed header row and header column in an phonegap app using html, javascript and css.
I have studied a number of existing questions, and based on the below solution (http://jsbin.com/bojacelaba/1/edit?html,css,output),
I have prepared the following file:
http://www.ksutopia.com/a2.html
This file has a fixed row header and a scrollbar, and it has rendered properly in the firefox browser/android emulator. However, if I run this in the actual device (Samsung Note 1 with android 4.1.2), the row header is blanked.
http://www.ksutopia.com/screenshot.png
Anyone can give me any hint on this would be deeply appreciated. I have read a lot of answer to use iscroll. I try to look at it but there is no example of "fixed header with scrollbar". It would be grateful if someone can point to an appropriate example / tutorial.
Thanks a lot in advance.
u have to use jquery.
for example,
**
<table id="tableId">
<thead>
<th>Column Header 01</th>
<th>Column Header 02</th>
<th>Column Header 03</th>
</thead>
<tbody>
<tr>
<td>Column Content</td>
<td>Column Content</td>
<td>Column Content</td>
</tr>
</tbody>
</table>
<script>
jQuery(document).ready(function($)
{
$('#tableId').tableScroll({height:600});
});
</script>
</body>
**
After a couple days of research, I finally find out a tutorial that suit my purpose:
http://tympanus.net/Tutorials/StickyTableHeaders/
hope it would suit your needs as well.
Related
I have a table template that is leaking I have pinpointed the code causing the issue to a single line.
<tbody>
<tr repeat.for="row of workListData.rows" click.delegate='resultItemClick($event, row)'>
<td repeat.for="col of workListData.columns">
<template if.bind='col.name === "isChecked"'>
${col.label}
</template>
<template if.bind='col.name !== "isChecked"'>
**${row.Properties[col.name]}**
</template>
</td>
</tr>
</tbody>
${row.Properties[col.name]}
This is the line of code causing the issue this line takes the current row and uses the column name to access the value of the column
enter image description hereOk it seems aurelia is leaking when I have nested repeat.for
Leaks
<tr repeat.for="row of workListData.rows" click.delegate='resultItemClick($event, row)'>
<td repeat.for="col of workListData.columns">
</td>
</tr>
Does not leak
<tr repeat.for="row of workListData.rows" click.delegate='resultItemClick($event, row)'>
</tr>
Its definitely coming from nested repeat problem is if I simplify the code IE remove web services etc its work as expected
One of my colleagues has noticed something interesting commenting out a different template controller also stops the leak seems its not fussy which controller gets commented out.
Finally located the leak it seems I had a couple however one thing for sure is aurelia seems to have a very bad tendency to leak if you do this in a template
${row.Properties[key]}
Not sure if that is supported though
I now instead pass the object and key to a function and return the value which solves the issue
I am using datatables and am wondering if there is an option to make the header wrap.
i use compact display
the problem is, some javascript sets the width of the table header cells to a fix number of pixels.
so i want:
fees
covered
name
shown
amount
shown
in the headers
EDIT: the problem with adding a <br/> tag is that the width of the columns stay exactly the same, but i want them to become smaller, less width, see here:
Use line break <br> in the table header:
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>fees<br>covered</th>
<th>name<br>shown</th>
<th>amount<br>shown</th>
</tr>
</thead>
</table>
See this jsFiddle for code and demonstration.
Depending on how your table is initialised then you could use an adaption of the title key within a columns definition:
"title": "Your Title".split(" ").join("<br/>"), // Your<br/>Title
Example JSFiddle here.
I try to check the sending tweets (twitter.com) using seleniumIDE, but I ran into a problem. Textbox for tweets - div element. SeleniumIDE allows to write text only into input element? I tried to use the type id=tweet-box-home-timeline test tweet command, but it does not work. Which command should I use to write text into a div?
The below is working for me. This is after you have logged in.
<tr>
<td>clickAt</td>
<td>xpath=(//div[#id='tweet-box-home-timeline'])</td>
<td></td>
</tr>
<tr>
<td>storeEval</td>
<td>selenium.browserbot.findElement("tweet-box-home-timeline").innerHTML='The Lord is my shepherd I shall not want he leads me';</td>
<td>myval</td>
</tr>
<tr>
<td>click</td>
<td>xpath=(//button[#class='btn primary-btn tweet-action tweet-btn js-tweet-btn'])</td>
<td></td>
</tr>
Best I could manage was manipulating it via java script:
document.getElementById("tweet-box-home-timeline").innerHTML='abc';
You better use Java, Selenium IDE isn't useful tool.
I've tested Selenium IDE with twitter fields, unfortunately it doesn't work.
It works for me:
driver.get("https://twitter.com/");
driver.findElement(By.id("signin-email")).sendKeys("YOUR LOGIN");
driver.findElement(By.id("signin-password")).sendKeys("YOUR PASSWORD");
driver.findElement(By.xpath("//button[#class='submit btn primary-btn flex-table-btn js-submit']")).click();
driver.findElement(By.id("tweet-box-home-timeline")).sendKeys("Test");
Give it a try.
HTML tables with system commands run long, as seen here:
https://help.ubuntu.com/community/SwitchingToUbuntu/FromLinux/RedHatEnterpriseLinuxAndFedora
Is there a Bootstrap3 way to make tables like these responsive, keeping the wide appearance for desktop and creating a mobile appearance that carries the context of the action and the OS vendor for each command without requiring scrolling?
you can use Contextual classes for styling bootstrap table row:
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
also, you can use non-standart thead repeating, not highly recommended but workes:
<table>
<thead> ... </thead>
<tbody> ... </tbody>
<thead> ... </thead>
<tbody> ... </tbody>
</table>
Response from server is:
{"aaData":[["01/02/1980","02/02/1980","Text1","321"],["01/02/1990","02/02/1990","Text2","404"],["01/02/2000","02/02/2000","Text3","515"]]}
My HTML is:
<table id="tblMyDataTable">
<thead>
<tr role="row">
<th>Date1</th>
<th>Date2</th>
<th>Text</th>
<th>Number</th>
</tr>
</thead>
<tbody></tbody>
</table>
and, my javascript is:
$('#tblMyDatTable').dataTable();
I put above response into dataTable like this:
$('#tblMyDatTable').dataTable().fnAddData(data);
and get error message in title of this post.
I tried aoColumns as mData and mDataProp per another SO post, same error as above. (And, still puzzled why necessary when DataTables documentation example shows not there, just give server response to fnAddData.
see https://stackoverflow.com/a/24786199/849417
add $.fn.dataTableExt.sErrMode = 'throw' in the page where the plugin is used