PDA

View Full Version : Setting list and list item styles for Html widget



afs
8 Nov 2009, 1:47 AM
I am trying to use the Ext GWT Html widget to display fragments of HTML that may include lists of ordered and unordered list items.

I have seen previous posts regarding the setting of the default style for the basic html elements, such as ul, ol and li:

http://www.extjs.com/forum/showthread.php?t=3630
http://www.extjs.com/forum/showthread.php?t=83976

I can appreciate the argument for needing to set the style of the basic elements to minimize cross browser effects.

The problem I am having is that I cannot figure out how to specify the style rules to get ordered and unordered list items to display numbers and bullets (respectively).

Playing around with the styles using Firebug, I found that if I disable (click on the circle with diagonal bar) the inherited padding and list-style-type styles I get the default list item markers (which is what I want), or if I explicitly set the padding (e.g. to 20px) and the list-item-style (e.g. to circle) then I also get the desired effect.

However, I cannot manage to make this work in an Ext GWT program.

Here is a simple test case:



public void onModuleLoad()
{
viewport = new Viewport();
html = new Html("<div>Ordered List:<ol><li>First Item</li><li>Second Item</li></ol>Unordered List:<ul><li>First Item</li><li>Second Item</li></ul></div>");
html.setStyleName("test-style");
viewport.add(html);
RootPanel.get().add(viewport);
}
The documentation for setStyleName says (as displayed by Eclipse, which looks like it is pulling it from the inherited UIObject javadoc):

Clears all of the object's style names and sets it to the given style. You should normally use setStylePrimaryName(String) (http://www.extjs.com/forum/eclipse-javadoc:%E2%98%82=CB/%5C/opt%5C/eclipse%5C/plugins%5C/com.google.gwt.eclipse.sdkbundle.linux_1.7.1.v200909221731%5C/gwt-linux-1.7.1%5C/gwt-user.jar%3Ccom.google.gwt.user.client.ui%28UIObject.class%E2%98%83UIObject%7EsetStyleName%7ELjava.lang.String;%E2%98%82%E2%98%82setStylePrimaryName%E2%98%82String) unless you wish to explicitly remove all existing styles.


Next, if I include a style sheet that defines the following styles:




.test-style ul li {
color: red;
padding: 20px;
list-style-type: circle;
}
.test-style ol li {
color: blue;
padding: 20px;
list-style-type: decimal;
} And then include a reference to it in my application html:



<link rel="stylesheet" type="text/css" href="resources/css/gxt-all.css" />
<link rel="stylesheet" type="text/css" href="CB.css" />
And look at the HTML styles (e.g. for the unordered list item) using Firebug, I get something like:



CB.css (line 1)
.test-style ul li {
color:red;
list-style-type:circle;
padding:20px;
}
gxt-all.css (line 8)
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {
margin:0;
padding:0; /* firebug displays this style with a line through it */
}
Inherited from ul
gxt-all.css (line 8)
ol, ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none; /* firebug displays this style with a line through it */
}
Firebug shows that the styles are cascading as expected. However, what I see in Firefox (3.0.15 under Ubuntu 9) is the specified color, the specified padding, but no list marker.

There are lots of moving parts here, so it is possible (likely?) that I've missed something.

Can anyone tell me how to get the list marker to display, or if there is a better approach altogether?

Thanks

afs
8 Nov 2009, 2:04 AM
Creating the original post must of freed my mind... I've now tried a few more things, and it appears that the trick is the padding of the containing div field. If I create a style for the div, I am at last getting the list markers!



.test-style div {
padding: 20px;
}

Martin.Trummer
9 Nov 2009, 2:29 AM
and it's also been asked here: http://www.extjs.com/forum/showthread.php?t=81940