Problem while creating widget

Hi guys,
I was trying to implement a progress bar and to use in a table (grid). I tried creating that by using the custom component. My idea was to

  1. to give a label and set in a Horizontal Panel. I tried to create as it was described in the Book of Vaadin. The class extended Composite class. The idea was to give the color for progress in the label and add it in the layout. While debugging, it was found that, it rendered them as table and div’s which gave full width. But once it was rendered, the width was rendered very low.
    2 second objective was to give the progress (in percentage eg:
    ) in the middle of the cell. That is if it is 50%, the progress color will be half the width and other widths. I am unable to do that, even using basic html codes. Tried the overlay layout (3rd party addon lib) but it did not work as well.

The client side code is as given below.

public class GwtProgressBar extends Composite implements ClickHandler {

	// The currently selected color name to give client-side
	// feedback to the user.
	protected Label currentcolor;
	protected Label lbl;

	public GwtProgressBar() {
		currentcolor = new Label();

		final HorizontalPanel panel = new HorizontalPanel();

		final Element panelcell = DOM.getParent(currentcolor.getElement());
		DOM.setElementProperty(panelcell, "className", "colorpicker-currentcolorbox");
		panel.setSize("749px", "213px");

	public void setColor(String newcolor, String width) {

		final Element label = currentcolor.getElement();
		final Element cell = DOM.getParent(label);
		Element row = DOM.getParent(cell);
		Element tbody = DOM.getParent(row);
		Element table = DOM.getParent(tbody);
		DOM.setStyleAttribute(table, "width", "100%");
		DOM.setStyleAttribute(table, "background", newcolor);


	public void onClick(ClickEvent event) {
		// TODO Auto-generated method stub
public class VProgressBar extends GwtProgressBar implements Paintable {

	public static final String CLASSNAME = "example-colorpicker";
	String uidlId;
	ApplicationConnection client;

	public VProgressBar() {

	public void updateFromUIDL(UIDL uidl, ApplicationConnection client) {
		if (client.updateComponent(this, uidl, true))
		this.client = client;

		uidlId = uidl.getId();
		System.out.println("clr" + uidl.getStringVariable("colorname"));
		System.out.println("wdth" + uidl.getStringAttribute("clrWidth"));
		setColor(uidl.getStringVariable("colorname"), uidl.getStringAttribute("clrWidth"));

	public void setColor(String newcolor, String clrWidth) {
		if (newcolor.equals(currentcolor.getText()))
		super.setColor(newcolor, clrWidth);
		client.updateVariable(uidlId, "colorname", newcolor, true);

I have attached the screen shot of the bug. In that, you can see, the width is not getting completely correct. But the color is shown only for the 50% of the width got.

Kindly correct me if my implementation/idea is wrong.