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

This forum contains topics that were moved from Get Satisfaction
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,

As we can see in your first screenshot you paste code in console but do not select a needed iframe here:
Image

As soon as you select an iframe you can paste code in console and test.

Could you please clarify whether you take the first screenshot after you added code to Page Show event, or do you paste it straight away?

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 »

This is what I get when I change the iframe. Image

The code was added in the editor. Then I went to test it and pasted the same code in the console.

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 »

I noticed that even in the editor, the buttons aren't centered. The margins of the buttons and the grid are still the default.

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 »

Hello,

Please try this code:

pre

var MakeAction = function(){
var grid = Appery('buttons_grid');
grid.css({
top: '50%',
position: 'absolute',
width: '100%',
left: 0,
'margin-top': -( grid.outerHeight() / 2 )
});
alert("positionChanged");
};
$(window).bind('orientationchange', function(e) {
MakeAction();
});
MakeAction();

/pre

This code has debug alert that you should see after grid will be aligned.

So after change orientation you should see this alert too.

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 »

I got the notification but it didn't seem to actually change the position. I don't know if this will help you or not, but my app is already shared with you from previous cases. It is called the Calving Book.

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 describe where you have this notifications (alert)?

Given code should work before change orientation, does it?

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 »

The notification part works fine and it notifies me before the orientation change. The only problem is that it doesn't center the buttons.

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 »

Ok, please give us your app public link and describe steps to reproduce this problem.

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 »

Sign on when you see the first screen (username: jane password:123)
On the next page you will notice that in the footer, the three buttons are not centered like they should be.
http://appery.io/app/mobile-frame?src...

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,

I seems you just need to center your content in the grid.

For this goal:

1 Comment all code you did for this purpose.

2 Add "page show" event handler for "screen1" page.

3 Populate it with following code:

pre

Apperyio("mobilegrid_267").find("td").attr("align", "center")

/pre

Regards.

Post Reply