By Steve Dondley on

I switched my monitor to 800 x 600 and found that many pages don't fit, at least with IE 6. So far, I've looked mostly at the admin pages. What happens is that if the middle column contains a wide table, textarea, drop down menu or similar component, it often forces the middle column to run over into the third column. It looks ugly. On other pages, the user is required to horizontally scroll to see all the content.

This problem happens with just about all themes, but is much more pronounced with three-column layouts. The big obstacle to this is that it's the content that is the problem and not the theme itself. To fix it, someone would have to go through all the code and weed out and adjust the large tables and form components that cause this problem.

I suggest developers be vigilant about creating content that appears in the middle/main column and make sure that it isn't too wide.

Comments

killes@www.drop.org’s picture

killes@www.drop.org commented

Can you post some screenshots somewhere?

--
Drupal services
My Drupal services

Steve Dondley’s picture

Steve Dondley commented

Sure, here's three quick examples. There's many, many more where these came from:

http://www.pvaflcio.org/screenshots/1.jpg
This one is the tableless theme. It's actually a two column layout. Looks fine at 1280 x 1024. At 800 x 600, the 2nd column drops down below the main column.

http://www.pvaflcio.org/screenshots/2.jpg
Common problem with adc theme. Main column overlaps right.

http://www.pvaflcio.org/screenshots/3.jpg
Here the "Add user comments" radio buttons appear in a strange place.

Most of us have nice, large monitors and know enough to adjust resolutions accordingly. But when you get to the general population, probably 40 to 50% have monitors set to 800 x 600 resolution. This is a problem.

killes@www.drop.org’s picture

killes@www.drop.org commented

Can you reproduce this with the standard themes, ie the ones that are distributed with the Drupal core? If not this is a theme specific issue. You might want to file bug reports for each theme that fails in this way. But I suppose the maintainers all have big monitors and do not care for 800x600 too much.

--
Drupal services
My Drupal services

Steve Dondley’s picture

Steve Dondley commented

The standard themes have problems, but they don't appear to be as severe.

But you miss my larger point which is that this is not a problem with themes. No theme is immune from it. All themes will fall victim to this if developers don't make sure tables and form elements are narrow enough for proper viewing on 800 x 600 monitors.

moshe weitzman’s picture

moshe weitzman commented

we are not missing your point. drupal emits only 1 table in its core, and that table has no fixed width.

form elements should not be hard coded to a very large width. please post a specific bug report if you find these.

does drupal.org break for you at 800x600? if so, please post the url.

marky’s picture

marky commented

form textareas etc with your themes css. For example, Drupal outputs most textareas at cols="70" (a _required_ attribute in html), but they all have classnames, or are otherwise accessible through css so doing:

.whatevertheclassnameis{
	width: 10em;
}

will override the default cols="70".

Do a view:source of the problem page, and ensure your themes css has a corresponding class declaration. For example, in /admin/system/modules/search [search.module - 61] you'll see the code: 

  $output .= form_textarea(t("Noise words"), "noisewords", variable_get("noisewords", ""), 70, 10, t("These words will not be indexed, enter comma separated list, linebreaks and whitespace do not matter.  Example: and, or, not, a, to, I, it, ..."));

which produces:

<div class="form-item"><div class="title">Noise words:</div><textarea wrap="virtual" cols="70" rows="10" name="edit[noisewords]" id="edit[noisewords]"></textarea>

Now, if your themes css declares:

.form-item textarea{
	width: 150px;
}

then that's what you're gonna get...

Naturally, a 3col theme has less screen real estate at 800x600 than a 2col theme. It's up to you to declare your desired size in the themes css. Use the provided css _as a base_ for your own customisation. A provided theme cannot cover _every_ eventuality. ;o)