CODEWITHSUNDEEP
gwtbutton
dominic
dominic

Reputation: 405

Alignment in Horizontal Panel GWT

I want to align some Buttons to the Left in my HorizontalPanel.

This is my examplecode.

 public void onModuleLoad() {

        HorizontalPanel buttonsPanel = new HorizontalPanel();

        Button test1 = new Button("Test1");
        Button Test2 = new Button("Test me ");
        buttonsPanel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_LEFT);
        buttonsPanel.setWidth("100%");
        buttonsPanel.add(test1);
        buttonsPanel.add(Test2);
        RootPanel.get("buttoncontainer").add(buttonsPanel);

    }

But in this way there is a lot of space between these Buttons. But I want them to stick together. Any Suggestions ?

Upvotes: 0

Views: 5436

Answers (4)

Arash moradabadi
Arash moradabadi

Reputation: 365

Best way to make the controls align to right or left is to write two lines of CSS as follows:

.buttonToLeft
{
    float: left;
    left: 100%;
}

and then assign them to the control as follows:

HorizontalPanel hpButtons = new HorizontalPanel();
hpButtons.addStyleName("buttonToLeft");

Upvotes: 0

Jagadeesh
Jagadeesh

Reputation: 2800

My suggestion would be as follows, so that we would get an option to align entire panel where ever you want, still keeping those buttons next to each other.

HorizontalPanel buttonsPanel = new HorizontalPanel();

        // set your width here, at what position we want to see your panel. 
        // I set 100%, so that it occupies entire width.
        buttonsPanel.setWidth("100%");
        buttonsPanel.setTableWidth("100%");
        Button test1 = new Button("Test1");
        Button test2 = new Button("Test2");

        TableData test1layoutData = new TableData();

        test1layoutData.setHorizontalAlign(HorizontalAlignment.RIGHT);
        TableData test2layoutData = new TableData();
        test2layoutData.setHorizontalAlign(HorizontalAlignment.LEFT);
        buttonsPanel.add(test1,test1layoutData);
        buttonsPanel.add(test2,test2layoutData);

RootPanel.get("buttoncontainer").add(buttonsPanel);

Screen shot: (Ignore chart, only look at the buttons at the bottom)

enter image description here

Upvotes: 0

Andrei Volgin
Andrei Volgin

Reputation: 41089

I recommend using a FlowPanel instead of HorizontalPanel. It's almost always a better option for a fluid page layout. Add your buttons to the FlowPanel and set 

myPanel.addStyleName("menuPanel");

Add this CSS rule:

.menuPanel input {
    float: left;
    margin-right: 10px;
}

Use div instead of input in the CSS rule if you use labels to look like buttons, or img if you use images as buttons.

Upvotes: 3

Athanasios Kataras
Athanasios Kataras

Reputation: 26362

The problem is as follows:

When you put items in a Horizontal Panel that is wider than the commulative width of the items inside, the placement of the items is done inside the areas specified by the Horizontal Panel.

So in this case if you want to stick them together set the starting width of the Horizontal panel as 0px and it will expand as much as it's container will allow when you add the chidren buttons.

HorizontalPanel buttonsPanel = new HorizontalPanel();

Button test1 = new Button("Test1");
Button Test2 = new Button("Test me ");
//You do not need the next line.
//buttonsPanel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_LEFT);
buttonsPanel.setWidth("0px");
buttonsPanel.add(test1);
buttonsPanel.add(Test2);
RootPanel.get("buttoncontainer").add(buttonsPanel);

Upvotes: 1

Related Questions