Opened 12 years ago

Closed 12 years ago

Last modified 9 years ago

#5170 closed defect (wontfix)

dijit.form.Button: icon alignment on the right

Reported by: guest Owned by:
Priority: high Milestone:
Component: Dijit - Form Version: 1.0
Keywords: button icon alignment Cc:
Blocked By: Blocking:

Description

I have a paging control built with 4 buttons (first, previous, next and last page) for a table widget which are in a line below that table. Those buttons consist of a label and an icon. With the standard dijit.form.Button the icons (defined by iconClass) appear on the left hand side of the label (imagine this: << First | < Previous | > Next | >> Last ) But for symmetry I wanted the first two button's icons to be left, the icons from the other two buttons right aligned. (imagine this: << First | < Previous | Next > | Last >>) I could easily achive this by introducing a new property

"iconAlign : 'left'",

and extending the postCreate() method at its end with

  if (this.iconAlign == "right") { //move the icon node to the end 
    this.focusNode.appendChild(this.iconNode)
  }

Perhaps that would be an option to bring into Dijit with the next release? Er, and of course a differenciaton between "top" and "bottom" would be great, too.

Change History (6)

comment:1 Changed 12 years ago by bill

Can't you do this already by just putting float:right as a rule for your iconClass?

comment:2 Changed 12 years ago by guest

OMG! I didn't even mention that possibility. You're right, it works exactly as you said.

comment:3 Changed 12 years ago by bill

Resolution: wontfix
Status: newclosed

OK, then I think that's good enough, at least for now.

comment:4 in reply to:  2 Changed 12 years ago by guest

Replying to guest:

OMG! I didn't even mention that possibility. You're right, it works exactly as you said.

I've got to correct myself here. Unfortunately it looks weird in IE(6 and 7). When using float:right for the icon, the icon appears left side and the button's "content" (the label) is shown below the icon. This makes the button grow in height. In FF everything is fine.

comment:5 Changed 12 years ago by bill

OK, that's too bad. But you can still get what you want by putting an <img> node or <div class="iconClass"> inside the button, positioned appropriately. The icon parameter is just a convenience for the common case.

comment:6 Changed 9 years ago by bill

Component: DijitDijit - Form
Note: See TracTickets for help on using tickets.