PDA

View Full Version : [CLOSED] Gridpanel rendering ordered list as bullet list



RCM
Feb 27, 2013, 6:40 PM
Good day,

I am trying to render an ordered list in a gridpanel cell but it is rendering a a bullet list. Any ideas on this? Please offer some assistance. see sample below.





<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.Net Example</title>
<style type="text/css">
ol
{
list-style-type:decimal;
}
</style>
<script>
var getData = function () {
var item = ' <ol><li>?<span style=\'font: 11px/14px Arial, Helvetica, sans; text-align: justify; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; float: none; display: inline !important; white-space: normal; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;\'>' +
'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters</span>' +
'</li><li><span style=\'font: 11px/14px Arial, Helvetica, sans; text-align: justify; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; float: none; display: inline !important; white-space: normal; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;\'></span></li>' +
'<li><span style=\'font: 11px/14px Arial, Helvetica, sans; text-align: justify; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; float: none; display: inline !important; white-space: normal; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;\'><span style=\'font: 11px/14px Arial, Helvetica, sans; text-align: justify; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; float: none; display: inline !important; white-space: normal; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;\'>' +
'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters</span></span></li></ol>';
var data = [];
data.push({ company: item, price: 71.72, change: 0.02 });

App.GridPanel1.store.loadData(data);
};

</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server" Cls="x-grid-summary" AutoHeight="true" StyleHtmlContent ="true" ColumnLines ="false" RowLines = "false"
>
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat = "server">
<Fields>
<ext:ModelField Name="company" />
<ext:ModelField Name="price" Type ="float" />
<ext:ModelField Name="change" Type="float" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" ID="company" Text="Test1" Width ="1000" DataIndex="company" />
<ext:Column runat="server" ID="price" Width="250" Text="Test2" Align="Right" DataIndex="price" />
<ext:Column runat="server" ID="change" Text="Test3" Align="Right" DataIndex="change" />
</Columns>
</ColumnModel>
<Listeners>
<ViewReady Handler="getData()" />
</Listeners>
</ext:GridPanel>
</form>
</body>
</html>

Baidaly
Feb 27, 2013, 10:26 PM
Hello!

Couldn't reproduce this problem with Ext.NET from trunk: 5732

What version of Ext.NET and Ext JS do you use? Also, can you check CSS rules applied for this list?

Baidaly
Feb 27, 2013, 10:38 PM
Hello!

Try to use the following CSS rule:



<style type="text/css">
ol li
{
list-style-type:decimal !important;
}
</style>


However, this is not reproducible with Ext.NET from trunk

Vladimir
Feb 28, 2013, 5:22 AM
The issue is related with CSS reseting, ExtJS reset default browser styles
CSS reseting is removed in latest ExtJS version