This is a migrated thread and some comments may be shown as answers.

Unable to get text to word wrap in IE

1 Answer 73 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 11 Sep 2008, 03:07 AM
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("<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("<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

1 Answer, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 15 Sep 2008, 10:46 AM
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.
Tags
Menu
Asked by
Michael
Top achievements
Rank 1
Answers by
Yana
Telerik team
Share this question
or