tags:

views:

1236

answers:

7
Q: 

Problem with HTML? Scrollbars Not Appearing via window.open

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"&gt;

<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&amp;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&hellip;</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>&nbsp;</td>
                <td>&nbsp;</td>

                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</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&hellip;</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>
A: 

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.

Simon Lieschke  2009-07-07 12:47:31
Yes I have tried doing that and the scrollbars still do not appear.
toddk  2009-07-07 19:41:04
So the problem lies in the page returned. It would really help to provide an HTML sample that demonstrates the issue otherwise people will have to wildly speculate to work out what is preventing the scrollbars from appearing. (It may also pay to update your question title to reflect this.)
Simon Lieschke  2009-07-07 22:17:46
+1  A: 

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.

 2009-07-08 21:29:04
A: 

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?

cdm9002  2009-07-09 17:56:24
A: 

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.

awe  2009-07-10 11:24:43
A: 

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!).

Richy C.  2009-07-14 11:40:10
I've not seen problems using yes instead of 1, and all documentation I can find lists both as valid; http://www.w3schools.com/HTMLDOM/met_win_open.asp
Arjan  2009-07-16 11:39:46
A: 

Thanks - I was having the same problem and the scrollbars=1 helped

Ishan  2009-11-02 04:23:41
A: 

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

 2010-01-06 15:47:21

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?