I realize this is a CSS question, and not a rails question, so forgive
the off-topicness, but I thought rails users might have some
experience with this…
In my app I typically set one of two flash messages to inform users on
the sucess/failure of their actions. Ethier flash[:message] or
flash[:error] will be set. I want this to appear in the same place as
part of my site layout every time, so in my layouts/application.rhtml
I have an “if flash[:message]…” and an “if flash[:error]…” just
before my yield. I set CSS styles on them differently, message has a
green box border and green text, error is red, both are centered, so
on and so forth.
The problem is that I always have different size text in those boxes,
and so I can’t set the size of the div accuratley. Sometimes I have
two or three words, in which case I have a lot of whitespace inside
the box. If I make the box small then when I have longer flash text
most browsers won’t expand the div to fit the text.
Anyone run into this design issue before and know how to fix it? I
suppose in application.rhtml I could do a character count of the flash
and then size the div accordingly as part of the div tag, leaving all
size info out of my stylesheet, but that seems like a little more math
than I would prefer in a view.
Thanks!
[email protected] wrote:
The problem is that I always have different size text in those boxes,
and so I can’t set the size of the div accuratley. Sometimes I have
two or three words, in which case I have a lot of whitespace inside
the box. If I make the box small then when I have longer flash text
most browsers won’t expand the div to fit the text.
Anyone run into this design issue before and know how to fix it? I
suppose in application.rhtml I could do a character count of the flash
and then size the div accordingly as part of the div tag, leaving all
size info out of my stylesheet, but that seems like a little more math
than I would prefer in a view.
Thanks!
I usually allow the div to expand to the width of the window (default
behaviour), and simply give it a margin/padding. So rather than
explicitly setting a width or height, I just let it vertically expand
itself as necesary. This can be achieved by not setting width and
height attributes.
This may or may not work for your design.
If you want horizontal strictching as well as vertical, you can float
the div with “float: left;” but that may cause it’s own set of complex
CSS issues depending our our design.
[email protected] wrote:
Thanks for the try…
I probably should have been more specific. In all cases there is not
enough text in the flash/div to wrap over more than one line. So what
I really want is to automagically size the horizontal to match the
contents and center the box. Alas there is no float: center.
Try using a span instead. You’re describing the behavior of an inline
element. Just wrap a div with “text-align: center” around your span.
You should have no trouble setting padding background and border on a
span to do what you want.
Thanks for the try…
I probably should have been more specific. In all cases there is not
enough text in the flash/div to wrap over more than one line. So what
I really want is to automagically size the horizontal to match the
contents and center the box. Alas there is no float: center.
To clarify:
*the div (and thus the box made by outline:) is always centered.
*when the contents of the div are “blah, blah.” I want the box to be
just big enough to fit “blah, blah.” but when the contnts are “blah,
blah, blah. Blah, blah, blah, blah blah.” I want the box to be just
big enough to fit those contents.
*the div is always never more than row of text, in fact, I don’t
currently set height or width, which results in the div filling the
width of its container.
Woe for a overflow: expand; option.
—A
On May 9, 1:31 pm, Alex W. [email protected]