How to center an object

[BeN01]

Hi, i have to center a label into a Layout, in heigh i have no problem, I use label.setLayoutAlign( Alignment.CENTER );

but in width, when i use :
label.setLayoutAlign( VerticalAlignment.CENTER );

i have no action

thanks for helping me

[mihai007]

did you set the width and height for the label or only the height?
Try to set fixed width and height and see if anything changes...

[BeN01]

Hi i set width and height for the label :
label.setWidth( 300 );
label.setHeight( 300 );

same for the Layout :
layout.setWidth100();
layout.setHeight100();

edit if i change the Layout type to a VLayout, i can center it in with but cant in height...

[mihai007]

Well this doesen't make much sense but after playing a little with the layouts it seems that:
if you addMember(label) to a HLayout:
-- label.setLayoutAlign(VerticalAlignment.BOTTOM); works ok
-- label.setLayoutAlign(VerticalAlignment.CENTER); works ok
-- label.setLayoutAlign(VerticalAlignment.TOP); works ok

-- label.setLayoutAlign(Alignment.RIGHT); same as VerticalAlignment.BOTTOM
-- label.setLayoutAlign(Alignment.CENTER); same as VerticalAlignment.CENTER
-- label.setLayoutAlign(Alignment.LEFT); same as VerticalAlignment.TOP

now if you addMember(label) to a VLayout:
-- label.setLayoutAlign(Alignment.RIGHT); works ok
-- label.setLayoutAlign(Alignment.CENTER); works ok
-- label.setLayoutAlign(Alignment.LEFT); works ok

-- label.setLayoutAlign(VerticalAlignment.BOTTOM); same as Alignment.RIGHT
-- label.setLayoutAlign(VerticalAlignment.CENTER); same as Alignment.CENTER
-- label.setLayoutAlign(VerticalAlignment.TOP); same as Alignment.LEFT


Now this is not how it should be, I don't know if there could be a fix to this because of css limitations I think...
In the meantime you can achieve what you want like this:

	HLayout parentLayout = new HLayout();
	parentLayout.setBackgroundColor("gray");
	parentLayout.setDefaultLayoutAlign(VerticalAlignment.CENTER);
	parentLayout.setWidth100(); // get the entire width
	parentLayout.setHeight100(); // get the entire height

		
	VLayout fixedHeight = new VLayout();
	fixedHeight.setBackgroundColor("blue");
	fixedHeight.setDefaultLayoutAlign(Alignment.CENTER);
	fixedHeight.setHeight(100); // this is for label height
		
		
	Label fixedWidthLabel = new Label();
	fixedWidthLabel.setBackgroundColor("green");
	fixedWidthLabel.setWidth(100);  // this is for label width


	parentLayout.addMember(fixedHeight);
	fixedHeight.addMember(fixedWidthLabel);
	parentLayout.draw();

The only drawback is that the box in the middle needs fixed width and height, it can't grow by it's own (when you add more text it should grow for example) but still this could be achieved manually by increasing the label size in function of the number of characters or something...

[jballh]

Hello mihai007,

thank you very much, it works great. I think it's a little confusing and a lot of code to achieve the centering effect (but yet again, that's not your fault, if this is the only workaround).

Maybe you can invoke fixedHeight.setAutoHeight() for the VLayout, this way you don't have to set it to the Label's height. This approach worked well for me.

[kkotak]

Well this doesen't make much sense but after playing a little with the layouts it seems that:
if you addMember(label) to a HLayout:
-- label.setLayoutAlign(VerticalAlignment.BOTTOM); works ok
-- label.setLayoutAlign(VerticalAlignment.CENTER); works ok
-- label.setLayoutAlign(VerticalAlignment.TOP); works ok

-- label.setLayoutAlign(Alignment.RIGHT); same as VerticalAlignment.BOTTOM
-- label.setLayoutAlign(Alignment.CENTER); same as VerticalAlignment.CENTER
-- label.setLayoutAlign(Alignment.LEFT); same as VerticalAlignment.TOP

now if you addMember(label) to a VLayout:
-- label.setLayoutAlign(Alignment.RIGHT); works ok
-- label.setLayoutAlign(Alignment.CENTER); works ok
-- label.setLayoutAlign(Alignment.LEFT); works ok

-- label.setLayoutAlign(VerticalAlignment.BOTTOM); same as Alignment.RIGHT
-- label.setLayoutAlign(VerticalAlignment.CENTER); same as Alignment.CENTER
-- label.setLayoutAlign(VerticalAlignment.TOP); same as Alignment.LEFT


Now this is not how it should be, I don't know if there could be a fix to this because of css limitations I think...
In the meantime you can achieve what you want like this:

	HLayout parentLayout = new HLayout();
	parentLayout.setBackgroundColor("gray");
	parentLayout.setDefaultLayoutAlign(VerticalAlignment.CENTER);
	parentLayout.setWidth100(); // get the entire width
	parentLayout.setHeight100(); // get the entire height

		
	VLayout fixedHeight = new VLayout();
	fixedHeight.setBackgroundColor("blue");
	fixedHeight.setDefaultLayoutAlign(Alignment.CENTER);
	fixedHeight.setHeight(100); // this is for label height
		
		
	Label fixedWidthLabel = new Label();
	fixedWidthLabel.setBackgroundColor("green");
	fixedWidthLabel.setWidth(100);  // this is for label width


	parentLayout.addMember(fixedHeight);
	fixedHeight.addMember(fixedWidthLabel);
	parentLayout.draw();

The only drawback is that the box in the middle needs fixed width and height, it can't grow by it's own (when you add more text it should grow for example) but still this could be achieved manually by increasing the label size in function of the number of characters or something...

Thanks so much for this. Unfortunately it doesn't work for me when I have two buttons that I want to align in the middle of an HLayout. I am amazed by the difficulties in alignments with the SmartGWT platform. Any tips on how I can have two buttons "login" & "reset" aligned in the center of an HLayout that follows a login form? Here's my code -
-------

IButton loginButton = new IButton();
loginButton.setTitle("Login");
loginButton.setWidth(100);
loginButton.setLayoutAlign(VerticalAlignment.CENTER);

IButton resetButton = new IButton();
resetButton.setTitle("Reset");
resetButton.setWidth(100);
resetButton.setLayoutAlign(VerticalAlignment.CENTER);

HLayout buttonsLayout = new HLayout();
buttonsLayout.setBackgroundColor("blue");
buttonsLayout.setDefaultLayoutAlign(VerticalAlignment.CENTER);
//buttonsLayout.setWidth100(); // get the entire width
//buttonsLayout.setHeight100(); // get the entire height
buttonsLayout.setHeight(30);

VLayout fixedHeight = new VLayout();
fixedHeight.setBackgroundColor("gray");
fixedHeight.setDefaultLayoutAlign(Alignment.CENTER);
fixedHeight.setWidth100();
fixedHeight.setHeight(30);

fixedHeight.addMember(buttonsLayout);
buttonsLayout.addMember(loginButton);
buttonsLayout.addMember(resetButton);

vStack.addMember(fixedHeight);

-------

Any help would be greatly appreciated...

Cheers,

_K

[Isomorphic]

This has been covered so many times I guess we need <blink> tags on the home page :)

Add LayoutSpacers on either side of the element you want centered. This will center any size element.

[kkotak]

This has been covered so many times I guess we need <blink> tags on the home page :)

Add LayoutSpacers on either side of the element you want centered. This will center any size element.

Begs a question as to why you have to cover it so many times if it was so straight forward. In any case, your suggestion doesn't work, I have tried it in many different forms. I wish Isomorphic support would actually give concrete code suggestions instead of just referring to a feature/method or the documentation. I see that you guys always ask for concrete test case and code from the users of this forum - how about doing your part and telling us how exactly you'd change the code I submitted to achieve the goal.

We can only be paying future customers if you help your users get things working - even if its for the nth time. We are not here to make your life difficult, just to evaluate that your product is the right one for us.

Cheers,

_K

[Isomorphic]

The docs contain samples and link to samples in many cases. Rather than help every user individually, we improve the docs continuously. That's why a giant ream of new docs went up last week, and why an enhancement is already scheduled to happen in this area so that you can't help but find the right answer in the docs.

So please don't quibble with us about whether we've chosen to answer this question 4 times on the forums vs 5 times on the forums. We have to make trade-offs between improving the product to eliminate repeat questions vs just answering such questions them in perpetuity.

[kkotak]

The docs contain samples and link to samples in many cases. Rather than help every user individually, we improve the docs continuously. That's why a giant ream of new docs went up last week, and why an enhancement is already scheduled to happen in this area so that you can't help but find the right answer in the docs.

So please don't quibble with us about whether we've chosen to answer this question 4 times on the forums vs 5 times on the forums. We have to make trade-offs between improving the product to eliminate repeat questions vs just answering such questions them in perpetuity.

Yep. Thanks.

[jmichelgarcia]

Thank you.
It worked like a charm for me too.

But my question is, if we have to use setLayoutAlign on each Canvas component we would like to add in a layout manager, what is the purpose of "setAlign" of a Layout ?

In SmartGWT 2.4 the doc says.

the setAlign of VLayout : Alignment of all members in this Layout on the length axis. Defaults to "top" for vertical Layouts, and "left" for horizontal Layouts.

And still, the setLayoutAlign of Label says : When this Canvas is included as a member in a Layout, layoutAlign controls alignment on the breadth axis of the layout. Default is "left" for a VLayout, "top" for an HLayout.


In others words, even if my english isn't that good, My advice would be to use "width" and "height" terms rather than "length" and "breadth".

Thank you for the support.
Cheers

[Isomorphic]

See layout.deraultLayoutAlign, as well as the class overview doc, which covers the use of the terms length and breadth as a means of explaining both HLayout and VLayout behavior in one doc.

[jmichelgarcia]

Yes, now i got the right way of doing it.

But as i see the thread has more than 1400 view, it clearly shows that a lot of people were doing this kind of mistakes.

regards.

[Isomorphic]

That's why there a centering sample now.

[RevMen]

I feel like I've done enough due diligence on this subject to ask a question. I've spent the last few hours looking at examples and reading people's frustration with trying to center things.

What am I missing?

VLayout bigCanvas = new VLayout();
(also tried Canvas and HLayout)

bigCanvas.setWidth100();
bigCanvas.setHeight100();
(tried with and without these)

TabSet myTabSet = new TabSet();
myTabSet.setTabBarPosition(Side.TOP);

myTabSet.setWidth(800);  
myTabSet.setHeight(600);
(tried with and without these)

myTabSet.setAlign(Alignment.CENTER);
(also tried setLayoutAlign)

...add tabs and things on tabs...

bigCanvas.addMember(myTabSet);
(also .addChild)

bigCanvas.draw();

Nothing happens. No errors are thrown, but no centering occurs. I've also tried centering other widgets besides a TabSet, including a ListGrid and a Label. The label will center, but not the ListGrid. Why will the label center, but not the ListGrid or the TabSet?

I thought maybe I need to wrap the ListGrid in another layout. So I created an additional VLayout, centered it in the outside VLayout, then added the TabSet to it (and centered it). Still nothing, although a label right below it centers just fine.

edit:

If I use a second VLayout inside of the first and center the TabSet inside of that with .setLayoutAlign(Alignment.CENTER) I get horizontal alignment. At long last.