Select Style display issue?

[branchandroot]

Is anyone else having trouble with the Select Style page? Trouble wherein the styles with long enough names to run to three lines have the "Apply Style" button hidden under the thumbnail in the row below?

If this is more than just me, I will put a bug in for it.

Comments

[afuna]

Hm, I think it's because the heights of the boxes are in px (eww), so things start spilling out in bigger font sizes.

[branchandroot]

I'm not entirely sure, actually; I tried reducing my font size (only on text) to test, and they were still hidden. But yes, height in px is bad in any case! Actually, those should not have a height defined at all, I would think.

[afuna]

I think they do, so that the boxes will always be aligned. If there's no height, then the alignment acn get out of whachk, and stuff.

[branchandroot]

The row should always take the height of the tallest cell, though; So the row heights might differ, but should still be straight, and with a width defined it shouldn't look messy. I don't see any other way of ensuring that the button is always visible and available.

[afuna]

Ah, it's a table? I thought it was a row of floats!

[branchandroot]

*goes to check the html* Oh goodness, it is. *sighs* This is actually a point where I /would/ use a table even if it isn't /really/ tabular data. That will make it messier, yes. I suppose defining height in ems is a start, but ems for height can get so cranky. It will look very spread out at larger sizes, but that's better than being hidden.

[afuna]

I was hoping the height could just be applied to the the theme-desc -- only the text -- which alleviates the problem of spreading out a bit across larger font sizes. But the height then becomes inconsistent if some of the images are nonexistent.

(For whatever reason, setting the width/height of the theme-preview image doesn't work?)

[branchandroot]

*looking at themechooser.css* Yeah, if there isn't an img there then a height given to .theme-preview won't work. And the image has no enclosing element to hold its place, like a user icon does.

Oh man. This is a tangle; everything has a width and height.

Maybe changing .theme-item height: 205px; to min-height: 205px; would help keep the box open when there isn't an image.

[afuna]

Isn't the point of setting a width and a height on an image, is that the browser will hold a space with that width/height, even if the image can't be loaded?

Digressing...

So anyway, if we're going to ask the height to be set in ems, or use min-heights or what not, there's no reason that we can't also ask for the theme-preview img to be enclosed in a div of its own, too. That would solve that, I think? then ems for the bottom part.

[branchandroot]

If the image can't be loaded, if the path is broken, then yeah. But if there's simply no image to be output, then the img tag itself probably isn't there so there's nothing to have a height. Fun with script output and css!

(I shouldn't say that, because script output and css just fixed the last major problem with my third Modish theme.)

But, yes, if the img gets an enclosing div and the height is given to that, that should keep everything in line and .theme-desc can get a height of 5 ems or so and that should make room for third lines.

[afuna]

Huhmmmm belatedly, the image tag is printed out whether there is an image or not, but it looks like since the doctype is xhtml strict, we need to make the image display:inline-block before the width/height will have any effect if the image is broken? In FF3.5, at least. Not sure about other browsers.

[dragonscrawl]

While in my case the "Apply Style" button for style Gray (or Stepping Stones) is not hidden under the thumbnail, the placement of the thumbnail as I see it does lead to a white line going through the "Apply Style" button. I've not clicked below this white line to see which style it thinks I want, though.

This problem would probably also apply to the second row if there were three rows of styles, but there are not.

[branchandroot]

*nodnod* With as many custom layers as I have for testing, I do see three rows and all the three-liners do it. It appears there's a height defined for the table cells. *shakes head over people and their strange notions*