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.
Al E. (Guest)
on 2006-04-02 20: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
Gregory S. (Guest)
on 2006-04-02 21: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
Gravy F. (Guest)
on 2006-04-02 21: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?
Josh S. (Guest)
on 2006-04-02 21: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 S.
http://blog.hasmanythrough.com
Edward F. (Guest)
on 2006-04-02 21:50
(Received via mailing list)
Agreed--but it depends on your priorities.

Browser support for ems (e.g. IE) is much sketchier.
Al E. (Guest)
on 2006-04-02 22:12
Gregory S. 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
Ben M. (Guest)
on 2006-04-02 22: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.