Adding whitespace between <li> elements

3 posts, 0 answers
  1. Rachael
    Rachael avatar
    27 posts
    Member since:
    Jul 2010

    Posted 23 Aug 2010 Link to this post

    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. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 24 Aug 2010 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rachael
    Rachael avatar
    27 posts
    Member since:
    Jul 2010

    Posted 25 Aug 2010 Link to this post

    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 += " ";
    }
Back to Top