contour tip working with legends - Contour

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

bob baty-barr 1180 posts 1294 karma points MVP

Aug 06, 2010 @ 15:53
3

Contour Tip - working with Legends
Hey, this is just a tip for working with legends in contour... My client was very inventive and found out how to add additional legend fields for descriptive areas within her contour forms -- which was excellent. But as anyone who works with CSS/XHTML on a regular basis understands... lables don't really style very well... especially with wrapping and widths.

the basic solution all over the web is to add <span></span> tags around the legend text... but since we don't have access to the output markup in contour [at least i don't think we do] -- enter jquery to the rescue [again :)]

basically, i have this function in my doc.ready statement.
```
$("legend").each(function() {
var t = $(this).text();
$(this).html("<span>" + t + "</span>");
 });
```
Then you just need to have a style that add a display:block; declartion for the spans in your legends... like this..
```
fieldset legend span {
    display:block;
    width: 450px;
}
```
hope that others find this a helpful post for woking with contour.
Copy Link
Comment author was deleted

Aug 06, 2010 @ 15:58

Hi Bob,

You could also update the /usercontrols/renderform.ascx and place span tags around the legend literal (however this will have an impact on all forms)

Copy Link
bob baty-barr 1180 posts 1294 karma points MVP

Aug 06, 2010 @ 16:01

0

Tim,

hey that is GREAT -- i had no idea if there was access to the form rendering... it might actually be worth it to add those spans to the the renderform.

thanks so much for the info... your reply is more helpful than my jquery hack!

#h5yr!

Copy Link
Greg Berlin 818 posts 634 karma points

Dec 01, 2010 @ 11:25

0

Hey... thanks for this, very helpful.. however it doesnt force the text to wrap in Firefox... rather the legend text keeps on one line, but it prevents it from destroying the layout of the rest of the page when the legend is too long.

Any ideas how i can force the text in the legend to wrap if its too long?

Copy Link
Kevon K. Hayes 255 posts 281 karma points

Jan 28, 2011 @ 22:45

0

@Greg you're right. Doesn't work.

Copy Link
Matt Brailsford 4125 posts 22222 karma points MVP 9x c-trib

Mar 04, 2011 @ 13:25
2
Hey Bob,

I'm doing something similar, except I swap the legend completley in favour of a H5 tag. Yea, it's not as semantic, but even having a span inside the legend, doesn't play nice in all browsers. My code is:
```
// Legends
$("legend").each(function () {
    var txt = $(this).text();
    $(this).replaceWith("<h5>" + txt + "</h5>");
});
```
@Tim. It would be cool if you could change the litteral to an actual HTML tag set to run at server:
```
<legend id="ctrlLegend" runat="server" />
```
That way, people could change it to whatever they want, and you still get control over it to be able to set it's value, and hide it if needs be.

Matt
Copy Link
Comment author was deleted

Mar 04, 2011 @ 13:39

@Matt, good idea!

Copy Link
Kevon K. Hayes 255 posts 281 karma points

Mar 04, 2011 @ 13:48

0

Way to go Matt, awesome use of your talents...

<matt>comes in and scores for the win</matt>

Copy Link
Matt Brailsford 4125 posts 22222 karma points MVP 9x c-trib

Mar 04, 2011 @ 13:55
2
PS @Bob, for what it's worth, you could simplify your script to the following:
```
$('legend').wrapInner('<span />');
```
Matt
Copy Link
bob baty-barr 1180 posts 1294 karma points MVP

Mar 04, 2011 @ 15:58

0

@Matt... thanks much! i am still quite the noob at jquery, but love the power it gives at run time :) i did not even know that wrapInner existed! now i do! #h5yr!

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?

Contour Tip - working with Legends