Kevin Preston
Posts: 0
Joined: Wed Oct 09, 2013 12:18 pm

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

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)

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)

Hi Fred,

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

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

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

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)

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)

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)

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)

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)

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???

Return to “Issues”