Opened 16 years ago

Closed 15 years ago

Last modified 15 years ago

#1086 closed enhancement (fixed)

Changing the appearance of the Button widget is too difficult

Reported by: guest Owned by: anonymous
Priority: high Milestone:
Component: Widgets Version: 0.3
Keywords: Cc:
Blocked By: Blocking:


Using CSS to change the appearance of the Button widget is difficult comparing to all the other widgets. I suspect that this is caused by the fact that the template contains style attributes which should be moved to the CSS template. The same applies to the background images which are defined in the javascript source, while they should be in the CSS file. Isn't it possible to define the hover/click effect by wrapping the entire button in an A (anchor) tag? Then we can define the CSS as something like:

A.dojoButton DIV.leftPart {
  background-image: url(...);
A.dojoButton DIV.rightPart {
  background-image: url(...);
A.dojoButton:Hover DIV.leftPart {
  background-image: url(...);
A.dojoButton:Hover DIV.rightPart {
  background-image: url(...);

Change History (8)

comment:1 Changed 16 years ago by bill

Button2 is designed that way on purpose, so that the images scale according to the button content. For example, think about aqua buttons; the height of the semicircles on the left and right side need to match the height of the button, and the height of the button depends on the font size. You can't do that with CSS.

Having said that, I agree that it would be nicer to specify the images within css. But it's a tradeoff.

comment:2 Changed 16 years ago by guest

I understand the purpose of the scaling images. However, image scaling is not always wanted, for example when using square or rectangle buttons. Is there a way to turn off the scaling?

Another thing about this issue is the fact that I need to subclass the Button widget in order to customize it. Not any of the other widgets requires this.

Lastly, I don't understand the tradeoff part. Please explain.

comment:3 Changed 16 years ago by bill

Resolution: invalid
Status: newclosed

The tradeoff is that Button is hard to customize, but it allows rounded buttons of arbitrary size.

In any case, this is not a bug; if you want to further discuss the design of the Button widget was designed, please bring it up on the mailing list.

comment:4 Changed 16 years ago by guest

Resolution: invalid
Status: closedreopened

Please Mr. Bill, you can do better than that ;-) And my apologies, I can't join the mailing list for several reasons.

Who wants resizable buttons in a professional web application? It's understandable that someone wants to have rounded buttons, but wouldn't you then create the images at the right size then? I have absolutely no clue what image size should be used for the left, center and right parts to make it look decent. Not to think about the strange width2height property.

comment:5 Changed 16 years ago by guest

Type: defectenhancement

Oh, and since you don't consider this a bug I've changed it to enhancement request.

comment:6 Changed 15 years ago by dylan

Milestone: 0.40.6

comment:7 Changed 15 years ago by bill

Milestone: 1.00.9M2
Resolution: fixed
Status: reopenedclosed

Buttons for dijit are customizable via CSS.

comment:8 Changed 15 years ago by (none)

Milestone: 0.9M2

Milestone 0.9M2 deleted

Note: See TracTickets for help on using tickets.