Problem with HTML? Scrollbars Not Appearing via window.open - asp.net

I have a VB.NET web application where I am opening a window when a user clicks on a link to view some external tabular data. The data I'm displaying definitely requires a vertical scrollbar in order to see everything...For some reason I cannot get a vertical scrollbar to show up when the new window loads.
Here's the JS that opens the window:
function showDataTable(id, type) {
var pageUrl = "queries/ReportData.aspx";
windowHandle = window.open(pageUrl, "FarmQuery", 'resizable=yes,scrollbars=yes');
windowHandle.focus();
}
The corresponding Page_Load method for the window being opened:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim db As New UtilDb
Dim errMsg As String = ""
If (Not Page.IsPostBack) Then
db.OpenGeoDb(MyGlobals.GeodataServiceName, errMsg)
LoadFarmInfo(db, errMsg)
LoadQueryData(db, errMsg)
db.CloseGeoDb()
End If
End Sub
And for what it's worth I added
style="overflow: scroll;"
To the div containing the data table.
It almost seems like the data table is rendering after the rest of the "page" has been contructed. Any suggestions?
EDIT
The problem occurs in Firefox and IE. I modified the window parameters argument in the JS from 'resizable=yes,scrollbars=yes' to 'resizable=yes,scrollbars=yes,toolbar=yes' and did get the toolbar to show up which indicates those options are "working".
Unfortunately I cannot post the HTML.
EDIT
Here's the sample HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>
Farm Query
</title><link href="../Default.css" type="text/css" rel="stylesheet" /><link href="ReportData.css" type="text/css" rel="stylesheet" /></head>
<body>
<form name="form1" method="post" action="ReportData.aspx?wfpId=DES-046&type=1" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="#" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwKP2r/ZCgLbzub6CgKJ+/qJC4VfHXBxZJkelz+i1sSmIFdWB5tZ" />
</div>
<div style="overflow: auto;">
<table class="dxgvControl" cellspacing="0" cellpadding="0" id="FarmerInfoGridView" border="0" style="width:600px;border-collapse:collapse;border-collapse:separate;">
<tr>
<td><table id="FarmerInfoGridView_DXMainTable" class="dxgvTable" cellspacing="0" cellpadding="0" border="0" style="width:100%;border-collapse:collapse;empty-cells:show;">
<tr id="FarmerInfoGridView_DXDataRow0" class="dxgvDataRow">
<td id="FarmerInfoGridView_tcrow0" colspan="7" style="border-right-width:0px;border-bottom-width:0px;">
<table width="100%" cellpadding="5" cellspacing="5">
<tr>
<td class="keyDescription">WFP ID:</td>
<td>asdf</td>
</tr>
<tr>
<td class="keyDescription">Name:</td>
<td>Name, Name</td>
</tr>
<tr>
<td class="keyDescription">Company Name:</td>
<td>Acme</td>
</tr>
<tr>
<td class="keyDescription">Address:</td>
<td>123 Lotus Lane</td>
</tr>
<tr>
<td class="keyDescription">City/State:</td>
<td>NY, NY</td>
</tr>
<tr>
<td class="keyDescription">Zip:</td>
<td>11111</td>
</tr>
</table>
</td>
</tr>
</table><img id="FarmerInfoGridView_IADD" src="#" alt="|" style="border-width:0px;position:absolute;visibility:hidden;" /><img id="FarmerInfoGridView_IADU" src="/SAM_Project/WebResource.axd" alt="|" style="border-width:0px;position:absolute;visibility:hidden;" /><img id="FarmerInfoGridView_IDHF" src="/SAM_Project/WebResource.axd" alt="Hide" style="border-width:0px;position:absolute;visibility:hidden;" /><div id="FarmerInfoGridView_LP" align="center" style="left:0px;top:0px;z-index:30000;display:none;">
<table class="dxgvLoadingPanel" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse;">
<tr>
<td class="dx"><img src="/SAM_Project/WebResource.axd" alt="" align="middle" style="border-width:0px;" /></td><td class="dx" style="padding-left:0px;">Loading…</td>
</tr>
</table>
</div><div id="FarmerInfoGridView_LD" class="dxgvLoadingDiv" style="display:none;z-index:29999;position:absolute;">
</div><input type="hidden" name="FarmerInfoGridView$DXSelInput" id="FarmerInfoGridView_DXSelInput" /><table id="FarmerInfoGridView_DXStyleTable" border="0" style="display:none;">
<tr>
<td></td>
</tr><tr class="dxgvEditingErrorRow">
<td class="dxgv" colspan="7" style="border-right-width:0px;"></td>
</tr><tr class="dxgvSelectedRow">
<td></td>
</tr><tr class="dxgvFocusedRow">
<td></td>
</tr><tr class="dxgvFocusedGroupRow">
<td></td>
</tr><tr class="dxgvDataRow">
<td></td>
</tr>
</table><input type="hidden" name="FarmerInfoGridView$CallbackState" id="FarmerInfoGridView_CallbackState" value="#" /></td>
</tr>
</table><script id="dxss_27477558" type="text/javascript">
<!--
var dxo = new ASPxClientGridView('FarmerInfoGridView');
window['FarmerInfoGridView'] = dxo;
dxo.callBack = function(arg) { WebForm_DoCallback('FarmerInfoGridView',arg,aspxCallback,'FarmerInfoGridView',aspxCallbackError,true); };
dxo.callBacksEnabled=true;
dxo.pageRowCount=1;
dxo.pageRowSize=10;
dxo.selectedWithoutPageRowCount=0;
dxo.visibleStartIndex=0;
dxo.focusedRowIndex=-1;
dxo.allowFocusedRow=false;
dxo.allowMultiSelection=false;
dxo.isColumnsResizable=false;
dxo.isVerticalScrolling=false;
dxo.isHorizontalScrolling=false;
dxo.isMainControlResizable=false;
dxo.callbackOnFocusedRowChanged=false;
dxo.callbackOnSelectionChanged=false;
dxo.autoFilterDelay='1200';
dxo.ClearColumns();
dxo.CreateColumn('',0,'WFP_ID',1);
dxo.CreateColumn('',1,'Last_Name',1);
dxo.CreateColumn('',2,'First_name',1);
dxo.CreateColumn('',3,'Farm_Name',1);
dxo.CreateColumn('',4,'Address',1);
dxo.CreateColumn('',5,'City_State',1);
dxo.CreateColumn('',6,'Zip',1);
dxo.InlineInitialize();
//-->
</script>
<table class="dxgvControl" cellspacing="0" cellpadding="0" id="AnimalGridView" border="0" style="width:600px;border-collapse:collapse;border-collapse:separate;">
<tr>
<td><table id="AnimalGridView_DXMainTable" class="dxgvTable" cellspacing="0" cellpadding="0" border="0" style="width:100%;border-collapse:collapse;empty-cells:show;">
<tr id="AnimalGridView_DXDataRow0" class="dxgvDataRow">
<td id="AnimalGridView_tcrow0" colspan="43" style="border-right-width:0px;border-bottom-width:0px;">
<table cellpadding="5" cellspacing="5" width="100%" id="rounded-corner">
<tr>
<th colspan="8" class="tableHeader">Animal Inventory</th>
</tr>
<tr>
<td colspan="2">Updated:</td>
<td colspan="2">11/14/2007</td>
<td colspan="2">Total AU:</td>
<td colspan="2">0</td>
</tr>
<tr>
<td>Mature Dairy</td>
<td>0</td>
<td>Dairy Heifers</td>
<td>0</td>
<td>Veal</td>
<td>0</td>
<td>Beef</td>
<td>0</td>
</tr>
<tr>
<td>Calves</td>
<td>0</td>
<td>Bulls</td>
<td>0</td>
<td>Ducks</td>
<td>0</td>
<td>Elk</td>
<td>0</td>
</tr>
<tr>
<td>Sheep</td>
<td>0</td>
<td>Lambs</td>
<td>0</td>
<td>Geese</td>
<td>0</td>
<td>Buffalo</td>
<td>0</td>
</tr>
<tr>
<td>Goats</td>
<td>2</td>
<td>Kids</td>
<td>0</td>
<td>Rabbits</td>
<td>0</td>
<td>Bears</td>
<td>0</td>
</tr>
<tr>
<td>Pigs</td>
<td>0</td>
<td>Piglets</td>
<td>0</td>
<td>Emu</td>
<td>0</td>
<td>Mountain Lion</td>
<td>0</td>
</tr>
<tr>
<td>Horses</td>
<td>0</td>
<td>Foals</td>
<td>0</td>
<td>Ostrich</td>
<td>0</td>
<td>Guinea Pigs</td>
<td>0</td>
</tr>
<tr>
<td>Donkeys</td>
<td>0</td>
<td>Oxen</td>
<td>0</td>
<td>Walaroo</td>
<td>0</td>
<td>Greenhouse</td>
<td>0</td>
</tr>
<tr>
<td>Chickens</td>
<td>0</td>
<td>Turkeys</td>
<td>0</td>
<td>Llama</td>
<td>0</td>
<td>Vegetables</td>
<td>0</td>
</tr>
<tr>
<td>Ginny Hens</td>
<td>0</td>
<td>Peacock</td>
<td>0</td>
<td>Alpaca</td>
<td>0</td>
<td>Pheasant</td>
<td>0</td>
</tr>
<tr>
<td>Deer</td>
<td>0</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table><img id="AnimalGridView_IADD" src="/SAM_Project/WebResource.axd" alt="|" style="border-width:0px;position:absolute;visibility:hidden;" /><img id="AnimalGridView_IADU" src="/SAM_Project/WebResource.axd" alt="|" style="border-width:0px;position:absolute;visibility:hidden;" /><img id="AnimalGridView_IDHF" src="/SAM_Project/WebResource.axd" alt="Hide" style="border-width:0px;position:absolute;visibility:hidden;" /><div id="AnimalGridView_LP" align="center" style="left:0px;top:0px;z-index:30000;display:none;">
<table class="dxgvLoadingPanel" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse;">
<tr>
<td class="dx"><img src="/SAM_Project/WebResource.axd" alt="" align="middle" style="border-width:0px;" /></td><td class="dx" style="padding-left:0px;">Loading…</td>
</tr>
</table>
</div><div id="AnimalGridView_LD" class="dxgvLoadingDiv" style="display:none;z-index:29999;position:absolute;">
</div><input type="hidden" name="AnimalGridView$DXSelInput" id="AnimalGridView_DXSelInput" /><table id="AnimalGridView_DXStyleTable" border="0" style="display:none;">
<tr>
<td></td>
</tr><tr class="dxgvEditingErrorRow">
<td class="dxgv" colspan="43" style="border-right-width:0px;"></td>
</tr><tr class="dxgvSelectedRow">
<td></td>
</tr><tr class="dxgvFocusedRow">
<td></td>
</tr><tr class="dxgvFocusedGroupRow">
<td></td>
</tr><tr class="dxgvDataRow">
<td></td>
</tr>
</table><input type="hidden" name="AnimalGridView$CallbackState" id="AnimalGridView_CallbackState" value="#" /></td>
</tr>
</table><script id="dxss_1369069069" type="text/javascript">
<!--
var dxo = new ASPxClientGridView('AnimalGridView');
window['AnimalGridView'] = dxo;
dxo.callBack = function(arg) { WebForm_DoCallback('AnimalGridView',arg,aspxCallback,'AnimalGridView',aspxCallbackError,true); };
dxo.callBacksEnabled=true;
dxo.pageRowCount=1;
dxo.pageRowSize=10;
dxo.selectedWithoutPageRowCount=0;
dxo.visibleStartIndex=0;
dxo.focusedRowIndex=-1;
dxo.allowFocusedRow=false;
dxo.allowMultiSelection=false;
dxo.isColumnsResizable=false;
dxo.isVerticalScrolling=false;
dxo.isHorizontalScrolling=false;
dxo.isMainControlResizable=false;
dxo.callbackOnFocusedRowChanged=false;
dxo.callbackOnSelectionChanged=false;
dxo.autoFilterDelay='1200';
dxo.ClearColumns();
//-->
</script>
<div style="margin-left: auto; margin-right: auto; width: 450px;padding: 5px 5px;"><input id="btnClose" type="submit" value="Close Window" onclick="window.close();" /></div>
</div>
<script type="text/javascript">
//<![CDATA[
WebForm_InitCallback();//]]>
</script>
</form>
</body>
</html>


If you want to always force a scroll bar on a page, try adding the following CSS to the page:
html {
overflow-y:scroll;
}
This will cause the page to always have a vertical scrollbar no matter if it is needed or not.
You might also want to change your code to use:
windowHandle = window.open(pageUrl, "FarmQuery", 'resizable=1,scrollbars=1');
as 1=yes/true but yes does not necessarily equal 1/true (funny cross browser logic!).


This definitely sounds like a CSS issue to me.
Try stripping your link to the CSS file out of the popup page and then see if the problem still exists (I bet it won't).
Then, this becomes a new question: What CSS could cause the scrollbars to disappear on a page?
A rule of overflow: hidden; on the body is a very likely culprit.


Have you tried sizing your main browser window to approximately the size of your popup window and directly navigating to the page that you would display in your popup? Do the scrollbars appear when you load the page directly? The popup window is possibly a red herring.


Scrollbars should just appear when you open a new window if the content doesn't fit the client area. Try adding "width=600,height=600" in your options to reduce the window size right down...if no bars are appearing it is more likely a css problem.
Remove your "default.css" line. Do you still get the problem?


When I tried the html you provided, and I resize the window so the content don't fit, I get scrollbars on the div (which appears slightly smaller than the full window). I tried to remove the style="overflow: auto;" on the div tag, and the scrollbar was only applied on the full window. This seems to work, and when you say that the scrollbars dont apply, my first thought is that it is something defined in your CSS files that causes the problem. It might be in either ../Default.css or ReportData.css .
If the style for div is set to overflow:hidden in one of the css files, you can override this to set style="overflow: visible;" in the div tag on your page. This will cause the content of the div not to be clipped, and scrolling is handled by the window instead of the div tag.
If it is not the div tag that is the problem, it might be some other tags. Look for overflow: hidden on any tags in your css files to see if that might be the problem.


There could be a Position:fixed in your css file which is preventing the scrollbars to appear.


window.open('CHFPhoneMonitoringChecklist.html', 'CHFwin', 'resizable=yes,location=1,status=1,scrollbars=1,width=1250,height=1000');

Related

Google sheets app script fails to process CSS styling

I have an image in google spreadsheet. Pressing the button fires the script which is supposed to open a stylized table. Instead, it opens a table and fails to apply CSS style to it. I read Google documentation on making a separate file for styling and putting an include in the main HTML file as follows
// <?!= include('stylesheet'); ?>
I did this. I get a table with with being a plain text.
How to make the script actually process CSS styles?
gs file:
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
};
function openDialog() {
var html = HtmlService.createHtmlOutputFromFile('Stundu_laiki')
.setHeight(600);
SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
.showModalDialog(html, 'Stundu laiki')
}
stylesheet.html file with CSS for tables
<style>
.w3-table,.w3-table-all{}.w3-table-all{border:1px solid #ccc}
.w3-table-lined tr:nth-child(odd){background-color:#fff}.w3-table-lined tr:nth-child(even){background-color:#f1f1f1}
.w3-table-all tr:nth-child(odd){background-color:#fff}.w3-table-all tr:nth-child(even){background-color:#f1f1f1}
.w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1}
</style>
stundu_laiki.html with a table
<!DOCTYPE html>
<html>
<head>
<base target="_top">
**<?!= include('stylesheet'); ?>**
</head>
<body>
<table width="98%" border="1" cellpadding="3px" cellspacing="0" style="w3-table-all">
<tr>
<td width="23%">1.</td>
<td width="77%">8:30 - 9:10</td>
</tr>
<tr>
<td>2.</td>
<td>9:20 - 10:00</td>
</tr>
<tr>
<td>3.</td>
<td>10:10 - 10:50</td>
</tr>
<tr>
<td>4.</td>
<td>11:05 - 11:45</td>
</tr>
<tr>
<td>5.</td>
<td>12:00 - 12:40</td>
</tr>
<tr>
<td>6.</td>
<td>13:10 - 13:50</td>
</tr>
<tr>
<td>7.</td>
<td> 14:00 - 14:40</td>
</tr>
<tr>
<td>8.</td>
<td>14:50 - 15:30</td>
</tr>
<tr>
<td>9.</td>
<td>15:35 - 16:15</td>
</tr>
</table>
<h2> Saīsināto dienu stundu laiki</h2>
<table width="98%" border="1" cellpadding="3px" cellspacing="0" class="w3-table-all">
<tr>
<td width="23%">1.</td>
<td width="77%">8:30 - 9:00</td>
</tr>
<tr>
<td>2.</td>
<td>9:10 - 9:40</td>
</tr>
<tr>
<td>3.</td>
<td>9:50 - 10:20</td>
</tr>
<tr>
<td>4.</td>
<td>10:35 - 11:05</td>
</tr>
<tr>
<td>5.</td>
<td>11:20 - 11:50</td>
</tr>
<tr>
<td>6.</td>
<td>12:20 - 12:50</td>
</tr>
<tr>
<td>7.</td>
<td> 13:00 - 13:30</td>
</tr>
<tr>
<td>8.</td>
<td>13:40 - 14:10</td>
</tr>
<tr>
<td>9.</td>
<td>14:15 - 14:45</td>
</tr>
</table>
</body>
</html>

Use createTemplateFromFile instead then evaluate your html. See final script below.
Final script:
function openDialog() {
var html = HtmlService.createTemplateFromFile('stundu_laiki')
.evaluate()
.setHeight(600);
SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
.showModalDialog(html, 'Stundu laiki')
}
Output:

applying css to font in table

I'd like to know where i have gone wrong, i want to apply font verdana to "to change this font to verdana."
I have removed contend from other table rows to make the code appear clearer. I have set the css styling to this section but when uploading the font does not change at all.
Code is:
<style type="text/css">
#form1 tbody tr td {
font-family: Verdana, Geneva, sans-serif;
}
</style>
<table width="500" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<form action="upload_ac.php" method="post" enctype="multipart/form-data" name="form1" id="form1">
<tr>
<td><strong>Title 1</strong></td>
</tr>
<tr>
<td>To Change this font to verdana.<br>
<br></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td align="center"> </td>
</tr>
</form>
<tr>
<td>
<!-- start here-->
<form action="http://www./cookie5payment/freecontact2formprocess.php" method="post">
<table class="freecontact2form" border="0" width="400px">
<tbody>
<tr>
<td colspan="2"><span style="font-size: x-small;"> </span> <br /> <br /></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><br></td>
<td></td>
</tr>
<tr>
<br>
<td valign="top"> </td>
</tr>
<tr>
<td style="text-align:center" colspan="2"><br /><br />
<br /><br />
<br /><br /></td>
</tr>
</tbody>
</table>
</form>
<!-- end here -->
</td>
</tr>
</table>
</tr>

Your code is not working as expected because you use the identifier #form1 to target the table inside that form, but you start the table outside the form so the css selector can not find it. Change the order of your html as follows (i.e. switch the form and table tag)
<form action="upload_ac.php" method="post" enctype="multipart/form-data" name="form1 id="form1">
<table width="500" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
Here is a fiddle to illustrate this

How to have a struts2 form in a table?

I am trying to have my form in a table but it generates a table and makes it a mess.
the generated table is as following:
<div>
<s:form action="myaction" >
<table border="1">
<tr>
<td><s:textfield name="name" label="Name" /></td>
<td><s:textfield name="family" label="Family" /></td>
<td><s:submit/></td>
</tr>
</table>
</s:form>
</div>
Source code :
<div>
<form id="myaction" name="myaction" action="/application/myaction.action" method="post">
<table class="wwFormTable"> <<<generated table
<table border="1">
<tr>
<td><tr>
<td class="tdLabel"><label for="Search_Name" class="label">Name:</label></td>
<td
><input type="text" name="Name" value="" id="Search_Name"/></td>
</tr>
</td>
<td><tr>
<td class="tdLabel"><label for="Search_Family" class="label">Family:</label></td>
<td
><input type="text" name="Family" value="" id="Search_Family"/></td>
</tr>
</td>
<td><tr>
<td colspan="2"><div align="right"><input type="submit" id="Search_0" value="Submit"/>
</div></td>
</tr>
</td>
</tr>
</table>
</table></form>

Use the "simple" theme if you do not want to use S2's default "xhtml" theme.
You'll lose S2's automatic error reporting. You may wish to consider creating your own theme.
Alternatively, you can use the "simple" theme on individual controls.
See the "Themes and templates" docs to get started.

Try to use any theme in struts form tag
eg:
<s:form action="Courses" theme="css_xhtml">
<table border="0">
<tr>
<td><s:textfield name="courseAbbr" /></td>
</tr>
</table>
</s:form>

May Be you should use this code instead...
<sp:form >
<tr>
<td>
<table>
<sp:textfield name="name"></sp:textfield>
</table>
</td>
<td>
<table>
<sp:textfield name="family"></sp:textfield>
</table>
</td>
<td>
<table>
<sp:submit/>
</table>
</td>
</tr>
</sp:form>

Placing image on bottom right corner of table cell does not work in Firefox and Safari

I have the following table structure in my aspx page. I need to place the image at bottom right corner of a table cell. The code below works fine for IE and Chrome. But in Firefox and Safari, the image is displayed at the bottom right corner of the row, and not the cell.
<table style="width:100%">
<tr>
<td valign="top" style="width:20%; position:relative">
<div>
//some controls here
</div>
<img src="~/images/Index.JPG" runat="server" style="position:absolute; right:0; bottom:0"/>
</td>
<td valign="top" style="width:80%">
<div>
//control here
</div>
</td>
</tr>
<tr>
<td align="center" colspan="1" style="width: 20%">
//control here
</td>
<td align="center" colspan="2" style="width: 80%">
</td>
</tr>
<tr>
<td align="center" style="width:100%" colspan="2">
//control here
</td>
</tr>
</table>
Please help with this!!
Thanks.

I solved this problem by adding another row for the image and setting its alignment.
<tr>
<td style="width: 20%;" align="right" valign="bottom">
<asp:Image ID="Img1" runat="server" />
</td>
</tr>

I think you need to remove the position:relative of the parent td for this image as the absolute of the images is done relative to the td that has the position:relative
<table style="width:100%">
<tr>
<td valign="top" style="width:20%;">
<div>
//some controls here
</div>
<img src="~/images/Index.JPG" runat="server" style="position:absolute; right:0; bottom:0"/>
</td>
<td valign="top" style="width:80%">
<div>
//control here
</div>
</td>
</tr>
<tr>
<td align="center" colspan="1" style="width: 20%">
//control here
</td>
<td align="center" colspan="2" style="width: 80%">
</td>
</tr>
<tr>
<td align="center" style="width:100%" colspan="2">
//control here
</td>
</tr>
</table>

issue with css inherit and Ajax

There is a table alt text that uses CSS (by using inherit in CSS) to format its layout. As you can see there is a drop down on top of the window that allows us select names, and based on the selection, the table would be populated. This action has been handled by an Ajax call, so we only refresh the table and not the rest of the page. However, when we call this Ajax call, even though we don't have any change in the code, there would be an extra space between vertical and horizontal borders of this table. I assume that there is a problem with the Ajax call and the CSS layout that we have this extra spaces. Does it make sense? or Do you any place that I can start my investigations?
Here is the source code of my Test.jsp
<a:test-webpart>
<table class="ContentPanel first-child" cellspacing="0" cellpadding="0">
<tr>
<th id="title" class="CPHeader" width="100%" colspan="400" style="border-bottom:1px solid <theme:get selector="#test .DefaultBorder" attribute="border-color" />;"><c:out value="${tile_title}" /></th>
</tr>
<%# include file="MyTest.jst" %>
<tbody class="content-area">
<tr>
<td>
<table class="ContentPanel ControlLayout" >
<tr>
<th style="padding-left:7px;" width="20%"><label for="testlist"><span >*</span><fmt:message key = "jsp.request.testlist" bundle="${local}" /></label></th>
<td class="last-child" width="80%">
<span >
<html:select property="valueAsMap(test_ITEM).value(test_OFFER)" styleClass="dropDown" styleId="offeredtest">
<html:optionsCollection property="value(Item_test_LIST)" label = "name" value ="id" />
</html:select>
</span>
</td>
</tr>
<tr>
<th style="padding-left:7px;" width="20%"><label for="employeeslist"><span >*</span><fmt:message key = "jsp.reques.employeeslist" bundle="${local}" /></label></th>
<td class="last-child" width="80%" >
<span >
<html:select property="valueAsMap(test_ITEM).value(Item_test_EMP)" onchange="javascript:getAlltests()" styleClass="dropDown" styleId="employeeId">
<html:optionsCollection property="value(Item_test_EMP_LIST)" label = "name" value = "id" />
</html:select>
</span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<th style="padding-left:7px;" align="left"><label for="testacceptlist"><span >*</span><fmt:message key = "jsp.request.testacceptlist" bundle="${local}" /></label></th>
</tr>
<tr>
<td style="padding-left:7px;">
<kvl:rsr-webpart>
<div id="testsTable">
<table class="Tabular" width="100%" cellpadding="0" cellSpacing="0">
<tr class="first-child">
<th><fmt:message key = "jsp.request.select" bundle="${local}" /></th>
<th ><fmt:message key = "jsp.request.a" bundle="${local}" /></th>
<th ><fmt:message key = "jsp.request.b" bundle="${local}" /></th>
<th ><fmt:message key = "jsp.request.c" bundle="${local}" /></th>
<th ><fmt:message key = "jsp.request.d" bundle="${local}" /></th>
<th ><fmt:message key = "jsp.request.e" bundle="${local}" /></th>
<th ><fmt:message key = "jsp.request.f" bundle="${local}" /></th>
<th class="last-child"><fmt:message key = "jsp.request.job" bundle="${local}" /></th>
</tr>
<c:forEach var="item" items = "${items}" varStatus="status">
<tr class="<c:if test='${status.index % 2 != 0}'>Even</c:if> <c:if test='${item.isFromPrimaryJob == true}'>Primary</c:if> <c:if test='${item.isFromPrimaryJob != true}'>Exchange</c:if>">
<td>
<input type="checkbox"
id="test_id_<c:out value="${item.id}"/>_<c:out value="${item.Date}"/>"
name="value(test_selected)"
value="<c:out value="${item.id}" />_<c:out value="${item.Date}"/>"
onclick="javascript:checkBox('test_id_<c:out value="${item.id}"/>_<c:out value="${item.Date}"/>','value(test_selected)','valueAsMap(REQUEST_ITEM).value(test_selected_list)','false')" >
</td>
<td>
<c:choose>
<c:when test="${empty item.label}">
</c:when>
<c:otherwise>
<c:out value="${item.label}"/>
</c:otherwise>
</c:choose>
</td>
<td><c:out value="${item.Date}"/></td>
<td><c:out value="${item.b}"/></td>
<td><c:out value="${item.d}"/></td>
<td><c:out value="${item.e}"/></td>
<td><c:out value="${item.f}"/></td>
<td class="last-child"><c:out value="${item.job}"/></td>
</tr>
</c:forEach>
</table>
</div>
</kvl:rsr-webpart>
</td>
</tr>
<tr>
<td style="padding-left:7px;">
<table class="ContentPanel ControlLayout" width="100%">
<%# include file="request.jst" %>
</table>
</td>
</tr>
</tbody>
</table>
</a:test-webpart>

have a look at the generated HTML. just looking at the rendered stuff won't help except to something is wrong, not what. and just looking at the server code won't help as it uses magic and hides the HTML sometimes.

Later on I figured out that the problem has nothing to do with the any Ajax rendering. It was the return HTML tag that had these extra padding as it was inheriting its layout from another place. I enforced my padding and borderline along with cells that I was sending from server and everything worked like a charm.

Resources