LITTLEBLACKDOG.COM

Posted: Mon May 05, 2008 10:17 am Post subject: Come and help the CSS idiot

I've got this web based map application that we run on our intranet here at work. I've been working on it intermittently for the last two years - almost entirely focused on the actual map backend, but I've decided it's finally time to focus a little on the ui end now that the mapping is pretty well completed and stable.

My problem should be a simple one to fix, but I can't seem to figure out the right css values. Here is the app:

I've got a div that fills the whole page:

Code: Select all

#fullpage {


     height: 100%;


     width: 100%;


     padding: 0px;


     margin: 0px;


     border: thin solid #113CC9;


     overflow: hidden;


}

I've got the page divided into two div's, right and left:

Code: Select all

#left {


     width: 30%;


     height: 100%;


     border-right: thin solid #113CC9;


     float: left;


}





#right {


     float: left;


     width: 70%;


     height: 100%;


     overflow: hidden;


}

Then I have left divided into two div's - left_top and left_bottom:

Code: Select all

#left_top  {


     width: 100%;


     border-bottom: thin solid #113CC9;


}





#left_bottom  {


     width: 100%;


}

left_bottom is then divided into two more div's - info_top and info_bottom:

Code: Select all

#info_top  {


     width: 100%;


}





#info_bottom {


     width: 100%;


     visibility: visible;


     height: 100%;


     overflow: auto;


}

The html, just showing the div's looks like this:

Code: Select all

<html>


<head>


<title>CVR Map App</title>


<script type="text/javascript" src="map.js"></script>


<link rel="stylesheet" type="text/css" href="map.css" />


</head>


<body onLoad="load()">


<div id="fullpage">


     <div id="left">


          <div id="left_top">


               </div>


               <div id="left_bottom">


                    <div id="info_top">


                    </div>


                    <div id="info_bottom">


                    </div>


               </div>


          </div>


          <div id="right">


          </div>


     </div>


</div>





</body>


</html>

The info_top contains the two 'tabs', and info_bottom contains a bunch of info depending on which tab is selected. The problem is, I can't get scroll bars to show up on info_bottom. In the example image, the list of owners (it's blurred becuase it contains owner names and addresses) goes off the bottom. Overflow is set to auto, so it should show a scrollbar right? Instead it just resizes the div to hold the data. If I set overflow to scroll, the scroll bar is shown, but it is disabled because the div has resized to hold all the info.

I don't want to set fixed size values for the div, but I want it to scroll when there is more info than will fit. How do I make that work?

Posted: Mon May 05, 2008 11:32 am Post subject:

You seem to have done it exactly right, it works for me in Firefox. Looks like IE's braindead CSS implementation strikes again. I'm afraid I don't have access to Windows box to test it further in IE.

Screenshot using the code you posted:

Posted: Mon May 05, 2008 12:52 pm Post subject:

You know, I never even tried it in any other browser. It's for the intranet, and everyone in the office except yours truly uses IE.

I kind of solved it using the brute force method. I added a little javascript app that calculated the width and height of the div, and then sets the position to absolute using those values. It seems to work fine.

Stupid IE.

Posted: Mon May 05, 2008 1:51 pm Post subject:

On a side ntoe that's a nifty app.

Posted: Mon May 05, 2008 2:19 pm Post subject:

creed wrote:
On a side ntoe that's a nifty app.

Why thank you! I've put a lot of man-hours of code into it over the years. It's gone through a couple of complete re-writes to get to where it is now.

It's entirely open source based.

The page itself is php served on apache.
The map functions are python using mod_python for serving, mapscript for mapping, reportlab for pdf generation, pyexcelerator for excel spreadsheet generation, ogr/gdal python bindings for spatial operations and psycopg2, pymssql and pysqlite3 for database connections.
The data is stored in a combination of geotiffs for the rasters, some shapefiles and the rest is in a postgis enabled postgres database. The sqlite3 stuff allows it to work when off the network, but it's a lot slower and lacks lots of the spatial functions that postgis gives me.

It's no google maps, but it gives our users the power of accessing the taxroll tied to spatial features.