Yet another how to disable scrolling question

[azpublic]

Sorry for asking this,

I know its not really neat to disable scrolling in a browser ( and not very useable neither).

But here is my problem :

I have designed an DHTML / AJAX app that gets some xml data and populates a table in a layer that has its overflow CSS property set to auto. So when you get lets say 30 entries in that table you automatically get a litle scroll bar on the side of that small layer which is what is expected !

However if I get a lot of data into that table the browser level scroll bar appears too ... probably because the table gets too big and goes out of the lower bounds of the browser.

Is this a normal situation ? is this avoidable ?

Thanks for helping out !

[Pepejeria]

In what browser and what version are you seing this behavior?

The following does not add a scrollbar to the window

<div style="width:200px; border:1px solid red; overflow:auto; height:100px;">
	<div style="height:15000px;"></div>
</div>

[azpublic]

Thanks you are correct!
Setting the initial Div height to a high value works fine in Firefox 1.0.7 and in IE 6.0 .

Is this a known issue ?

Thanks !

[Pepejeria]

What is a known issue? I mean, you said it worked...

[azpublic]

What I meant to say was :

Is a <div style="overflow : auto;"> supposed to make the overall browser scroll when the information you put in it (table or text) is long enough ? Shouldn't the <div> alone become scrollable in such a case ?

[Pepejeria]

Depends if you have a height set to the that div

[AutisticCuckoo]

Setting overflow:auto without an explicit height is pointless*, because the height then defaults to auto, i.e., the DIV will grow to accommodate its contents.

*) There is a use for this technique to clear floats, but that's another issue.

[azpublic]

ok it works fine now

Here's what I did :

<div id="OldAlertsHiddenDataContainer" 
style="position: absolute; 
top: 0px; 
left: 0px; 
visibility: visible; 
width: 1000px; 
height: 100px; 
overflow: auto;">
         <div style="height: 150000px;">
                  <div id="OldAlertsHiddenDataContent">
                   dynamic data comes here
                  </div>
           </div>
</div>

Using your first solution, the browser scrollbar wasn't showing anymore but when using mousewheel the scrolling still occured.

Now no more useless scrolling.

I am still puzzled about the scrolling even after overflow had been set to auto but whatever ... I know how to do it now.

Thanks again for your help

[azpublic]

Hmm its not perfect yet ...

By doing

<div style="height: 150000px;">
all other stuff here
</div>

I loose the "auto" feature of the overflow...

The scrollbar of the container layer appears automatically and there is 150000px of blank space under my dynamically created table.

Is this avoidable using this technique ?

[Pepejeria]

I am not quite sure i follow you. If the main div has overflow set to auto and and a height defined, then you will get a scrollbar after the content is bigger than the height. Isn't this what you want?

Or are you refering to the scrollbar in the main window? Maybe a small code example showing your issue would help.

[azpublic]

Hi Pepejeria,


Sorry for not coming back earlier I got busy elsewhere.

I am going to try to be more explicit. there are two problems


State 1 :

The page loads.
here is the exact HTML for the layer :

<div id="OlderAlertsContainer">OLDER ALERTS
  <select name="oldAlertsRange" id="oldAlertsRange" onchange="if(this.value == 'ts'){$('oldAlertDateLayer').style.visibility = 'visible'}else if (this.value != 'ts'){$('oldAlertDateLayer').style.visibility = 'hidden'};">
	 <option value="day">Last 24 Hours</option>
	 <option value="2days">Last 48 Hours</option>
	 <option value="week">Last Week</option>
	 <option value="month">Last Month</option>
	 <option value="ts">Date</option>
   </select>
    <span id="oldAlertDateLayer" style="visibility: hidden">
        DD<input name="oldAlertDateDay" id="oldAlertsDateDay" type="text" size="1" maxlength="2" />
        MM<input name="oldAlertDateMonth" id="oldAlertsDateMonth" type="text" size="1" maxlength="2" />
       	YYYY<input name="oldAlertDateYear" id="oldAlertsDateYear" type="text" size="4" maxlength="4" />
     </span>
     <input type="button" value="SEARCH" onclick="loadOldAlerts($F('oldAlertsRange'),$F('oldAlertsDateYear'),$F('oldAlertsDateMonth'),$F('oldAlertsDateDay'));"/>
      <div id="OlderAlertsContent">
	   <div style="height:15000px;" id="OlderAlertsTableContainer">
				The table will come after an ajax call
	   </div>
       </div>
</div><!-- OlderAlertsContainer-->

and here are the styles used for these nested layers

#OlderAlertsContainer {
	position:absolute;
	left:15px;
	top:350px;
	width:500px;
	height:300px;
	z-index:4;
}

#OlderAlertsContent {
	border: 1px solid #000000;
	overflow: auto;
	height: 300px;
	width: 500px;
}

Now what happens with this HTML is :
OlderAlertsTableContainer already has the scrollbar displaying even though it is still completely empty and you can scroll within it for 15000px (which is not what I want since I have set overflow to auto on the parent layer).

The scrollbar of the Browser window doesn't display and it is impossible to scroll the main document (which is exactly what I want).


State 2 :

using DHTML , I insert a table that has lets say 150 rows into OlderAlertsTableContainer


Here is some of the DHTML that populates the table :

var tmpOldAlertsData = "";

tmpOldAlertsData += "<table width='100%' border='0' class='sortable, alertTable' id='oldAlertsTable'> ";
		tmpOldAlertsData += "<tr>";
			tmpOldAlertsData += "<td>ID</td>";
			tmpOldAlertsData += "<td>TIMESTAMP</td>";
			tmpOldAlertsData += "<td>DEVICE</td>";
			tmpOldAlertsData += "<td>ALERT TYPES</td>";
		tmpOldAlertsData += "</tr>";


var a = 0;
  for (a = 0; a <= alertsArray.length-1; a++) {
  tmpOldAlertsData += "<tr class='alertTableRow' id='OldAlert"+strAlertId+"' onmouseover=\"style.backgroundColor='#84C1DF';\" onmouseout=\"style.backgroundColor='#FFFFFF'\"  onclick=\"showAlertDetails(this.id);\" >";
					tmpOldAlertsData+= "<td>" + strAlertId +"</td>";
					tmpOldAlertsData+= "<td>" + strAlertTimestamp + "</td>";
					tmpOldAlertsData += "<td>" + strDeviceName +"</td>";
					tmpOldAlertsData += "<td>" + strAlertType +"</td>";
				tmpOldAlertsData += "</tr>";


  }//for
tmpOldAlertsData += "</table>";	

$("OlderAlertsTableContainer").innerHTML = tmpOldAlertsData ;

The table displays fine inside OlderAlertsTableContainer and I can scroll the layer correctly BUT, there is a ton of useless blank space that you can scroll to under the table which is not very elegant.

The scrollbar of the Browser window doesn't display (which is what I want ) BUT now if you use your mousewheel you can scroll down the entire document which is what I would like to avoid also since there is nothing to show down there.

I don't really understand this behaviour.

Maybe you have an answer on how to avoid the problems I mentionned.

Thank you again for your help .

Mit freundlishe Grussen.
Alex

[azpublic]

Where do you see this ?