Unable to get text to word wrap in IE

[Michael]

I am having a heck of a time trying to get our custom RadMenu to wrap text within IE.  It works great in Firefox.

We are building our menu item nodes dynamically on the ItemDataBound event.  The code is below, and then under that is the CSS we are using.  We had tried adding "white-space:normal" but that didn't work.  In fact, when using IE Developer Toolbar, the white-space style was always set to nowrap no matter what we used - even when using !important (this was all for the .EntityDescription class).

Also, I am not sure if this way of building the menu is the best, but we experimented until everything seemed to work out.  I could not find much in the documentation about building a dynamic menu where the root and children are using different "templates".  As you can see, I am not really using templates to accomplish this.

	protected void rmEntities_ItemDataBound(object sender, RadMenuEventArgs e)
	{
	string targetURL =
	( (DataBinder.Eval(e.Item.DataItem, "TargetURL") == null)
	||
	(string.IsNullOrEmpty(DataBinder.Eval(e.Item.DataItem, "TargetURL").ToString()))
	)
	? "#"
	: DataBinder.Eval(e.Item.DataItem, "TargetURL").ToString();
	if (e.Item.Level == 0)
	{
	// start a link tag with our node class
	e.Item.Controls.Add(new LiteralControl("<a href='" + targetURL + "' class='EntityParentNode'>"));
	// add title
	Panel pnlTitle = new Panel();
	pnlTitle.CssClass = "EntityParentTitle";
	pnlTitle.Controls.Add(new LiteralControl(DataBinder.Eval(e.Item.DataItem, "NodeName").ToString()));
	e.Item.Controls.Add(pnlTitle);
	}
	else if (e.Item.Level > 0)
	{
	// start a link tag with our node class
	e.Item.Controls.Add(new LiteralControl("<a href='" + targetURL + "' class='EntityNode'>"));
	// add image
	Image img = new Image();
	img.ImageUrl = PortalConfig.CategoryImagePath
	+ DataBinder.Eval(e.Item.DataItem, "ImageFile").ToString();
	img.Height = new Unit("75px");
	img.Width = new Unit("75px");
	img.CssClass = "EntityImage";
	e.Item.Controls.Add(img);
	// add title
	Panel pnlTitle = new Panel();
	pnlTitle.CssClass = "EntityTitle";
	pnlTitle.Controls.Add(new LiteralControl(DataBinder.Eval(e.Item.DataItem, "NodeName").ToString()));
	e.Item.Controls.Add(pnlTitle);
	// add description
	Panel pnlDescription = new Panel();
	pnlDescription.CssClass = "EntityDescription";
	pnlDescription.Controls.Add(new LiteralControl(DataBinder.Eval(e.Item.DataItem, "EntityDescription").ToString()));
	e.Item.Controls.Add(pnlDescription);
	}
	// close the link tag
	e.Item.Controls.Add(new LiteralControl("</a>"));
	// set additional css classes
	e.Item.ExpandedCssClass = "NodeHighlight";
	e.Item.FocusedCssClass = "NodeHighlight";
	}

CSS:

	.rmItem
	{
	font-family: Verdana;
	background-color: White;
	}
	.rmItem a,
	.rmItem a:visited
	{
	display: block;
	color: #000000;
	text-decoration: none;
	}
	.rmItem a:hover
	{
	color: #00847C;
	text-decoration: none;
	}
	.NodeHighlight
	{
	}
	.HasChildren
	{
	background-image:url("images/arrowright.png");
	background-position: right center;
	background-repeat: no-repeat;
	}
	.rmGroup
	{
	border: 1px solid #666666;
	}
	.EntityParentNode
	{
	font-size: 12px;
	text-align: left;
	vertical-align: middle;
	line-height: 20px;
	cursor: pointer;
	width: 190px;
	}
	.EntityParentTitle
	{
	padding-left: 2px;
	width: 176px;
	overflow: hidden;
	white-space: nowrap;
	}
	.EntityNode
	{
	padding: 2px;
	width: 285px;
	cursor: pointer;
	white-space: normal !important;
	width: 290px;
	text-align: left;
	}
	.EntityImage
	{
	float: left;
	}
	.EntityTitle
	{
	padding-left: 2px;
	vertical-align: middle;
	font-size: 12px;
	font-weight: bold;
	overflow: hidden;
	height: 18px;
	width: 200px;
	}
	.EntityDescription
	{
	padding-left: 2px;
	vertical-align: middle;
	font-size: 11px;
	overflow: hidden;
	height: 56px;
	width: 200px;
	white-space: normal !important;
	}

Any chance you see what is needed?

Thanks for all your help and support!

Michael

[Yana]

Hello Michael,

I tested your code and I'm not sure where the problem is. The div with the style EntityDescription has fixed width and height and the text is wrapped as expected. Please explain in more detail about the issue you're facing. Thanks

Regards,
Yana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.