Joomla! Discussion Forums

I've "inherited" an enormous mySQL table to display via PHP in a Jumi application. Displays fine, but it was originally designed for 800px wide display. It also has 400+ rows.

Right now, the table's columns (i.e., the width) greatly exceed the main div's width, and the rows just extend the Joomla page on and on, vertically.

Obivously, the solution is to write a CSS class and set the property to overflow:scroll.
I have tried this several ways:

1.) First, I gave the table an id in the PHP code. Let's say its "testout"
Then I wrote in the CSS:
table#testout {
overflow:scroll;
}
No effect.

2.)Then, I tried to address it on the div level by using a page suffix:

div.contentpaneopen_testout {
overflow:scroll;
}
Also no effect.

What am I overlooking? I tested the CSS by using something simple like setting the background color to an odd color - which shows I have the correct elements to target.

OK, OK. I figured it out.

Say you have an enormous table, like a visualization of a big membership database, where there are maybe 30 different fields per record. Easy to handle outside of Joomla.

To keep the integrity of the Joomla template and to make it simple to play with this, you have to think about it in the usual terms: CSS for presentation. But WHERE and HOW?

You can't just go and change the display overflow characteristics of things like #page and #contentarea - because it will, of course, affect ALL of your content. So, the obvious thing is to go to the individual ARTICLE. Because the structure of the Joomla files is such that a page suffix won't help you here, you need to set off the individual article content somehow so that you can target it with CSS.

Here's how I handled my large table display, so that scrollbars appear ONLY around this table and nowhere else.

Article Manager, and then to Edit the article.

I just wrapped this new div around the article's contents:

<div class="fullmem">My content here</div>

And in my template's CSS:

div.fullmem {
width:100%;
height: 600px;
overflow:scroll;
}

Very simple. I picked 600px because I didn't want too many rows of the table showing up on screen at once.

HTH

Hello,

Thanks for the solution. Works fine in IE7, but I have problems in FF3.5.4.

Is there something I can do about it to make it working in FF as well?

Thanks!

Stefan

Somehow it seems to work now also in FF but I found a test page of another user

http://webdesigntester.com/custom/

which works fine in IE7 but not in FF3.5.4.

Thanks!

Stefan