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

Adding whitespace between <li> elements

2 Answers 37 Views
TagCloud
This is a migrated thread and some comments may be shown as answers.
Rachael
Top achievements
Rank 1
Rachael asked on 23 Aug 2010, 02:23 PM
I need to add whitespace between the <li> elements that get generated as part of the HTML output of the RadTagCloud and I can't figure out how to do it.  It's causing a problem in my design in IE 7.

I've attached a screenshots of the page in IE7 (not working - text "escapes" outside the yellow Frequently Searched Terms box) and IE8 (working - text is confined inside the yellow Frequently Searched Terms box).

Viewing the source of my page shows this is the HTML output of the cloud control:

<!-- 2010.2.713.40 --><ul class="rtcTagList">

<li class="rtcTagItem"><a href="/issues/1/agriculture-food-nutrition.aspx" rel="tag" title="Agriculture, Food, Nutrition" style="font-size:10px;">Agriculture, Food, Nutrition</a></li><li class="rtcTagItem"><a href="/issues/2/commerce-industry.aspx" rel="tag" title="Commerce &amp; Industry" style="font-size:11px;">Commerce & Industry</a></li><li class="rtcTagItem"><a href="/issues/3/culture-media.aspx" rel="tag" title="Culture &amp; Media" style="font-size:10px;">Culture & Media</a></li><li class="rtcTagItem"><a href="/issues/4/education-labor.aspx" rel="tag" title="Education &amp; Labor" style="font-size:13px;">Education & Labor</a></li><li class="rtcTagItem"><a href="/issues/5/energy.aspx" rel="tag" title="Energy" style="font-size:11px;">Energy</a></li><li class="rtcTagItem"><a href="/issues/6/environment-natural-resources.aspx" rel="tag" title="Environment &amp; Natural Resources" style="font-size:13px;">Environment & Natural Resources</a></li><li class="rtcTagItem"><a href="/issues/7/government-operations-budget.aspx" rel="tag" title="Government Operations &amp; Budget" style="font-size:11px;">Government Operations & Budget</a></li><li class="rtcTagItem"><a href="/issues/8/health-human-services.aspx" rel="tag" title="Health &amp; Human Services" style="font-size:15px;">Health & Human Services</a></li><li class="rtcTagItem"><a href="/issues/9/immigration.aspx" rel="tag" title="Immigration" style="font-size:11px;">Immigration</a></li><li class="rtcTagItem"><a href="/issues/10/international-relations-trade.aspx" rel="tag" title="International Relations &amp; Trade" style="font-size:20px;">International Relations & Trade</a></li>

</ul><input id="ctl00_ctl00_ctl00_cphBody_cphContent_cphContent_fsProfile_cldTerms_ClientState" name="ctl00_ctl00_ctl00_cphBody_cphContent_cphContent_fsProfile_cldTerms_ClientState" type="hidden" />

As you can see, the <li> elements are all jammed together with no carriage returns, spaces, tabs, nothing, which is not standard.  At a minimum, you'd write an unordered list like this:

<ul>
<li>item 1</li>
<li>item 2</li>
</ul>

If I view source of my page, copy all the HTML and put it in a new static HTML page with carriage returns between the <li> elements as I indicated in the example above, the page displays correctly in both IE7 and IE8. So I ultimately need the HTML output of the TagCloud to look like this:

<!-- 2010.2.713.40 --><ul class="rtcTagList">

<li class="rtcTagItem"><a href="/issues/1/agriculture-food-nutrition.aspx" rel="tag" title="Agriculture, Food, Nutrition" style="font-size:10px;">Agriculture, Food, Nutrition</a></li>
<li class="rtcTagItem"><a href="/issues/2/commerce-industry.aspx" rel="tag" title="Commerce &amp; Industry" style="font-size:11px;">Commerce & Industry</a></li>
<li class="rtcTagItem"><a href="/issues/3/culture-media.aspx" rel="tag" title="Culture &amp; Media" style="font-size:10px;">Culture & Media</a></li>
<li class="rtcTagItem"><a href="/issues/4/education-labor.aspx" rel="tag" title="Education &amp; Labor" style="font-size:13px;">Education & Labor</a></li>
<li class="rtcTagItem"><a href="/issues/5/energy.aspx" rel="tag" title="Energy" style="font-size:11px;">Energy</a></li>
<li class="rtcTagItem"><a href="/issues/6/environment-natural-resources.aspx" rel="tag" title="Environment &amp; Natural Resources" style="font-size:13px;">Environment & Natural Resources</a></li>
<li class="rtcTagItem"><a href="/issues/7/government-operations-budget.aspx" rel="tag" title="Government Operations &amp; Budget" style="font-size:11px;">Government Operations & Budget</a></li>
<li class="rtcTagItem"><a href="/issues/8/health-human-services.aspx" rel="tag" title="Health &amp; Human Services" style="font-size:15px;">Health & Human Services</a></li>
<li class="rtcTagItem"><a href="/issues/9/immigration.aspx" rel="tag" title="Immigration" style="font-size:11px;">Immigration</a></li>
<li class="rtcTagItem"><a href="/issues/10/international-relations-trade.aspx" rel="tag" title="International Relations &amp; Trade" style="font-size:20px;">International Relations & Trade</a></li>

</ul><input id="ctl00_ctl00_ctl00_cphBody_cphContent_cphContent_fsProfile_cldTerms_ClientState" name="ctl00_ctl00_ctl00_cphBody_cphContent_cphContent_fsProfile_cldTerms_ClientState" type="hidden" />


Is it possible to do this?  If so, how?

2 Answers, 1 is accepted

Sort by
0
Pero
Telerik team
answered on 24 Aug 2010, 08:47 AM
Hi Rachael,

I am not sure whether the absence of carriage returns and whitespace between the <li> elements, causes the problem under IE7 browser, since I tested the HTML that you provided and did not experience such problem. I think that this is a CSS related issue. That's why I would like to ask you to provide a sample project that will help us reproduce the issue locally. You can also provide a live URL where we can observe the behavior.

Greetings,
Pero
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Rachael
Top achievements
Rank 1
answered on 25 Aug 2010, 03:18 PM
For anyone interested in the solution, IE6 & 7 have problems with <li>s that don't have whitespace between the <li> elements. While there isn't a way that I know of to add whitespace BETWEEN the <li> elements, if you append a space on to the end of the text INSIDE the <li> elements it achieves the same effect.  To do this, handle the ItemDataBound event of the TagCloud and modify the text property of every item by appending an extra space.  For example,

<telerik:RadTagCloud ID="cld" runat="server" DataTextField="[YOUR DATA TEXT FIELD]" DataWeightField="[YOUR WEIGHT FIELD]" OnItemDataBound="cld_ItemDataBound" />

protected void cld_ItemDataBound(object sender, Telerik.Web.UI.RadTagCloudEventArgs e)
{
    e.Item.Text += " ";
}
Tags
TagCloud
Asked by
Rachael
Top achievements
Rank 1
Answers by
Pero
Telerik team
Rachael
Top achievements
Rank 1
Share this question
or