[Closed] Changing button size

abhijeet.maharana · **Joined:** Mon Mar 10, 2008 7:21 am **Posts:** 202

How do I resize a button?

Code:

btn.setSize("40","40");

throws an error saying something like "This method must be called after the component has been rendered.

Code:

btn.addListener("render", new Function(){
   public void execute() {
      btn.setSize("40","40");
   }
});

doesn't change the button's width while it is distorted height-wise.

gwtext+ · **Posted:** Sat May 10, 2008 2:47 am

Hi:

Use A Template to create a button with the suitable dimensions.

Button.setTemplate():
http://gwt-ext.com/docs/2.0.3/com/gwtex ... e.Template)

Template:
http://gwt-ext.com/docs/2.0.3/com/gwtex ... plate.html

abhijeet.maharana · **Joined:** Mon Mar 10, 2008 7:21 am **Posts:** 202

Thanx for the answer. It helped.

Default template for the button is a table with 3 columns. I modified it and applied width and height attributes to the center TD element and the button resized as expected. However, the background images don't stretch and unwanted parts of the sprite (btn-sprite.gif) show up.

Attachment:

resize_button_template.jpg [ 3.77 KB | Viewed 1693 times ]

I am not comfortable with CSS. Tried tweaking x-btn-left, x-btn-center and x-btn-right CSS classes but in vain. Any idea as to what CSS change is necessary to stretch the background images?

Modified button template with width and height for center TD:

Code:

Template t = new Template("<table cellpadding=\"0\" cellspacing=\"0\" class=\"x-btn-wrap\">" +
   "<tbody>" +
      "<tr>" +
         "<td class=\"x-btn-left\"><i>&#160;</i></td>" +
         "<td class=\"x-btn-center\" width=\"80px\" height=\"80px\">" +
            "<em unselectable=\"on\"><button class=\"x-btn-text\" type=\"{1}\">{0}</button></em></td>" +
         "<td class=\"x-btn-right\"><i>&#160;</i></td>" +
      "</tr>" +
   "</tbody>" +
"</table>");
            
btn.setTemplate(t);

sjivan · **Joined:** Fri Dec 14, 2007 12:27 pm **Posts:** 1017

See this thread : http://groups.google.com/group/gwt-ext/ ... 4b1f66b83d

Sanjiv

abhijeet.maharana · **Joined:** Mon Mar 10, 2008 7:21 am **Posts:** 202

That helped. I still can't get the images to resize and span the entire background since background-size:100% doesn't have any effect but now I can replace the stock images in my custom template.

Thanks for the help.

[Closed] Changing button size

Who is online