Getting LEGEND tags to wrap text properly.

Posted by DA on Stack Overflow See other posts from Stack Overflow or by DA
Published on 2010-03-25T20:02:18Z Indexed on 2010/03/25 20:03 UTC
Read the original article Hit count: 523

Filed under:

legend

|

css

Legend tags are always a nuisance as they don't adhere to a lot of CSS rules.

I'm trying to get the text within a LEGEND tag to wrap using the typical solution of wrapping the text in the LEGEND with a span and setting the width and display: block.

 <legend>
    <span style="border: 1px solid blue; width: 250px; display: block">
        This text should wrap if it gets longer than 250px in width
    </span>
 </legend>

I thought this used to work In Firefox, but does not appear to work anymore in 3.6. Sample:

http://jsbin.com/exeno/5

It still works in IE.

Has anyone found a fix for this or is it just a matter of forgoing LEGEND tags and go back to H# tags?

© Stack Overflow or respective owner

Related posts about legend

HOW TO: Draggable legend in matplotlib

as seen on Stack Overflow - Search for 'Stack Overflow'
QUESTION: I'm drawing a legend on an axes object in matplotlib but the default positioning which claims to place it in a smart place doesn't seem to work. Ideally, I'd like to have the legend be draggable by the user. How can this be done? SOLUTION: Well, I found bits and pieces of the solution… >>> More
How to exclude series in legend (Flex)

as seen on Stack Overflow - Search for 'Stack Overflow'
Hello, In flex charting, I want to draw something like "reference lines" which are related to specific series, therefore these lines are not independent series and should not be shown in legend. Is it possible to exclude some series from chart legend? Thanks! >>> More
Change the size of the text in legend according to the length of the legend vector in the graph

as seen on Stack Overflow - Search for 'Stack Overflow'
I have to draw a 20 plots and horizontally place a legends in each plots. I gave the following command for the first plot: plot(x=1:4,y=1:4) legend("bottom",legend = c("a","b","c","d"),horiz=TRUE,text.font=2,cex=0.64) then for the second plot I tried : plot(x=1:2,y=1:2) legend("bottom",legend… >>> More
Getting LEGEND tags to wrap text properly.

as seen on Stack Overflow - Search for 'Stack Overflow'
Legend tags are always a nuisance as they don't adhere to a lot of CSS rules. I'm trying to get the text within a LEGEND tag to wrap using the typical solution of wrapping the text in the LEGEND with a span and setting the width and display: block. <legend> <span style="border: 1px… >>> More
The Legend of Digital Zelda [Video]

as seen on How to geek - Search for 'How to geek'
This clever animation project combines a real-world set, a great soundtrack, and a novel approach to showcasing the adventure Link goes through to rescue Zelda. The Legend of Digital Zelda [via TUAW] Why Does 64-Bit Windows Need a Separate “Program Files (x86)” Folder? Why Your… >>> More

Related posts about css

HTMLUNIT Facebook javascript warning

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi I am trying to create simple application that would be able to search people on facebook using given e-mail. I am already able to log into an account using the HTMLunit tool and even create a page, which should throw result of my search. But when I try to print the result as XML the file is missing… >>> More
$this->headLink() includes duplicated script

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, Just like I did before, I used the following code for my new project. <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/button.css');?> <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/inputText.css');?> <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/fancyTable… >>> More
How much multiple style sheets slow down to website?

as seen on Stack Overflow - Search for 'Stack Overflow'
Here is 3 css file (one is only for IE) <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"> <!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie… >>> More
mod_pagespeed is rewriting but not combining

as seen on Stack Overflow - Search for 'Stack Overflow'
I have the following problem. I installed mod_pagespeed but i am not getting the results i want! It does rewrite my css and changes the to the cache url but its not combining the css files. I have seached the web and stackoverflow for it but did not find a solution. Here are the tags <link… >>> More
CSS import or multiple CSS files

as seen on Stack Overflow - Search for 'Stack Overflow'
I originally wanted to include a .css in my HTML doc that loads multiple other .css files in order to divide up some chunks of code for development purposes. I have created a test page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional… >>> More