9 Replies Latest reply on Feb 25, 2009 8:48 AM by Donald Hook

    rich combobox does not display drop down image

    Donald Hook Newbie

      I have a rich combobox that is not rendering properly, the image to display the list does not display. This occurs in all browsers, not sure what I am doing wrong. Thanks in advance

        • 1. Re: rich combobox does not display drop down image
          Anton Belevich Novice

          Is this a standard image on button or image defined via buttonIcon property?

          • 2. Re: rich combobox does not display drop down image
            Donald Hook Newbie

            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
              Anton Belevich Novice

              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
                Donald Hook Newbie

                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
                  Aleksandr Dubovsky Newbie

                  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
                    Donald Hook Newbie

                    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
                      Aleksandr Dubovsky Newbie

                      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
                        Aleksandr Dubovsky Newbie

                        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
                          Donald Hook Newbie

                          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!!!