-
1. Re: ComboBoxArrowImage missing?
daxxy Jul 21, 2009 10:51 AM (in response to daxxy)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 Jul 21, 2009 10:53 AM (in response to daxxy)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 Jul 21, 2009 11:09 AM (in response to daxxy)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?
daxxy Jul 21, 2009 11:38 AM (in response to daxxy)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 Jul 21, 2009 11:45 AM (in response to daxxy)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?
daxxy Jul 21, 2009 11:49 AM (in response to daxxy)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?
rschwegler Jul 22, 2009 11:09 AM (in response to daxxy)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?
spaceyoyo Oct 14, 2009 5:18 AM (in response to daxxy)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 Oct 14, 2009 8:20 AM (in response to daxxy)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?
spaceyoyo Oct 14, 2009 10:00 AM (in response to daxxy)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 Oct 14, 2009 5:01 PM (in response to daxxy)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 Oct 14, 2009 5:02 PM (in response to daxxy)oh, somehow didn't see the previous msg - will try this now
-
13. Re: ComboBoxArrowImage missing?
cyberanto Oct 14, 2009 5:35 PM (in response to daxxy)@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 Oct 15, 2009 4:16 AM (in response to daxxy)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.