1 2 Previous Next 16 Replies Latest reply on Jan 23, 2011 9:51 AM by Vasyl Tegza

    ComboBoxArrowImage missing?

    Tanya Ruttenberg Expert

      I think I just figured out why there is no arrow on the combobox components on my webpage.

      According to Firebug, there is a ComboBoxArrowImage they could be using for the combobox background image. However, there is no evidence of this image's existance anywhere within richfaces-ui (3.3.1).

      Am I missing something? Or is richfaces missing the ComboBoxArrowImage? Where do I find this?


      TDR

        • 1. Re: ComboBoxArrowImage missing?
          Tanya Ruttenberg Expert

          I always find more information right after I post a new topic.

          The missing ComboBoxArrowImage is apparently not my problem.

          So it seems that the background-image for the input is cancelling out the ComboBoxArrowImage. When I disable the former (againk, using Firebug, what a great tool!), the arrow shows up.

          I have not customized this component at all. How do I get it to look like the demo??

          • 2. Re: ComboBoxArrowImage missing?
            Ilya Shaikovsky Master

            as you could see from 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>
            


            So you could find the calss which generate resource there: 3.3.x\framework\impl\src\main\java\org\richfaces\renderkit\html\images\

            • 3. Re: ComboBoxArrowImage missing?
              Ilya Shaikovsky Master

               

              I have not customized this component at all. How do I get it to look like the demo??

              sorry, could you clarify this a bit more?

              • 4. Re: ComboBoxArrowImage missing?
                Tanya Ruttenberg Expert

                Sometimes in the interest of brevity I tend to leave out important info. I will try.

                I have a seam-gen generated project and am using richfaces components (RF 3.3.1). Here is one of them:

                <rich:comboBox suggestionValues="#{statesList.resultList}"
                 value="#{office.state}"
                 defaultLabel="#{messages['ond.label.menu.default.select']}" styleClass="device-input"/>


                With no tinkering whatsoever, it is rendered without the arrow button. I wanted the button to look like the one on the richfaces demo website, so using Firebug I compared the combobox component on my site to the one on the demo site.

                Here is the what I think is the critical CSS as displayed within Firebug for my code:

                input[type="text"], input[type="password"], textarea, select {
                background-color:#FFFFFF;
                background-image:url(/newOnd/a4j/g/3_3_1.GAorg.richfaces.renderkit.html.images.SliderFieldGradient/DATB/eAH79-XN!!!!mQAaRgXe);
                background-position:left top;
                background-repeat:repeat-x;
                border:1px solid #C0C0C0;
                color:#000000;
                }
                eAF7sqpg...AFrMEaw__ (line 1)
                input.rich-combobox-button, input.rich-combobox-button-inactive, input.rich-combobox-button-disabled {
                border-left-color:#BED6F8;
                border-top-color:#BED6F8;
                }
                eAF7sqpg...AFrMEaw__ (line 1)
                input.rich-combobox-button-icon, input.rich-combobox-button-icon-inactive {
                background-image:url(/newOnd/a4j/g/3_3_1.GAorg.richfaces.renderkit.html.images.ComboBoxArrowImage/DATB/eAFjYGD4f-!Y!!!!ARNrBaE_);
                }


                Here is some of the Firebug generated CSS for the same component on the richfaces demo site. There is a lot of it, but I think this is the important stuff:

                input.rich-combobox-button, input.rich-combobox-button-inactive, input.rich-combobox-button-disabled {
                border-left-color:#BED6F8;
                border-top-color:#BED6F8;
                }
                eAF7sqpg...Eaw__.jsf (line 1)
                input.rich-combobox-button-icon, input.rich-combobox-button-icon-inactive {
                background-image:url(/richfaces-demo/a4j/g/3_3_1.GAorg.richfaces.renderkit.html.images.ComboBoxArrowImage/DATB/eAFjYGD4f-!Y!!!!ARNrBaE_.jsf);
                }
                eAF7sqpg...Eaw__.jsf (line 1)
                input.rich-combobox-button-icon-inactive {
                background:transparent none no-repeat scroll center center;
                cursor:pointer;
                }
                eAF7sqpg...Eaw__.jsf (line 1)
                input.rich-combobox-button-inactive {
                border-bottom:1px solid #000000;
                border-right:1px solid #000000;
                border-style:solid;
                border-width:1px;
                margin:0;
                padding-left:0;
                padding-right:0;
                position:absolute;
                right:0;
                top:0;
                width:17px;
                }
                eAF7sqpg...Eaw__.jsf (line 1)
                textarea[type="textarea"], input[type="text"], input[type="password"], select {
                background-position:1px 1px;
                background-repeat:no-repeat;
                border-style:inset;
                border-width:1px;
                }
                eAF7sqpg...Eaw__.jsf (line 1)
                input.rich-combobox-font-inactive, .rich-combobox-font-inactive, .rich-combobox-item {
                color:#000000;
                font-family:Arial,Verdana,sans-serif;
                font-size:11px;
                }
                eAF7sqpg...Eaw__.jsf (line 1)
                input, select, textarea, button, keygen, isindex, legend, a {
                font-family:verdana;
                }
                common.css (line 75)
                input, select, textarea, button, keygen, isindex {
                border-color:#BED6F8;
                border-width:1px;
                color:#000000;
                }
                eAF7sqpg...Eaw__.jsf (line 1)
                input, select, textarea, button, keygen, isindex, legend, a {
                color:#000000;
                font-family:Arial,Verdana,sans-serif;
                font-size:11px;
                


                Note the absence of a background image on the select.

                Firebug shows which style components are active and which are not. It also lets you temporarily deactivate a component to see what the effect is.

                On my code, the combobox button background-image is crossed out, meaning it is disabled. When I temporarily disable the background-image for the select, the SliderFieldGradient, the combobox arrow button suddenly becomes enabled.

                I'm fooling around now with my .xcss file to see if I can get the component to look like the combobox on the demo site. ie, the SliderFieldGradient seems to be displayed (though I can't find it in the CSS) and more importantly the ComboBoxArrowImage is also displayed.

                This is amazingly tedious and frustrating and I am grateful for any help you can offer. Sorry if this is a little convoluted. I can provide more clarification if necessary.

                TDR

                • 5. Re: ComboBoxArrowImage missing?
                  Ilya Shaikovsky Master

                  seems like you talking about standard skinning and combobox conflicts.. but we resolved this even before 3.3.0 :/ Are you sure that application deployed with RF 3.3.1 GA ?

                  • 6. Re: ComboBoxArrowImage missing?
                    Tanya Ruttenberg Expert

                    Yes. This is from the MANIFEST of my deployed war file

                    Specification-Title: Java Server Faces AJAX framework API
                    Specification-Version: 3.3.1.GA
                    Implementation-Title: Java Server Faces AJAX framework API
                    Implementation-Version: 3.3.1.GA
                    Implementation-Vendor-Id: org.richfaces.framework

                    :/ as you say...

                    • 7. Re: ComboBoxArrowImage missing?
                      Reinhard Schwegler Newbie

                      I think the problem is overwriting the background image

                      i can do this with color for example with !important in the <f:verbatim .. section color:red !important;

                      but how to do it in <u:selector ...
                      <f:key ... there it seems only possible to write
                      the path but not afterwards !important
                      right?

                      • 8. Re: ComboBoxArrowImage missing?
                        Lionel Meroni Newbie

                        Hello,

                        I have the same problem.

                        I use the last version of richfaces 3.3.2.GA and the RUBY skin.

                        [img]http://img63.imageshack.us/img63/9830/combobox.png[/img]

                        • 9. Re: ComboBoxArrowImage missing?
                          Ilya Shaikovsky Master

                          just checked under richfaces-demo and can't reproduce. 3.3.2 GA is deployed to livedemo so you could also check.

                          • 10. Re: ComboBoxArrowImage missing?
                            Lionel Meroni Newbie

                            Ok I found the solution.

                            This is because i have generate my project with seam-gen, And seam-gen override the css.
                            It generate this in theme.xcss :

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


                            So change this to :
                            <u:selector name="input[type=text]:not([class*=rich-combobox-button]), 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>


                            Be careful that the CSS :not() selector don't work with IE...

                            • 11. Re: ComboBoxArrowImage missing?
                              cyberanto Newbie

                              I am seeing the same problem with a seam-gen generated base project (Richfaces3.3.1.GA). Inside an <s:decorate template='...display.xhtml> the combobox does not display the image nor do I get the standard sized drop-down (I see only one selectItem).

                              The surrounding divs (from the display.xhtml template) have the styles "prop" and "value".

                              <h:selectOneMenu ../> displays as expected (but of course its styling and functionality differ)

                              Is there a simple way to fix this?

                              • 12. Re: ComboBoxArrowImage missing?
                                cyberanto Newbie

                                oh, somehow didn't see the previous msg - will try this now

                                • 13. Re: ComboBoxArrowImage missing?
                                  cyberanto Newbie

                                  @spaceyoyo yes this fixes the button display issue. Thanks.

                                  The truncation of the pull-down still is there (I can make it smaller using the listHeight attribute, but of course not larger) - which other property do I have to override?

                                  • 14. Re: ComboBoxArrowImage missing?
                                    Ilya Shaikovsky Master

                                    I think it would be good to post this at Seam support forum in order to add some corrections to default project resources generation with seam-gen.

                                    1 2 Previous Next