Center grouped buttons on home page (vertical and horizontal alignment)

This forum contains topics that were moved from Get Satisfaction
Kevin Preston
Posts: 0
Joined: Wed Oct 09, 2013 12:18 pm

Center grouped buttons on home page (vertical and horizontal alignment)

Post by Kevin Preston »

Katya,
No thanks - not at the moment at least!

Fred McIntyre
Posts: 0
Joined: Sun Jan 12, 2014 5:04 pm

Center grouped buttons on home page (vertical and horizontal alignment)

Post by Fred McIntyre »

I am trying to center these buttons horizontally. Note that the group component is centered horizontally on the page, but the buttons are not centered within the component. (I am not trying to center anything vertically.) Is there a way to accomplish this?
Image

Kateryna Grynko
Posts: 0
Joined: Thu Nov 15, 2012 9:13 am

Center grouped buttons on home page (vertical and horizontal alignment)

Post by Kateryna Grynko »

Hi Fred,

Add this CSS:pre[dsid=mobilecheckboxgroup] fieldset{
text-align: center;
}/preWhere 'mobilecheckboxgroup' is a name of checkboxgroup component.

Fred McIntyre
Posts: 0
Joined: Sun Jan 12, 2014 5:04 pm

Center grouped buttons on home page (vertical and horizontal alignment)

Post by Fred McIntyre »

Thank you very much.

Ellen Schlechter
Posts: 0
Joined: Sun Aug 31, 2014 3:28 am

Center grouped buttons on home page (vertical and horizontal alignment)

Post by Ellen Schlechter »

If I have three individual buttons, how do I center them in the footer horizontally and vertically. I tried putting them in a grid and adjusting the margins but if it was centered one way, it wasn't the other.

Kateryna Grynko
Posts: 0
Joined: Thu Nov 15, 2012 9:13 am

Center grouped buttons on home page (vertical and horizontal alignment)

Post by Kateryna Grynko »

Hi Ellen,

If you need such result then add 3 buttons to a Grid and run the following JavaScript code on Page Show event:
prevar grid = Appery('buttons_grid');
grid.css({
top: '50%',
position: 'absolute',
width: '100%',
left: 0,
'margin-top': -( grid.outerHeight() / 2 )
});/preWhere buttons_grid is your Grid name.

Ellen Schlechter
Posts: 0
Joined: Sun Aug 31, 2014 3:28 am

Center grouped buttons on home page (vertical and horizontal alignment)

Post by Ellen Schlechter »

That works only if it is on the default screen size. If I try to rotate the orientation or change the screen size, it doesn't work.

Ellen Schlechter
Posts: 0
Joined: Sun Aug 31, 2014 3:28 am

Center grouped buttons on home page (vertical and horizontal alignment)

Post by Ellen Schlechter »

Ok I realized that I had the cells in my grid unevenly sized so that is why it didn't work in the other modes. I changed it back to evenly spaced cells but now it doesn't have them centered in any mode.

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

Center grouped buttons on home page (vertical and horizontal alignment)

Post by Yurii Orishchuk »

Hi Ellen,

Please use given code on page orientation change event too.

Here is how to handle this event:

pre

$(window).bind('orientationchange', function(e) {
/* do something */
});

/pre

Regards.

Ellen Schlechter
Posts: 0
Joined: Sun Aug 31, 2014 3:28 am

Center grouped buttons on home page (vertical and horizontal alignment)

Post by Ellen Schlechter »

So what I did (not sure if this is what you meant) was added the code that you have me to the bottom of the code that Kateryna gave me. Her code is currently run on "page show" but it is no longer working.

I didn't really see a page orientation change event???

Post Reply