-
1. Re: rich combobox does not display drop down image
abelevich Feb 23, 2009 10:40 AM (in response to dhook)Is this a standard image on button or image defined via buttonIcon property?
-
2. Re: rich combobox does not display drop down image
dhook Feb 23, 2009 10:42 AM (in response to dhook)It is just the standard component. I put the comboBox on the page, but when I view the page, I dont see the down arrow to display the list. So not sure if there is a property that I am not setting (new to JSF). Thanks in advance!
-
3. Re: rich combobox does not display drop down image
abelevich Feb 23, 2009 2:52 PM (in response to dhook)ok ... it's really seems strange ...
I can't reproduce this bug with richfaces 3.3.0 GA.
What version of richfaces library do you use?
Could your attach your html page with css styles ? -
4. Re: rich combobox does not display drop down image
dhook Feb 23, 2009 4:40 PM (in response to dhook)I am using 3.3.0 Rich faces. Here are some code snippets ... The app was generated via SeamGen and am using those styles ....
HTML Page:<rich:tab id="openPositionsTab" label="Open Positions" labelWidth="150" onclick="#{myAccount.viewOpenPositions()}"> <h:form id="accountSelection" styleClass="edit"> <div class="rich-stglpanel-header"> <s:decorate id="accountComboBox" template="layout/display.xhtml"> <ui:define name="label">Account:</ui:define> <rich:comboBox value="#{accountHome.instance}" selectFirstOnUpdate="false" defaultLabel="Select account ..." valueChangeListener="#{myAccount.selectionChanged()}"> <s:selectItems value="#{accounts}" var="account" label="#{account.accountName}" id="accounts" /> </rich:comboBox> </s:decorate>
html { overflow-y: scroll; } body { font-size: 12px; margin: 0px; } a img { border: none; } h1 { font-size: 1.6em; margin-top: 0; } input[type=submit], input[type=button] { font-size: 10px; margin: 5px 5px 5px 0; cursor: pointer; } input[type=text], input[type=password], textarea { font-size: 11px; padding-left: 1px; } .tableControl, .actionButtons { width: 100%; } .tableControl a { padding-left: 10px; } .tableControl { text-align: right; } .footer { text-align: center; font-size: 11px; margin-bottom: 10px; } .rich-table { width: 100%; } .body { padding: 30px; } .columnHeader:hover { color: #FF6600; } .message { padding: 5px; list-style: none; border: 0; background: none; padding: 0; color: #000000; margin: 5px 0 8px 0; font-size: 12px; } .message li { background: no-repeat left center; padding-top: 1px; padding-left: 20px; margin-left: 3px; } .message li.infomsg { background-image: url(../img/msginfo.png); } .message li.errormsg { background-image: url(../img/msgerror.png); } .message li.warnmsg { background-image: url(../img/msgwarn.png); } .name { vertical-align: top; font-weight: bold; width: 115px; float: left; padding: 5px; margin-top: 3px; clear: left; } .value { float: left; padding: 5px; } .error { float: left; padding: 5px; } .errors { color: red; vertical-align: middle; } img.errors { padding-right: 5px; } .errors input, .errors textarea { border: 1px solid red !important; } .required { color: red; padding-left: 2px; } .rich-stglpanel-body { overflow: auto; } /* the specificity here is necessary to override the defaults */ .rich-panel .rich-panel-header, .rich-stglpanel .rich-stglpanel-header { padding: 2px 3px; } select { font-size: 12px; } .rich-panel input[type=submit], .rich-panel input[type=button], .rich-tabpanel input[type=submit], .rich-tabpanel input[type=button] { margin-bottom: 0; } .tableControl input[type=submit], .tableControl input[type=button], .tableControl select { margin: 5px 0 5px 5px; } /* I don't know why this is necessary, but the select is off by a pixel on the top and is padding too much on the left */ .tableControl select { margin-left: 2px; position: relative; top: 1px; } .actionButtons { padding-left: 1px; } .actionButtons select { margin: 5px 5px 5px 0; vertical-align: bottom; } .rich-datalist { list-style: square; margin: 6px 0 1px 0; padding-left: 18px; } .rich-list-item { padding-bottom: 4px; } div.info { font-size: 1.2em; } ul.bullets { list-style: square; } ul.bullets li { padding-bottom: 2px; } td.action { text-align: center; width: 8em; white-space: nowrap; } td.action a { padding-left: 1px; padding-right: 1px; }
<?xml version="1.0" encoding="UTF-8"?> <f:template xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http:/jsf.exadel.com/template" xmlns:u="http:/jsf.exadel.com/template/util"> <u:selector name="body"> <u:style name="font-family" skin="generalFamilyFont"/> <u:style name="color" skin="generalTextColor"/> </u:selector> <u:selector name="h1"> <u:style name="font-family" skin="generalFamilyFont"/> <u:style name="color" skin="tabDisabledTextColor"/> </u:selector> <u:selector name="a:active, a:link, a:visited"> <u:style name="color" skin="generalLinkColor"/> </u:selector> <u:selector name="a:hover"> <u:style name="color" skin="hoverLinkColor"/> </u:selector> <u:selector name="input[type=text], input[type=password], textarea, select"> <u:style name="background-color" skin="controlBackgroundColor"/> <u:style name="color" skin="controlTextColor"/> <u:style name="background-position" value="left top"/> <u:style name="background-repeat" value="repeat-x"/> <u:style name="background-image"> <f:resource f:key="org.richfaces.renderkit.html.images.SliderFieldGradient"/> </u:style> <u:style name="border" value="1px solid"/> <u:style name="border-color" skin="tableBorderColor" /> </u:selector> <u:selector name="select"> <u:style name="background-color" value="transparent"/> <u:style name="background-image"> <f:resource f:key="org.richfaces.renderkit.html.images.SliderFieldGradient"/> </u:style> </u:selector> <u:selector name="option"> <u:style name="background-color" skin="generalBackgroundColor"/> </u:selector> <u:selector name="select[multiple]"> <u:style name="background-color" skin="controlBackgroundColor"/> </u:selector> <u:selector name="select[multiple] option"> <u:style name="background-color" value="transparent"/> </u:selector> <u:selector name="input[type=submit], input[type=button]"> <u:style name="padding" value="1px 4px"/> <u:style name="background-image"> <f:resource f:key="org.richfaces.renderkit.html.GradientA"/> </u:style> <u:style name="border" value="1px solid"/> <u:style name="border-color" skin="headerBackgroundColor"/> <u:style name="color" skin="headerTextColor"/> <u:style name="font-weight" value="bold"/> </u:selector> <u:selector name="input[type=submit][disabled], input[type=button][disabled]"> <u:style name="opacity" value="0.33"/> </u:selector> <!-- hack for IE to just get rid of border since it doubles the border if you use one --> <u:selector name="* html input[type=submit], * html input[type=button], *+html input[type=submit], *+html input[type=button]"> <u:style name="border" value="0"/> <u:style name="font-size" value="11px"/> </u:selector> <u:selector name=".rich-table-subheadercell"> <u:style name="background-image"> <f:resource f:key="org.richfaces.renderkit.images.TabGradientB"/> </u:style> </u:selector> <u:selector name=".rich-toolbar a:link, .rich-toolbar a:visited, .rich-toolbar a:active, .rich-toolbar a:hover"> <u:style name="color" skin="headerTextColor"/> </u:selector> <u:selector name=".rich-toolbar a:hover"> <u:style name="color" skin="generalTextColor"/> </u:selector> <!-- <u:selector name=".rich-table-subheadercell a:link, .rich-table-subheadercell a:visited, .rich-table-subheadercell a:active"> <u:style name="color" skin="generalTextColor"/> </u:selector> --> <u:selector name=".rich-table-subheadercell a:hover"> <u:style name="color" skin="calendarHolidaysTextColor"/> </u:selector> <!-- Define static styles in the CDATA block below (you can also move this block to the top) --> <f:verbatim><![CDATA[ ]]></f:verbatim> </f:template>
-
5. Re: rich combobox does not display drop down image
adubovsky Feb 24, 2009 7:57 AM (in response to dhook)Hello dhook,
I see some problems in your code. Is this just misprints?
1) onclick="#{myAccount.viewOpenPositions()}" - From tld - "onclick - HTML: a script expression; a pointer button is clicked" Do you try to bind onclick to some method from bean? If so, this is incorrect.
2) valueChangeListener="#{myAccount.selectionChanged()}" - brackets are not necessary. Should be valueChangeListener="#{myAccount.selectionChanged}"
Correct me if i wrong.
I will try to reproduce your problem and will write about results later. -
6. Re: rich combobox does not display drop down image
dhook Feb 24, 2009 8:50 AM (in response to dhook)I have not reached the point to test out the onChange event, so yes, you are right, the code s incorrect. I posted a portion of the page since it is a bit lengthy. I can send a screenshot if need be. Thank you for your time in looking into this!!!
-
7. Re: rich combobox does not display drop down image
adubovsky Feb 24, 2009 10:31 AM (in response to dhook)You could send screenshot at my email - adubovsky@exadel.com
Is it possible for you to sent me whole project? If so, please do it. It will decrease time to pinpoint the issue. :)
Thanks. -
8. Re: rich combobox does not display drop down image
adubovsky Feb 25, 2009 5:47 AM (in response to dhook)The problem is in your "theme.xcss" file, more exactly in following rows:
<u:selector name="input[type=text], input[type=password], textarea, select"> <u:style name="background-color" skin="controlBackgroundColor"/> ... <u:style name="background-image"> <f:resource f:key="org.richfaces.renderkit.html.images.SliderFieldGradient"/> </u:style> ... </u:selector>
You can see in e.g. firebug, that combobox arrow is placed inside input(type=text). So bachground image, defined in theme, redefines combobox icon.
The simplest possible solutions are to add following code in "theme.xcss":<u:selector name="input.rich-combobox-button-icon, input.rich-combobox-button-icon-inactive"> <u:style name="background-image"> <f:resource f:key="org.richfaces.renderkit.html.images.ComboBoxArrowImage" /> </u:style> </u:selector> <u:selector name="input.rich-combobox-button-icon-disabled"> <u:style name="background-image"> <f:resource f:key="org.richfaces.renderkit.html.images.ComboBoxArrowImageDisable" /> </u:style> </u:selector>
or define your own icon via buttonIcon attribute. -
9. Re: rich combobox does not display drop down image
dhook Feb 25, 2009 8:48 AM (in response to dhook)Thank you for taking the time to figure this out. I would have never figured that out. I will give it a shot. THANK YOU!!!