using HTML inside an element in a ListSelect

I’m trying to display a list of numbers in a ListSelect. I want the numbers to line up, so I’ll need to pad smaller numbers with leading spaces so they line up correctly. The problem is, if I put some leading spaces as padding to get the values to line up, they’re interpreted as a single space in the browser. No problem, I’ll use   which will produce the desired effect.

The catch is when I set a display string for items in a list select, the &'s in the   get escaped out to & which is definitely not what I want to happen. Is there a way to say “this content is XHTML” like with the Label class, but for ListSelect items?

Thanks.

This is what I’m trying to get rendered in the browser:


<select>
<option>&nbsp;&nbsp;1</option>
<option>&nbsp;10</option>
<option>&nbsp;44</option>
<option>100</option>
</select>

This way the numbers line up correctly. But the &'s are “helpfully” escaped out. I have been trying to step through the Vaadin code to see if I can find where in the call chain this escaping happens, but I have not been able to track it down. Does it happen when the data is marshalled into UIDL and sent over to the client?

I can’t believe I’m the first person to try and do this. Anyone know a workaround?

How about something like

NativeSelect s = new NativeSelect("Select a number");
_l.addComponent(s);
s.addItem("100");
s.addItem("\u00A010");
s.addItem("\u00a0\u00a0 1");

Demo:

http://uilder.virtuallypreinstalled.com/run/selectTest/PRIVATE-d5Hp4dU0iqqJcUr7E1gvuZR5B2w%3D

I had an idea that you might use css, text-align:right to align all the values to the right, removing the problem of padding the value. However, applying that did not have any effect. I read on the webs that you can do that to s so I’m guessing that something in the vaadin theme is stopping me from doing that. I just can’t spot what. Anyone else wanna give it a try?

Yeah, and you probably have to use a monospace font to make this alignment work neatly. The problem can be spotted in Joonas’ example.

The string gets passed on to the client unescaped, but GWT escapes all characters (we’re using GWT ListBox as the base for our ListSelect). The line where this is happening, in our code, is here:
http://dev.vaadin.com/browser/versions/6.2/src/com/vaadin/terminal/gwt/client/ui/VListSelect.java#L51

There’s nothing in Vaadin themes that prevents text-align:right. I was able to make it work in Firefox 3.5, adding it directly to the select elements style, but it didn’t work in Safari (Webkit). Tested on OSX.

Hmm… seems like there is some problems with how different browsers interpret it then.

I did this:

Window mainWindow = new Window("Playground Application");
mainWindow.setSizeFull();
NativeSelect select = new NativeSelect("My ListSelect");
select.addItem("hello");
select.addItem("there");
select.setWidth("100px");
select.setStyleName("mySelect");
mainWindow.addComponent(select);
setMainWindow(mainWindow);
setTheme("playgroundtheme");

and then for the theme:

.mySelect{
text-align:right;
}

Tested with both Chrome and IE8 and it didn’t work. I guess we’re out of luck then :frowning:

Yep, this worked very nicely. Thank you very much for the workaround.