Yahoo! Flex Skin Buggy
Lately I have been using the Yahoo! Flex skin in a few of my interfaces as it greatly improves the overall standard look of the Flex widgets. It’s very easy to implement (thanks to Adobe for creating a simple workflow for this). Recently, however, I have noticed a couple of bugs in the skin that are worth bringing up and should definitely be fixed. Suffice it to say that I am not sure if they are Adobe’s fault or Yahoo!’s fault.
As you can see there is an issue on the bottom where a partial row of the datagrid is showing and the other part of it is hidden. It’s the hidden part that is causing the skin to appear invisible. Note that, as soon as I scroll the datagrid it goes away. However, if I move my mouse over that row it comes back. Same goes for the [+] button. You can see that it’s bounds are causing an anomaly on the control bar.
Like I said, I am not sure if this is an Adobe issue or a Yahoo! issue, but it is annoying enough that I might be swapping the skin out. I don’t want to, but I may have to.
Hi Kyle, I too have experienced some issues with the Yahoo Flex Skin, namely the button issue which you pointed out. I also found it difficult to position the button in relation to a datagrid/scrollbar in both the bottom and top corners exactly where I wanted it, I had to do some funky absolute positioning based on a negative value of width from the parent container origin less the button width.
@Doug – I am glad to hear I am not the only one having these issues. Now what you are having problems with sound interesting, and had I had the neat for more absolute position, I probably would have encountered that.
Have you seen any other skins that are nice and professional like this one?
I just wanted to position a button on the corner, ended up using custom style on regular flex skin (not due to this reason, just having issues with some of the Yahoo style elements working out in my available real-estate – easier to just use the style explorer and create some custom css). Cool skins over at scalenine http://www.scalenine.com/
Kyle-
Experienced the exact same issue you were seeing with the Yahoo skin. I ended up tweaking the transparency of the skin in Illustrator and that seemed to help a bit. But, I’m still having issues when I re-size the browser and the app scaling…the skin seems to drop in/out at different positions….very weird. Did you resolve any of your issues.
Thanks for posting this!
@Ryan: That’s a good idea. Unfortunately I did not attempt to look for any other solutions.
Hi,
I am using yahoo flex skin for customizing my UI. I want to change the button’s “backgroundcolor” property. The yahoo flex skin is getting applied. So to change the “backgroundcolor” property, in the yflexskin.css i have added this property under Button class selector.
But the property is not getting applied. I have been trying to do this from last 3-4 days.
ALso tried this with “fillcolors” property with no results.
Any help would be appreciated.
Thanks
@virajitha: First of all, it’s generally not good practice to modify styles of a theme directly in the theme CSS file (in this case yflexskin.css), because if you were to get the update that Yahoo! publishes and apply it, you would lose all your custom styles.
I recommend you first create another external css file and put a reference to it in your project just like the Yahoo! one. For any of the styles that you want to override, simply define the appropriate selector and the modifications you want to make. If that doesn’t work, comment again with the issues you are having.
Thank you for the response, Kyle.
I have tried to apply backgroundcolor in the following way to button in a separate css file too. But this also didn’t work.
.mybutton {
cornerRadius: 0;
highlightAlphas: 0, 0;
fillAlphas: 1, 1, 1, 1;
fillColors: #343367, #343367, #003466, #003466;
color: #ffffff;
textRollOverColor: #ffffff;
textSelectedColor: #003466;
borderColor: #343367;
themeColor: #343367;
}
1.I have included the yflexskin.css in the project at the compile time using in application’s mxml
file.
2. At runtime the application loads the custom .css file depending on the theme. And in this css file I have mentioned the style properties that needs to be overwritten. The yflexskin is applied but the changes mentioned in the custom css file (backgroundcolor) are not applied to the yflexskin`s button skin.