E-mail List Archives
Thread: Legend with in a fielset
Number of posts in this thread: 3 (In chronological order)
From: Jadhav, Ashitosh
Date: Fri, Feb 18 2011 3:39AM
Subject: Legend with in a fielset
No previous message | Next message →
Hi,
I have a form page and I do have fieldset and legend to describe it. The issue is that the text inside the legend is too big and I am not able get it wrapped. Can anyone help me how can I set a width to a legend and get it text in two line without using a <br /> tag.
From: Sailesh Panchang
Date: Fri, Feb 18 2011 7:33AM
Subject: Re: Legend with in a fielset
← Previous message | Next message →
Hello Ashitosh,
First thought is: can the legend text be shortened and be
significantly briefer? The legend text is read with every fields in
the fieldset and it will pose a usability problem.
Using the <br> tag is the easiest. Else you can split the legend text
into two span or div elements and then float one below the other. Will
need some trial and error to get it just right across IE/FF and other
browsers you care to test in.
Rightho,
Sailesh Panchang
On 2/18/11, Jadhav, Ashitosh < = EMAIL ADDRESS REMOVED = > wrote:
> Hi,
>
> I have a form page and I do have fieldset and legend to describe it. The
> issue is that the text inside the legend is too big and I am not able get it
> wrapped. Can anyone help me how can I set a width to a legend and get it
> text in two line without using a <br /> tag.
>
>
From: Jukka K. Korpela
Date: Fri, Feb 18 2011 8:24AM
Subject: Re: Legend with in a fielset
← Previous message | No next message
Jadhav, Ashitosh wrote:
> I have a form page and I do have fieldset and legend to describe it.
> The issue is that the text inside the legend is too big and I am not
> able get it wrapped. Can anyone help me how can I set a width to a
> legend and get it text in two line without using a <br /> tag.
I'm afraid it's impossible, since browsers implement legend elements in
rather inflexible ways - and differently (e.g., Chrome breaks a legend into
several lines automatically if needed). Setting
legend { white-space: normal }
in CSS helps on Firefox but not on IE.
This is related to the way visual browsers usually render legend elements.
The legend text cuts the top border of a fieldset element, appearing in
place of the border, and this more or less postulates that the text fits not
only on one line but in the horizontal space available in such rendering
(the width of the fieldset minus some padding).
I think the way to deal with this is that legend elements should be treated
as heading-like overviews or summaries and kept so short that it normally
does not matter that browsers tend to keep the legend on one line. Detailed
explanations can be given after the legend element. Such an approach matches
the general idea that texts should be presented "heads up" so that first the
most essential part is given in a short, understandable, easy to read way,
followed by details. So, for example, a legend might contain the text
"Personal details", whereas the explanation which details are prompted for
and why would appear after the legend element, to be rendered as normal
content.
--
Yucca, http://www.cs.tut.fi/~jkorpela/