setting font in popup window

I'm having difficulties in not being able to set the font properties in a combo popup window. I'm using CSS and other properties are working fine.

.obj-popup {top:0px;height:400px;width:400px;font:bold;}

I'm actually trying to set the font to be monospaced due to the data inside it. Bold is my latest attempt. It seems that whatever property is applied to the font, nothing happens.

I've tried the other CSS attributes as well with no luck.

Clarification:

#.obj {....; font:courier;} <- this works fine!

#.obj-popup {....;font courier;} <- this does not work :(

When an element is selected from the popup list back to the main combo, it shows properly with proper spacing. Trying to get some simple columns:

001 Peanut Butter Yummy
002 Jelly Not Yummy

It appears you're not not using the CSS selector syntax correctly. Read this to understand the differences first -
http://www.w3.org/TR/CSS2/selector.html
and learn what # and . refer to.

font:font-name is the correct syntax. You may also need to add !important immediately after the font name to override the default AW ones in some cases.

My posting was bad. The problem still persists. The correct example is

#obj {....; font:courier;} <- this works fine!

#obj-popup {....;font courier;} <- this does not work :(

Where obj is the object that is the actual text box portion of AW.UI.Combo. The display of the text inside here, once the item has been selected is properly spaced.

The popup list; however, is not spaced the same. I'm very much wanting the popup list to have the same font and spacing as the textbox.

Bill

I have never been able to define the font in the popup with standard css, instead I have used the following on the control itself:

_UISE1_.getPopupTemplate().setStyle("width","300");
_UISE1_.getPopupTemplate().setStyle("height","300");
_UISE1_.getPopupTemplate().getItemTemplate().setStyle("font-size","18px");
_UISE1_.getPopupTemplate().getItemTemplate().setStyle("height","26px");
_UISE1_.getContent("box/text").setStyle("font-size", "18px");
_UISE1_.getContent("box/text").setStyle("text-align", "top");
_UISE1_.getContent("box/text").setStyle("border", "none")

Here is an aprox. css-js combo styles-comparsion to play with.
Just comment/uncomment css or it's corresponding js code to check desired results ( not tested ) , but should be enough as start point.
HTH

<script> 
var obj = new AW.UI.Combo;
obj.setId('comboID');
obj.setControlText("Combo");
obj.setControlImage("favorites");
obj.setItemText(["Home", "Favorites", "Font size", "Search"]);
obj.setItemCount(4);
</script> 

<style>
 #comboID {width: 400px; height: 42px; font-size: 18px } 
</style>
<script> 
obj.setStyle("width","400");
obj.setStyle("height","42");
obj.setStyle("font-size", "18px");
</script> 

<style>
 #comboID .aw-box { background: #fca } 
</style>
<script> 
obj.getContent("box").setStyle("background", "fca");
</script> 

<style>
 #comboID .aw-box-text { font-size: 18px; text-align: top } 
</style>
<script> 
obj.getContent("box/text").setStyle("font-size", "18px");
obj.getContent("box/text").setStyle("text-align", "top");
</script>  

<style>
    #comboID-popup {width: 400px; height: 300px; background: #fca}
</style>    
<script>
obj.getPopupTemplate().setStyle("width","400");
obj.getPopupTemplate().setStyle("height","300");
obj.getPopupTemplate().setStyle("background","fca");
</script>

<style>    
#comboID .aw-item {height: 42px; } 
</style>
<script>
obj.getPopupTemplate().getItemTemplate().setStyle("height","42px");
</script>
    
<style>    
#comboID .aw-item-text {font-size: 18px } 
</style>
<script>
obj.getPopupTemplate().getItemTemplate().getContent("box/text").setStyle("font-size","18px");
</script>

<script>
document.write(obj);
</script>

After some testing, the actual Style property is "font-family". This works nicely.


obj.getPopupTemplate().getItemTemplate().getContent("box/text").setStyle("font-family","Courier");