Forum: Ruby on Rails Neat style trick

Announcement (2017-05-07): www.ruby-forum.com is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see rubyonrails.org/community and ruby-lang.org/en/community for other Rails- und Ruby-related community platforms.
807e34b31d5463a9ac05d41458a9e537?d=identicon&s=25 Al Evans (al-evans)
on 2006-04-02 18:32
Not terribly exciting, but I was happy to think of it.

I needed a div with a fixed height that could vary depending on page
content.

So I did this:

<div class="listcntnr" style="height: <%= @users.size / 2 * 125%>px">

Whee!

--Al Evans
675475d0b65710be6d992eb5eb2c61c2?d=identicon&s=25 Gregory Seidman (Guest)
on 2006-04-02 19:01
(Received via mailing list)
On Sun, Apr 02, 2006 at 06:32:58PM +0200, Al Evans wrote:
} Not terribly exciting, but I was happy to think of it.
}
} I needed a div with a fixed height that could vary depending on page
} content.
}
} So I did this:
}
} <div class="listcntnr" style="height: <%= @users.size / 2 * 125%>px">

Very nice, but I have a recommendation. It's best to give heights and
widths (and occasionally margins and paddings, though not usually) in
exes
and/or ems. If your user has set a larger (or smaller) font, or uses
Firefox's ctrl-plus and ctrl-minus to change the font size, a
pixel-sized
box will truncate things or scroll or otherwise look wrong, whereas an
ex-
or em-sized box will adjust to fit the text.

} Whee!
} --Al Evans
--Greg
31ae911dd0fe0ee0b81519d6d2627886?d=identicon&s=25 Gravy Face (gravyface)
on 2006-04-02 19:23
(Received via mailing list)
I'm curious -- if the height is determined by page content, couldn't
you just let the contents of the page determine the height?
9f0f89bbd9e1ecfbaab6584e429b7a2f?d=identicon&s=25 Josh Susser (jsusser)
on 2006-04-02 19:49
Al Evans wrote:
> Not terribly exciting, but I was happy to think of it.
>
> I needed a div with a fixed height that could vary depending on page
> content.
>
> So I did this:
>
> <div class="listcntnr" style="height: <%= @users.size / 2 * 125%>px">
>
> Whee!

That's cute. If you want to do that sort of thing in the CSS file, you
can make an ERb template to generate the CSS too:

http://blog.hasmanythrough.com/articles/2006/03/23...

Though your particular example probably isn't a great one to generate
CSS for a view where the div height will change each time you look at
it.

--
Josh Susser
http://blog.hasmanythrough.com
41e1579600683eed6c00af9a425268e6?d=identicon&s=25 Edward Frederick (Guest)
on 2006-04-02 19:50
(Received via mailing list)
Agreed--but it depends on your priorities.

Browser support for ems (e.g. IE) is much sketchier.
807e34b31d5463a9ac05d41458a9e537?d=identicon&s=25 Al Evans (al-evans)
on 2006-04-02 20:12
Gregory Seidman wrote:


> Very nice, but I have a recommendation. It's best to give heights and
> widths (and occasionally margins and paddings, though not usually) in
> exes
> and/or ems. If your user has set a larger (or smaller) font, or uses
> Firefox's ctrl-plus and ctrl-minus to change the font size, a
> pixel-sized
> box will truncate things or scroll or otherwise look wrong, whereas an
> ex-
> or em-sized box will adjust to fit the text.

In general, I agree. In this case, the height of the individual element
is determined by the (fixed) height of a picture.

gravy face wrote:

> I'm curious -- if the height is determined by page content, couldn't
> you just let the contents of the page determine the height?

This is a display: hidden; container for an arbitrary number 1..10 of
float: left; elements. According to my tests (FireFox only so far), the
container thinks they're all on the same line. But I'm no CSS guru.

--Al Evans
4005a47a8f2ceee49670b920593c1d52?d=identicon&s=25 Ben Munat (Guest)
on 2006-04-02 20:53
(Received via mailing list)
Do you have any documentation references on this? Methinks this is an
urban legend. I have
been using em as my primary unit for years and have seen no ill effects.

My general rule of thumb -- and I've seen it recommended elsewhere -- is
to a) set the
body font size with ems and then use percentages for font-size on all
child elements and
b) use em for all margin/padding/widths that need to expand to
accomodate font size
changes and use px for those that should not expand with font size.

b
This topic is locked and can not be replied to.