Sizing/wrapping child template content

[Jordan]

I am new to web development, my appologies if this question is basic or off topic.

How can I set a width for the content of leaf nodes in a tree.  For example, below the list of products scrolls off the screen and a scrollbar is visible at the bottom of the page. Is there a way to set a width and have the text wrap.  Setting Html width properties on the template or on the treeview .HtmlAttributes() method do not seem to work.

 

 

<% Html.Telerik().TreeView()

    .Name(

 

"Merchants")

 

 

    .HtmlAttributes(

 

"width=100")

 

 

    .BindTo(Model, (item, merchant) =>

    {

        item.Text = merchant.Name;

        item.Content = () =>

        {%>

 

            <div>

 

                <ul>

 

 

                    <li>Products: <%: string.Join(", ", merchant.Products) %></li> 
                </ul> 
            </div>

 

        <%};

    })

    .Render();

%>

 

 

Thanks for the help!

 

[Alex Gyoshev]

Hi Jordan,

Though it is not advisable, you can enable text wrapping with the following HtmlAttributes:

    .HtmlAttributes(new { style = "width: 100%; white-space: normal" })

A better solution would be to let the content grow vertically, i.e.

    <div>
        <ul>
            <li>Products:
                <ul>
                    <% foreach (var product in merchant.Products) { %>
                        <li><%: product %></li>
                    <% } %>
                </ul>
            </li>
        </ul>
    </div>

Sincerely yours,
Alex Gyoshev
the Telerik team