Unable to get text to word wrap in IE

2 posts, 0 answers
  1. Michael
    Michael avatar
    69 posts
    Member since:
    Jun 2008

    Posted 10 Sep 2008 Link to this post

    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.

    1     protected void rmEntities_ItemDataBound(object sender, RadMenuEventArgs e) 
    2     { 
    3       string targetURL =  
    4           ( (DataBinder.Eval(e.Item.DataItem, "TargetURL") == null) 
    5             ||  
    6             (string.IsNullOrEmpty(DataBinder.Eval(e.Item.DataItem, "TargetURL").ToString())) 
    7           ) 
    8           ? "#" 
    9           : DataBinder.Eval(e.Item.DataItem, "TargetURL").ToString(); 
    10  
    11       if (e.Item.Level == 0) 
    12       { 
    13         // start a link tag with our node class 
    14         e.Item.Controls.Add(new LiteralControl("<href='" + targetURL + "' class='EntityParentNode'>")); 
    15  
    16         // add title 
    17         Panel pnlTitle = new Panel(); 
    18         pnlTitle.CssClass = "EntityParentTitle"
    19         pnlTitle.Controls.Add(new LiteralControl(DataBinder.Eval(e.Item.DataItem, "NodeName").ToString())); 
    20  
    21         e.Item.Controls.Add(pnlTitle); 
    22       } 
    23       else if (e.Item.Level > 0) 
    24       { 
    25         // start a link tag with our node class 
    26         e.Item.Controls.Add(new LiteralControl("<href='" + targetURL + "' class='EntityNode'>")); 
    27  
    28         // add image 
    29         Image img = new Image(); 
    30         img.ImageUrl = PortalConfig.CategoryImagePath 
    31             + DataBinder.Eval(e.Item.DataItem, "ImageFile").ToString(); 
    32         img.Height = new Unit("75px"); 
    33         img.Width = new Unit("75px"); 
    34         img.CssClass = "EntityImage"
    35  
    36         e.Item.Controls.Add(img); 
    37  
    38         // add title 
    39         Panel pnlTitle = new Panel(); 
    40         pnlTitle.CssClass = "EntityTitle"
    41         pnlTitle.Controls.Add(new LiteralControl(DataBinder.Eval(e.Item.DataItem, "NodeName").ToString())); 
    42  
    43         e.Item.Controls.Add(pnlTitle); 
    44  
    45         // add description 
    46         Panel pnlDescription = new Panel(); 
    47         pnlDescription.CssClass = "EntityDescription"
    48         pnlDescription.Controls.Add(new LiteralControl(DataBinder.Eval(e.Item.DataItem, "EntityDescription").ToString())); 
    49  
    50         e.Item.Controls.Add(pnlDescription); 
    51       } 
    52  
    53       // close the link tag 
    54       e.Item.Controls.Add(new LiteralControl("</a>")); 
    55  
    56       // set additional css classes 
    57       e.Item.ExpandedCssClass = "NodeHighlight"
    58       e.Item.FocusedCssClass = "NodeHighlight"
    59     } 

    CSS:

    1 .rmItem 
    2
    3   font-family: Verdana; 
    4   background-color: White; 
    5
    6  
    7 .rmItem a, 
    8 .rmItem a:visited 
    9
    10   display: block; 
    11   color: #000000; 
    12   text-decoration: none; 
    13
    14  
    15 .rmItem a:hover 
    16
    17   color: #00847C;   
    18   text-decoration: none; 
    19
    20  
    21 .NodeHighlight 
    22
    23
    24  
    25 .HasChildren 
    26
    27   background-image:url("images/arrowright.png"); 
    28   background-position: right center; 
    29   background-repeat: no-repeat; 
    30
    31  
    32 .rmGroup 
    33
    34   border: 1px solid #666666; 
    35
    36  
    37 .EntityParentNode 
    38
    39   font-size: 12px; 
    40   text-align: left; 
    41   vertical-align: middle; 
    42   line-height: 20px;  
    43   cursor: pointer; 
    44   width: 190px; 
    45
    46  
    47 .EntityParentTitle 
    48
    49   padding-left: 2px; 
    50   width: 176px; 
    51   overflow: hidden;   
    52   white-space: nowrap; 
    53
    54  
    55 .EntityNode 
    56
    57   padding: 2px; 
    58   width: 285px; 
    59   cursor: pointer; 
    60   white-space: normal !important; 
    61   width: 290px; 
    62   text-align: left; 
    63
    64  
    65 .EntityImage 
    66
    67   float: left; 
    68
    69  
    70 .EntityTitle 
    71
    72   padding-left: 2px; 
    73   vertical-align: middle; 
    74   font-size: 12px; 
    75   font-weight: bold; 
    76   overflow: hidden; 
    77   height: 18px; 
    78   width: 200px; 
    79
    80  
    81 .EntityDescription 
    82
    83   padding-left: 2px; 
    84   vertical-align: middle; 
    85   font-size: 11px; 
    86   overflow: hidden; 
    87   height: 56px; 
    88   width: 200px; 
    89   white-space: normal !important;   
    90


    Any chance you see what is needed?

    Thanks for all your help and support!

    Michael
  2. Yana
    Admin
    Yana avatar
    4985 posts

    Posted 15 Sep 2008 Link to this post

    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.
Back to Top