We Keep Coding

Click event not firing on GWT site

I am attempting to automate testing on the client side of a GWT built site.
I have been able to run through all the DOM elements and find the span element which is clickable I tried the click() method but it never fires.
This can only be done on the client-side. I cannot adjust the source code to contain any ID's or names.
Here is my HTML code from the scratch pad. This does find the div that contains the table and get the span tag which is inside the first td.
<div tabindex="1779" id="isc_8C" style="left: 0px; top: 62px; width: 1566px; height: 165px; overflow: hidden; display: inline-block; position: absolute; z-index: 201998; cursor: default; background-color: white;" onfocus="isc.EH.focusInCanvas(ResultsGrid_1_body,true);"
onblur="if(window.isc)isc.EH.blurFocusCanvas(ResultsGrid_1_body,true);" onscroll="return ResultsGrid_1_body.$lh()" eventproxy="ResultsGrid_1_body">
<div id="isc_8B" style="width: 1566px; position: relative; z-index: 1000;">
<form onsubmit="return false;" action="javascript:void(0)">
<div id="ResultsGrid_1_body$28s" style="width: 1px; height: 0px; overflow: hidden; display: none;"><span style='width: 1px; height: 0px; vertical-align: text-top; display: inline-block;'></span>
</div>
<table width="1550" class="listTable" id="isc_8Ctable" role="presentation" style="overflow: hidden; table-layout: fixed;" border="0" cellspacing="0" cellpadding="2">
<tbody>
<tr role="listitem" aria-selected="true" aria-posinset="1" aria-setsize="1">
<td width="396" align="left" class="tallCellSelectedOver" style="height: 16px; overflow: hidden;">
<span class="clickable">748754434564</span>
</td>
<td width="180" align="left" class="tallCellSelectedOver" style="height: 16px; overflow: hidden;">Jon, smith</td>
</tbody>
</table>
<div id="ResultsGrid_1_body$284" style="width: 1px; height: 0px; overflow: hidden; display: none;"><span style='width: 1px; height: 0px; vertical-align: text-top; display: inline-block;'></span>
</div>
</form>
</div>
</div>
And the script code is
$('div [eventproxy=ResultsGrid_1_body] table td span').click();
How can I perform a click on the span tag?

try to associate id with the span , then add the function just before the end of body tag or if including a js file, then call it just above the body tag, not at the starting.
<span id="sp"> </span>
working example can be seen here
https://jsfiddle.net/2b645Lup/5/

Fixed height for bootstrap pre-scrollable DIV

In my application I have to display bootsatarp grid for database records. Since the number of records count are large enough to view without full page scrolling I wrap my table with bootstrap pre-scrollable div and it gave me the functionality to scroll the table. However all the time DIV size is half of the browser windows. I tried almost every stack overflow posts and suggestions and simply they not work for me. I also tried to fix this with support of java script and it also failed.
This is my HTML code
<div class="col-md-9">
<div class="pre-scrollable">
<table class="table table-bordered table-hover header-fixed" id="sometable">
<thead>
<tr>
<th>EMP_No</th>
<th>Name</th>
<th>Designation</th>
<th>Department</th>
<th>Type</th>
<th>#Days</th>
<th>Start Date</th>
<th>End Date</th>
<th>Half day</th>
<th>Status</th>
</tr>
</thead>
<tbody>
</tbody>
<?php //php code for print the table
?>
</div>
</div>
I populate above table with the results of PHP code. I have not idea how to set this DIV's height to fixed value or full value of the browser windows.below are the CSS that are use
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: center;
padding: 1px;
}
thead th {
text-align: center;
background-color: #3498db;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
This is the result web page

There is a max-height property set for the .pre-scrollable div in the bootstrap css file.
.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}
That might be the source of your problem.

For simplicity you can use css viewport dimensions. Something like this:
<div class="pre-scrollable" style="max-height: 75vh">
<table>...</table>
</div>
where "75vh" is 75% of visible height.

Twitter bootstrap - Fixed layout with scrollable sidebar will help... As the example on linked page will show you need to set the height of the div not table.
<style type="text/css">
body, html {
height: 100%;
overflow: hidden;
}
.navbar-inner {
height: 40px;
}
.scrollable {
height: 100%;
overflow: auto;
}
.max-height {
height: 100%;
}
.no-overflow {
overflow: hidden;
}
.pad40-top {
padding-top: 40px;
}
</style>

Page break workaround (javascript) for chrome

So, as known, this awesome CSS properties:
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
Doesnt work on Chrome. So now comes the workaround. I have this table structure (please note JSP and EL syntax)
<table class="table resultTable">
<thead class="repeat">
<tr class="head">
<th>XPTO HEADER</th>
<th>XPTO HEADER</th>
</tr>
</thead>
<tbody>
<c:forEach items="${items}" var="t" varStatus="loop">
<tr>
<td class="money">${t.XPTO}</td>
<td class="money">${t.XPTO2}</td>
</tr>
<c:if test="${(loop.index + 1) % 20 == 0}">
<tr class="break-page">
</tr>
</c:if>
</c:forEach>
</tbody>
</table>
Two things to notice: the class "repeat" on the thread and the empty tr with break-page class after 20 rows.
So, check this CSS:
#media print {
.break-page {
display: block; page-break-before: always;
}
}
And check this JS:
var repeat = $('.repeat tr');
$('.break-page').after(repeat.clone());
That's awesome :) This produces exactly what I want. Check how this first page:
And the second page, you can see that the header repeats, but, check out this huge white space:
So that's it. Can you guys help me get rid of that huge white space?
Also I hope this helps if someone is having the same trouble as I am.
Thank you

All I did was: used div instead of table tag. Also I inserted a page-break after 20 rows for chrome. Created a javascript hack to add the header again.
NOTE: this creates different pages and data layout for each browser. Chrome has 3 pages and the last one the table is kinda in the middle... And firefox has only two pages, that fits perfectly. That was the best I could do.
HTML
<div class="divTable">
<div class="divHeading">
<div class="divCell">${i18n.label.initialValue}</div>
<div class="divCell">${i18n.label.additions}</div>
<div class="divCell">${i18n.label.discounts}</div>
<div class="divCell">${i18n.label.finalValue}</div>
</div>
<c:forEach items="${detailedCashFlow.transactions}" var="t" varStatus="loop">
<div class="divCell money">${t.initialValue}</div>
<div class="divCell money">${t.totalAddition}</div>
<div class="divCell money">${t.totalDiscount}</div>
<div class="divCell money">${t.value}</div>
</div>
//THIS IS VERY IMPORTANT
<c:if test="${fn:length(detailedCashFlow.transactions) > (loop.index + 1 ) && (loop.index + 1) % 20 == 0}">
<div class="break-page"></div>
</c:if>
</c:forEach>
</div>
CSS
.divTable
{
display: table;
width: 100%;
margin-top: 20px;
}
.divTitle
{
display: table-caption;
text-align: center;
font-weight: bold;
font-size: larger;
}
.divHeading
{
display: table-row;
font-weight: bold;
text-align: center;
}
.divRow
{
display: table-row;
}
.divCell
{
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
text-align: center;
font-size: 12px;
}
.divRow:nth-child(even){
background: #aad4ff !important;
}
.divRow:nth-child(odd){
background: #FFF !important;
}
#media print {
.divHeading {
display:table-header-group;
}
.divRow
{
-webkit-column-break-inside: avoid;
webkit-page-break-inside:avoid;
page-break-inside:avoid; page-break-after:auto;
}
.break-page {
page-break-before: always;
}
}
JS HACK
var is_chrome = window.chrome;
if(is_chrome){
var repeat = $('.divHeading');
$('.break-page').after(repeat.clone());
}

Disabling the scroll ability in JSFiddle

Is there a way to fully disable scrolling in JSFiddle.
I've tried:
position: fixed;
and
overflow: hidden;
however I can still scrolldown when I embed the results in my site. I wondered if anyone had any tips on how to fully fix something and have no scrolling abilities.
My current HTML and CSS:
.hidden {
visibility: collapse;
}
html,
body {
height: fit;
background: #e2dede;
margin: 10px;
}
div {
width: fit;
overflow: hidden;
}
td + td {
border-left: 1px solid #eee;
}
th {
border-bottom: 1px solid #fff;
background: #333333;
color: #fff;
padding: 5px 5px;
font-family: "raleway";
font-size: 14px;
}
td {
border-bottom: 1px solid #eee;
background: #e2dede;
color: #000;
padding: 5px 5px;
font-family: "raleway";
font-size: 13px
}
<table class="tablesorter">
<table>
<thead>
<th>Name</th>
<th>Release Date</th>
</thead>
<tbody>
<tr>
<td>Peter Parker</td>
<td>11/07/2015</td>
</tr>
<tr>
<td>John Hood</td>
<td>11/07/2015</td>
</tr>
<tr>
<td>Clark Kent</td>
<td>12/07/2015</td>
</tr>
<tr>
<td>Bruce Almighty</td>
<td>13/07/2015</td>
</tr>
<tr>
<td>Bruce Evans</td>
<td>14/07/2015</td>
</tr>
</tbody>
</table>

When you embed a JSFiddle demo on your site, JSFiddle adds a "Result" bar across the top to add a link to allow editing the demo in JSFiddle. Because of that bar and a nested iframe set to the same height as the outer frame, a scroll bar shows up (demo).
<iframe height="300" width="100%" src="http://jsfiddle.net/5sadgev6/embedded/result,html,css" allowfullscreen="allowfullscreen" frameborder="0">
<div id="wrapper">
<div id="head">
<h1><a title="Edit in JSFiddle" href="/5sadgev6/light/" target="new">Edit in JSFiddle</a></h1>
<div id="actions" class="">
...
</div>
</div>
<div id="tabs" style="height: 298px;">
<div class="tCont result active" id="result">
<iframe style="height: 300px;" src="//fiddle.jshell.net/5sadgev6/show/light/" sandbox="allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
</div>
...
</div>
</div>
</iframe>
Look at the height settings added by JSFiddle in the above HTML.
So essentially, you can't prevent the embedded JSFiddle iframe from scrolling since it's the iframe within the embedded iframe that has a set height.
If you don't like the scroll:
Submit an issue to jsfiddle: https://github.com/jsfiddle/jsfiddle-issues
Don't use an embedded jsFiddle on your site.
Make a Stylish style that sets the iframe embedded within the iframe height to auto - this would only work on your browser, but would apply to the sites you specify.

Element OverLap: DropDown Menu not overlapping the contents, instead pushes them down

I have a drop Down Menu, which when clicked upon, pushes the content below it to make space for its items.
However I would like for the drop down to overlap the contents below without pushing it down.
I tried a couple of things but they didnt work including z-index:1; on the drop down list.
<td valign="top" class="navigationLink" style="width: 20%" >
<div class="reportDiv">
<h:outputLabel value="Report" rendered="#{welcomeBean.report}" class="reportMenu"/>
<ul class="reportUL" >
<li><h:link value="Project Wise Report" outcome="/webpages/ProjectWiseReport.xhtml" rendered="true" class="reportItems"/></li>
<li><h:link value="Employee Wise Report" outcome="/webpages/EmployeeWiseReport.xhtml" rendered="true" class="reportItems"/></li>
</ul>
</div>
</td>
This is the drop down. This forms one row of the table in which i have placed the contents of the webpage.
When i click on My Account label, the ul drops down and the height of the table's row increases and pushes the row below it down.
I would like for the drop down to overlap the next row contents. How should i do that?
Some more code below and above it
<div class="container">
<!-- this is where the webpages starts from. The below table is where the main contents are -->
<table border="0" cellpadding="2" style="width: 100%; ">
<tr style="background-color: #95D0CA;">
<!-- contains header of page -->
<td colspan="2">
</td>
</tr>
<tr style=" position: relative; z-index:1;">
<td colspan="2" valign="top">
<!-- THIS IS WHERE I HAVE ADDED A NEW TABLE TO CONTAIN THE MENU ITEMS. THE DROP DOWN IS A (td) OF THIS TABLE -->
<table border="0" cellspacing="2" cellpadding="2" class="templateBody" style="width: 100%;">
<tr >
<td>
<!-- other menu items -->
</td>
<!-- DROP DOWN -->
<td valign="top" class="navigationLink" style="width: 20%" >
<div class="reportDiv">
<h:outputLabel value="Report" rendered="#{welcomeBean.report}" class="reportMenu"/>
<ul class="reportUL" >
<li><h:link value="Project Wise Report" outcome="/webpages/ProjectWiseReport.xhtml" rendered="true" class="reportItems"/></li>
<li><h:link value="Employee Wise Report" outcome="/webpages/EmployeeWiseReport.xhtml" rendered="true" class="reportItems"/></li>
</ul>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- NOW the Row which gets pushed down appears -->
<tr>
<td colspan="2" valign="top" style="width: 100%">
<div class="contentBody">
</div>
</td>
</tr>
</table>
</div>
I will show some snaps of how it looks. This might guide you guys to understand my problem.
Below an image of before drop down expands:
!(http://imgur.com/QauRGVc)
image after drop down expands:
!(http://imgur.com/VMlcCbp)
I have tried using jsFiddle as many of you suggested, but it wasnt showing my code as it is. So that was not serving the purpose. I hope this edit helps.
Please Help me. And do let me know if you need additional codes.
** Thank You in Advance :)**
**Edit**
Adding CSS and JAVA SCRIPT CODES
CSS CODE for the code i have provided
.navigationLink a
{
background-color: #95D0CA;
margin-top: 5px;
margin-bottom: 5px;
}
.navigationLink label
{
background-color: #95D0CA;
margin-top: 5px;
margin-bottom: 5px;
}
.reportMenu
{
text-decoration: none;
color: #216961;
font-weight: bold;
font-size: 15px;
display: block;
padding: 10px 5px 10px 5px;
text-align: center;
cursor: pointer;
}
.reportItems
{
color: white;
text-decoration: none;
font-weight: 400;
font-size: 15px;
padding: 10px;
background-color: #95D0CA;
text-align: center;
}
.container
{
width: 1000px;
background-color: whitesmoke;
padding: 10px;
margin: 50px auto;
position: relative;
}
.templateBody
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width: auto;
}
.templateBody td
{
text-align:center;
}
.contentBody
{
background-color: whitesmoke;
margin: 10px 0px 10px 0px;
width: 100%;
position: relative;
clear: both;
}
.reportUL
{
list-style-type: none;
position: absolute;
z-index: 1;
padding: 0;
margin: 0;
text-align: left;
}
.reportUL li
{
background-color: #95D0CA;
}
JQUERY CODE
$(document).ready(function()
{
$(".img, #img").show();
$("#loginWindow").hide();
$("#loginSlide").show();
$(".reportItems").hide();
$(".reportItems1").hide();
$("#loginSlide").click(function()
{
$("#loginWindow").slideToggle(200);
});
$(".toDate").datepicker();
$(".fromDate").datepicker();
$( "#accordion" ).accordion({
collapsible: true
});
$(".reportDiv").hover(function()
{
$(".reportItems").slideToggle(150);
});
$(".accountDiv").hover(function()
{
$(".reportItems1").slideToggle(150);
});
$(".mainLinks, .reportMenu, .reportItems, .reportMenu1, .reportItems1 ").hover(function()
{
$(this).css({"text-shadow":"0px 0px 5px #FFFFFF"});
}, function(){
$(this).css("text-shadow","none");
});
});

Take a look at following fiddles.
These are some nice drop down menu's you can build
Fidde 1
Fiddle 2

I just need to add the following CSS properties to the class reportUL of the the
un-ordered list (ul) i used to add the drop down menu:
the property required to overlap the drop down on the contents below is:
position: absolute;
and to make it show above / on top of the below content i used:
z-index: 1;
the complete and correct CSS for the class is:
.reportUL
{
list-style-type: none;
position: absolute;
z-index: 1;
padding: 0;
margin: 0;
text-align: left;
}