Button Width Via CSS?

Hi -
I tried setting a button <mx:Button> width via CSS but
the "width" tag does
not effect the button.
Rich

"width" is not a style. It is a property, so you can't set it
via CSS.
Depending on where your Button is located and why you want to
use a
style, you could set the "left" and "right" constraints,
which will
indirectly set the width based on the size of the Button's
container.
-- Greg
-- Adobe Flex Builder Team
Richard Morey wrote:
> Hi -
>
> I tried setting a button <mx:Button> width via CSS
but the "width" tag does
> not effect the button.
>
> Rich

Similar Messages

Remove controls/buttons from OfficeWebApps 2013 via CSS?

Hi,
I know from the SharePoint side that you can hide controls/buttons via CSS. Is this possible with Office Web Apps, too? If yes, where is the CSS file stored?
Thanks
Sven

Hi Sven,
According to your description, my understanding is that you want to hidden the buttons from Office Web Apps.
Similar to the ribbon controls in our desktop version of Office 2013, we can hide the ribbon in the Office Web Apps by clicking the Minimize the Ribbon button on the far right side of the Ribbon.
To get better support on Office Web Apps, I would like suggest you to give a new thread to Office IT Pro forum:
http://social.technet.microsoft.com/Forums/office/en-US/home?forum=officeitpro&filter=alltypes&sort=lastpostdesc , more experts will assist you .
I hope this helps.
Thanks,
Wendy
Forum Support
Please remember to mark the replies as answers if they help and unmark them if they provide no help. If you have feedback for TechNet Subscriber Support, contact
[email protected]
Wendy Li
TechNet Community Support

Spry Photo Gallery Image Size via CSS

Hello!
I´ve been customizing the spry photo gallery for a couple of time, but got my little problem when viewing it on a mobile phone. When you load up the pictures with a size of 450 x 300 px for example, put up the right xml file with it´s width and height, so the gallery shows the pictures in that size. So what I want to do is that you can specify the image size with css depending on the device you´re watching the site with. There is div in the css called "mainImage" where the size is in %. When you change it to 75% for example. The pictures are correctly shown with 75% of it´s original size, but the outline (grey background) is still in 100%. When you make this grey background transparent it´s still there and moves the caption down. I guess there have to be done some changes within the SpryImageViewer.js, but I just know very little things about JavaScript. Do you have any clues how to change this to specify the image size via CSS?
Thank you for your help!!!
Kind regards,
Joerg

I see you are still using Spry 1.5. Have you considered upgrading to
Spry 1.6.1?
Also your XML is broken, if you open up your xml in a normal standards
complaint browser such as firefox, you will see that it doesn't render
a normal tree view as it would do with other xml files. So i suggest
checking those errors out.
Its mainly because you forgot to close your starting tag of the
gallerys node. (<gallery
base = ""
background = "#FFFFFF"
banner = "#F0F0F0"
text = "#000000"
link = "#0000FF"
alink = "#FF0000"
vlink = "#800080"
before your xml starts.

Question:   how to resize form buttons in a CSS

I have a question.   I am trying to implement some PayPal features into my website with some their custom button functionality.   In normal HTML, the buttons look fine. But using a CSS template, the form buttons get squashed and funny looking.   Is there an easy way to resize them?
(I'm using Dreamweaver CS4 on a WinVista machine)
Any help is greatly appreciated.
-ryan

and here is the ENTIRE CSS file
CSS Credit: http://www.templatemo.com/
body {
    margin:0;
    padding:0;
    line-height: 1.5em;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 11px;
    color: #FFFFFF;
    background: #FFFFFF;
h1 {
    margin: 0 0 25px 0;
    padding: 10px 0 10px 15px;
    font-size: 20px;
    font-weight: bold;
    color: #ffc601;
    background: #000000;
    border-bottom: 1px solid #b4a08a;
h2 {
    width: 235px;
    height: 25px;
    padding: 15px 0 0 35px;
    margin: 0 0 25px -10px;
    font-size: 16px;
    color: #6c5b4c;
    background: url(images/left_heading_background.gif) no-repeat;
h3 {
    margin: 0 0 5px 0;
    padding: 0;
    font-weight: bold;
    font-size: 14px;
    color: #ffc601;
h4 {
    margin: 0 0 5px 0;
    padding: 0;
    font-weight: bold;
    font-size: 12px;
    color: #999999;
    text-align: center;
.rantsection {
    height: 13px;
    margin-bottom: 10px;
.rantsection img {
    float: left;
    height: 13px;
    width: 13px;
    border: 0px;
    margin-right: 5px;
a:link, a:visited { color: #999999; text-decoration: none;}
a:active, a:hover { color: #999999; text-decoration: underline;}
.more_button a{
    clear: both;
    text-align: center;
    display: block;
    width: 60px;
    padding: 1px 0;
    margin-bottom: 5px;
    background: #6c5b4c;
    border-bottom: 1px solid #a59180;
    color: #FFFFFF;
    font-weight: bold;
    text-decoration: none;
.download_button a{
    float: right;
    text-align: center;
    width: 65px;
    padding: 1px 0;
    background: #6c5b4c;
    border-bottom: 1px solid #a59180;
    color: #FFFFFF;
    font-weight: bold;
    text-decoration: none;
img {
    border: 1px solid #6c5b4c;
/* ----- Form ----- */
.form_row{
    margin-bottom: 3px;
form{
    margin: 0;
    padding: 0;
    text-align: right;
label {
    margin-right: 10px;
input{
    width: 130px;
    height: 18px;
    padding: 1px 0;
    line-height: normal;
    color: #99836c;
    border: 1px solid #99836c;
    background: #400a0a;
    font-size: 14px;
select{
    color: #99836c;
.button{
    width: 60px;
    line-height: normal;
    margin: 0;
    height: 23px;
/* End of Form */
#container {
    margin: 0px auto;
    width: 970px;
    background: url(images/main_background.gif) repeat-y;
/*------------ Header --------------- */
#header {
    float: left;
    width: 900px;
    padding: 0 35px;
    margin: 15px 0 10px 0;
#title {
    float: left;
    width: 300px;
#sitetitle {
    padding: 30px 0 10px 0;
    font-size: 4.0em;
    font-weight: bold;
    color: #FF9933;
#sitetitle span{
    font-weight: normal;
    color: #FFFFFF;
#login {
    float: right;
    margin-top: 25px;
    width: 300px;
/* -------------- End of Header------------------ */
/* --------- Banner ---------- */
#banner {
    clear: both;
    width: 970px;
    height: 256px;
    background: url(images/banner.jpg) no-repeat;
#banner_text {
    padding: 60px 0 0 225px;
    width: 550px;
#banner_title{
    margin: 0 0 25px 0;
    padding: 0;
    font-size: 24px;
    font-weight: bold;
    color: #ffc601;
#banner_text p{
    margin: 0 0 25px 0;
    padding: 0;
/* --------- End of Banner ---------- */
/*--- Menu ---*/
#menu{
    float: left;
    width: 970px;
    height: 51px;
    background: url(images/menu_background.gif) no-repeat;
#menu ul {
    float: left;
    margin: 0;
    padding: 10px 0 0 40px;
    list-style: none;
#menu ul li{
    display: inline;
#menu ul li a{
    float: left;
    width: 140px;
    height: 20px;
    margin-top: 10px;
    padding: 0;
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: #CCCCCC;
    border-right: 1px solid #CCCCCC;
#menu ul li .lastmenu{
    border-right: none;
#menu li a:hover, #menu li .current{
    color: #FFCC33;
/*--- End of Menu ---*/
/*--- Content ---*/
#content {
    float: left;
    margin: 0;
    padding: 0 10px;
    width: 950px;
    color: #FC3;
    text-align: center;
/*--- Left Column---*/
#left_column {
    float: left;
    margin: 20px 10px 0 0;
    padding: 0px;
    width: 235px;
.left_col_box {
    margin: 0 0 25px 25px;
    color: #AAA;
.blog_box {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #220404;
.blog_box h3 a{
    font-size: 12px;
    color: #d3a401;
.blog_box span{
    color: #99836c;
/*--- End of Left Column---*/
/*--- Right Column---*/
#right_column {
    float: right;
    margin: 25px 25px 0 0;
    padding: 0;
    width: 650px;
.right_panel_fullwidth {
    float: left;
    width: 650px;
    padding: 0 0 25px 0;
.right_panel_fullwidth img{
    float: left;
    margin: 3px 10px 0 0;
.right_panel_fullwidth_content {
    float: left;
    width: 620px;
    padding: 0 15px 25px 15px;
.right_panel_fullwidth_content p{
    text-align: justify;
#new_released_section {
    float: left;
    width: 650px;
    margin: 0 0 30px 0;
.new_released_box {
    float: left;
    width: 180px;
    margin: 0 10px 0 15px;
    text-align: center;
.new_released_box img{
    margin-bottom: 5px;
#news_section {
    float: left;
    width: 310px;
    margin: 0 25px 0 0;
.news_box {
    float: left;
    width: 280px;
    margin: 0 15px 25px 15px;
.news_box img{
    float: left;
    width: 110px;
    margin: 3px 10px 0 0;
    border: 1px solid #333333;
.news_box p{
    margin: 0;
    padding: 0;
#topdownload_section {
    float: right;
    width: 300px;
    padding: 0;
    margin: 0;
    background: #99836c;
.topdownload_box {
    float: left;
    width: 270px;
    padding-bottom: 5px;
    margin: 0 15px 10px 15px;
    color: #24211d;
    font-weight: bold;
    border-bottom: 1px solid #6b5946;
* html .topdownload_box {
    margin: 0 15px 10px 7px;
.topdownload_box span{
    font-weight: normal;
.title_singer{
    float: left;
    width: 200px;
/*--- End of Right Column---*/
/*--- End of Content ---*/
/* ----- Footer ----- */
#footer {
    clear: both;
    padding: 15px 0;
    width: 950px;
    margin: 0 10px;
    text-align: center;
    color: #000000;
    background: #6c5b4c;
    text-align: center;
#footer a{
    color: #000000;
#footer a:hover{
    color: #cccc66;
/* ----- End of Footer ----- */
#container #content #right_column #new_released_section .new_released_box h3 {
    text-align: center;

Style Table via CSS

Hi there. It looks like I’m going to need your help
again with a vexing table issue.
Check this out:
http://www.fastventures.co.uk/en/sec_test.html
Take a close look at the table that includes the main
navigation bar and you will notice that to the right, the last cell
is off by 1 px although the entire table was consistently styled
via CSS to match the following criteria:
.hspacer_36 /* height spacer **/
background-color: #999999;
height: 36px;
The odd thing is, that the table right next to (to the left)
was styled exactly like that and displays perfectly. Any ideas?
As you can imagine, resolving this issue is critical as we
otherwise may not be able to adopt this design.
Thanks a million for your time and help.

What browser are you using becuase I dont see the width diff
(FF2.0 on win)?
In general though I have had this issue appear when I have a
table that has
an odd number width and then two cells that are width=50% ...
"HTML-Newbie" <[email protected]> wrote in
message
news:fcgv2m$h9$[email protected]..
> Hi there. It looks like I?m going to need your help
again with a vexing
> table
> issue.
>
> Check this out:
>
>
http://www.fastventures.co.uk/en/sec_test.html
>
> Take a close look at the table that includes the main
navigation bar and
> you
> will notice that to the right, the last cell is off by 1
px although the
> entire
> table was consistently styled via CSS to match the
following criteria:
>
> .hspacer_36 /* height spacer **/
>
> {
>
> background-color: #999999;
>
> height: 36px;
>
> }
>
> The odd thing is, that the table right next to (to the
left) was styled
> exactly like that and displays perfectly. Any ideas?
>
> As you can imagine, resolving this issue is critical as
we otherwise may
> not
> be able to adopt this design.
>
> Thanks a million for your time and help.
>
>

Can table cell vertical alignment be defined via CSS?

In a table cell (ie, "td") is there a way to define "valign" via CSS, instead of the table cell proper?
In other words, instead of...
<table>
<tr>
<td valign="top">
...is it possible to do :
<table>
<tr>
<td class="top">
...and somehow let the stylesheet define the vertical alignment?
I'm asking because none of the attribute presets in Dreamweaver CS4 seem to provide for vertical alignment. Everything else on God's green earth seems to be there, but table cell vertical alignment seems to be the ONLY thing CSS forgot about.

How about giving the class "top": text-align:center. Or even the tag "td" in your stylesheet. Does that help?
John

HT1476 i-phone3 wont recharge; initially home button wouldn't work. Applied the 'auto-touch button thing' via settings. This worked until I ran out of battery life. Now it won't recharge either via laptop (usually does) or wall switch. Just a blk screen.

i-phone3 wont recharge; initially home button wouldn't work. Applied the 'auto-touch button thing' via settings. This worked until I ran out of battery life. Now it won’t recharge either via laptop (usually does) or wall switch. Just a blk screen.

In general theory, one now has the Edit button for their posts, until someone/anyone Replies to it. I've had Edit available for weeks, as opposed to the old forum's ~ 30 mins.
That, however, is in theory. I've posted, and immediately seen something that needed editing, only to find NO Replies, yet the Edit button is no longer available, only seconds later. Still, in that same thread, I'd have the Edit button from older posts, to which there had also been no Replies even after several days/weeks. Found one that had to be over a month old, and Edit was still there.
Do not know the why/how of this behavior. At first, I thought that maybe there WAS a Reply, that "ate" my Edit button, but had not Refreshed on my screen. Refresh still showed no Replies, just no Edit either. In those cases, I just Reply and mention the [Edit].
Also, it seems that the buttons get very scrambled at times, and Refresh does not always clear that up. I end up clicking where I "think" the right button should be and hope for the best. Seems that when the buttons do bunch up they can appear at random around the page, often three atop one another, and maybe one way the heck out in left-field.
While I'm on a role, it would be nice to be able to switch between Flattened and Threaded Views on the fly. Each has a use, and having to go to Options and then come back down to the thread is a very slow process. Jive is probably incapable of this, but I can dream.
Hunt

Link styles via CSS...

Hi,
I would like to control my link styles within my CSS panel,
but if I set up one set (up, over, blah, blah)...how about if I
want yet another style set for link text that's within a different
color cell? Is it possible? How?
Also, I have controlled background imagery and copy via CSS.
But I would like to add ALT tags to portions of the background
image. My properties inspector won't bring it up as an option due
to the CSS. Do I just have to work with the HTML instead of the
visuals?
-- Same situation for the 'hot spot' tool, and I really need
to use it but my bg image is unselectable due to it being inserted
via CSS. The Properties doesn't "see it". How do I get around that?
thank you!!
thanks!

Pseudo-classes and container styles are what you need - here
are some
tutorials.
http://www.thepattysite.com/linkstyles1.cfm
http://www.projectseven.com/tutorials/pseudoclasses/index.htm
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"r_tist" <[email protected]> wrote in
message
news:fafjlv$q28$[email protected]..
> Hi,
>
> I would like to control my link styles within my CSS
panel, but if I set
> up
> one set (up, over, blah, blah)...how about if I want yet
another style set
> for
> link text that's within a different color cell? Is it
possible? How?
> Also, I have controlled background imagery and copy via
CSS. But I would
> like
> to add ALT tags to portions of the background image. My
properties
> inspector
> won't bring it up as an option due to the CSS. Do I just
have to work with
> the
> HTML instead of the visuals?
> -- Same situation for the 'hot spot' tool, and I really
need to use it but
> my
> bg image is unselectable due to it being inserted via
CSS. The Properties
> doesn't "see it". How do I get around that?
>
> thank you!!
>
> thanks!
>

Set textinput height via css

Hi,
Is it possible to set the textinput fields height via css or
any other global means? I don't want to have to speficially assign
a height parameter to every textinput field in my app.
Cheers

If your were to remove all positioning (highly recommended) and just let the normal document flow determine your page height, you would have far fewer problems. Suggest you start your project with a pre-built CSS Layout that has all the columns and containers you need. This will save you many hours of needless frustration, too.
DW Starter Pages (free)
http://www.adobe.com/devnet/dreamweaver/articles/introducing_new_css_layouts.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com/

Custom Button Widths

When I replace auto menu buttons with custom PSD images, and want to remove Muse SHow Items, the menu defaults to Uniform Size. Even if I deselect Edit Together, button widths are uniform. Adjusting Scale to Fit or Scale to FIll has no effect.

Have you tried changing to uniformed spacing?

Button width

Hi all,
i set a button width property to 200px and i see layout preview correctly in SE80
but the framework seems to optimize automatically button width on the rendering (button text is short) ...
is there a way to force button width?
thanks
Alessandro
Edited by: alessandro spadoni on Sep 28, 2010 12:02 PM
Edited by: alessandro spadoni on Sep 28, 2010 12:05 PM

Sorry,
it seems a bug using Firefox;
i see correct width in IE8
Alessandro

Adjusting Column Widths Via the CSS in 6.5+

It is pretty easy to adjust column widths in the CSS on 6.5+
One issue that we encountered that was slightly trickier (for non-css folks like me) was ensuring that the columns were set at 100% for the 2 column layouts.
The below code will set the narrow columns on 2/3 column layouts to be 200px wide, and ensure that the wide column maintains 100%
.columnOne               { text-align: left;}
.columnTwo               { text-align: center; }
.columnThree               { text-align: left;width:200; }
.layoutOneColumn               { table-layout: auto; }
.layoutOneColumn .columnOne     { width: 100%; }
.layoutTwoColumnNarrowWide     { table-layout: auto; }
.layoutTwoColumnNarrowWide .columnOne          { }
.layoutTwoColumnNarrowWide .columnOne .portletBody     { }
.layoutTwoColumnNarrowWide .columnTwo .portletBody     { background-color: #FFFFFF; }
.layoutTwoColumnWideNarrow               { table-layout: auto; }
.layoutTwoColumnWideNarrow .columnOne .portletBody     { background-color: #FFFFFF; }
.layoutTwoColumnWideNarrow .columnTwo          {width: 200; }
.layoutTwoColumnWideNarrow .columnTwo .portletBody     { width: 200; }
.layoutThreeColumn                    { table-layout: auto; }
.layoutThreeColumn .columnOne               { }
.layoutThreeColumn .columnOne .portletBody          { }
.layoutThreeColumn .columnTwo .portletBody          { background-color: #FFFFFF; }
.layoutThreeColumn .columnThree               { }
.layoutThreeColumn .columnThree .portletBody          { }
/* Set the invisible image */
#portletColumnFormatter_0 img {width:200px;}
#portletColumnFormatter_1 img{width:100%;}
#portletColumnFormatter_2 img{width:200px;}

I don't understand? I launch PSE 9 from the task bar. This is the screen I get.
I've tried right clicking everything I can think of w/o success.
Once I click "organize", it's too late. The organizer is coming up.
Maybe I don't know for sure what the "Organizer icon" is or where it is? Or, maybe I shouldn't start it from the task bar?

Centering CSS-buttons - Help from CSS Guru wanted

Dear group,
I created a site for a friend in which I wanted to do all the
navigation
with CSS-rollover-buttons. Actually it works fine until I try
to center the
buttons. For the buttons, which are located in the
footer-section, there is
no problem, they center fine?!
So I thought to be clever by creating a container with the
same attributes
than the footer, in which I place the buttons. But to my
surprise it didn't
work. Trying to center the #wrapper didn't bring the wanted
result. The
navigation still stings to the left of the page.
Now I have set the width from the container to 40%. But this
is no solution
and looks messy:-(
Please have a look at:
http://www.stuck-atelier.de/Galerie/kueche3/e_page-0001.html
The CSS:
http://www.stuck-atelier.de/Library/fabryb.css
Any help is very much welcome:-)
Best regards
Inge Grotjahn, frustrated

Hi Murray,
Am 15.06.2006 schrieb Murray *ACE*:
> Your problem is not in the implementation of Anurak's
correct instructions,
> it's in the basic layout of the page. The div#wrapper is
given a width of
> 40%, which restricts div#navfoto1 from reaching its
desired location.
> Remove that width and see what happens when you change
your code to this -
>
> <div id="wrapper" style="width:100%;">
> <div id="navfoto1" style="width:200px;margin:0
auto;">
> <ul>
> <li><a href="e_index.html" title="internal
link: to the
> index">Index</a></li>
> <li><a href="e_page-0002.html" title="internal
link: to the next
> picture">Next</a></li>
> </ul>
> </div>
> </div>
thank you for your advice. I changed the CSS as follows:
#wrapper {
margin:0 auto;
width: 100%;
text-align:center;
#navfoto1 {
margin: 5px auto;
width: 300px;
and left the html as it was. The result is much better than
my solution,
but doesn't center the buttons:-( With a width of 200px, the
buttons (on
pages with 3 buttons) are no longer displayed inline:-( On
the German page
you can see better, that the buttons will not center (maybe
because the
button texts are longer). And on the photoindex-page you see
it the best.
Here the link to the English pages:
http://www.stuck-atelier.de/Galerie/kueche3/e_page-0003.html
The CSS:
http://www.stuck-atelier.de/Library/e_fabryb.css
http://www.stuck-atelier.de/Galerie/kueche3/e_index.html
The CSS:
http://www.stuck-atelier.de/Library/e_fabry.css
Here the link to the German pages:
http://www.stuck-atelier.de/Galerie/kueche3/page-0003.html
The CSS:
http://www.stuck-atelier.de/Library/fabryb.css
http://www.stuck-atelier.de/Galerie/kueche3/index.html
The CSS:
http://www.stuck-atelier.de/Library/fabry.css
I really don't understand what is going wrong here:-(
Best regards
Inge Grotjahn
CatManiacs World:
http://www.gwsystems.com/inge

Input widths - use CSS or size property?

Hi,
what's the best way to add width to form input?
Should i do it by creating class and applying it to the input
or should i just set in the actual HTML via the SIZE attribute
I see didn't methods used throughout the web

I'd take option 1.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"baxxy2000" <[email protected]> wrote in
message
news:ehj0u9$ea5$[email protected]..
> Ok,
> Murray you always seem to be the one to answer my dumb
questions, and i'm
> glad
> you still have the patience.
>
> Now just to clarify, which option is best
>
> 1) Put all global styling on the base input ( i.e
border, background
> color,
> width)
> and then add a seperate class to checkboxes and radio
buttons so that they
> don't inherit that formatting.
>
> 2 )Give every input a unique class
>
> 3 ) A better option?
>
>

How do I add custom style to custom AS3 component via .css file?

Hi all,
I have created a flex application which displays a custom component I created in actionscript. My custom component is just an extended canvas component which displays a gradient background. When I add the component to my flex app, see code below, the component works great.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="http://localhost/mycomps">
    <ns1:GradientCanvas fillColors="[#ffffff, #000000]" />
</mx:Application>
However, I also want to support css styles to add the gradient colors to my component, like so
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="http://localhost/mycomps">
    <mx:Style source="test.css" />
    <ns1:GradientCanvas styleName="gradientCanvas" />
</mx:Application>
test.css
.gradientCanvas {
    fill-colors: #ffffff, #000000;
When I try this my component doesn't display a gradient. I have followed the tutorials online that I could find but it seems to be the same example from Adobe repeated on multiple site and it doesn't work.
My component code is added below, if anyone could show me how to get this to work it would be much appreciated.
Thanks in advance,
Xander
GradientCanvas.as
package mycomps {
    import flash.display.GradientType;
    import flash.geom.Matrix;
    import mx.containers.Canvas;
    import mx.styles.CSSStyleDeclaration;
    import mx.styles.StyleManager;
    public class GradientCanvas extends Canvas {
        private static var classConstructed:Boolean = constructStyle();
        public function GradientCanvas() {
            super();
            this.width = 100;
            this.height = 20;
        private static function constructStyle():Boolean {
            var style:CSSStyleDeclaration = StyleManager.getStyleDeclaration("GradientCanvas");
            if (style) {
                if (style.getStyle("fill-colors") == undefined) {
                    style.setStyle("fill-colors", [0xffffff, 0x000000]);
            } else {
                style = new CSSStyleDeclaration();
                style.defaultFactory = function():void {
                    this._fillColours = [0xffffff, 0x000000];
                StyleManager.setStyleDeclaration("GradientCanvas", style, true);
            return true;
        override public function styleChanged(styleProp:String):void {
            super.styleChanged(styleProp);
            if (styleProp == "fill-colors") {
                this._fillColours = getStyle("fill-colors");
                this._fillColoursChanged = true;
                this.invalidateDisplayList();
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            if (this._fillColoursChanged == true) {
                var direction:Number = 90 * (Math.PI / 180);
                var matrix:Matrix = new Matrix();
                matrix.createGradientBox(unscaledWidth, unscaledHeight, direction, 0, 0);
                graphics.clear();
                graphics.beginGradientFill(GradientType.LINEAR, this._fillColours, [1,1], [0, 255], matrix, "pad", "rgb", -1);
                graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
                graphics.endFill();
                this._fillColoursChanged = false;
        [Inspectable(category="Gradient", type="Array", format="Color", name="Fill Colours")]
        private var _fillColours:Array;
        private var _fillColoursChanged:Boolean = false;
        public function get fillColours():Array {
            return this._fillColours;
        public function set fillColours(value:Array):void {
            this._fillColours = value;
            this._fillColoursChanged = true;
            this.invalidateProperties();
            this.invalidateDisplayList();

Never mind, I've discovered how to do it for myself.
Thanks...

Button Width Via CSS?

Similar Messages

Maybe you are looking for