Jay6395558
Posts: 0
Joined: Thu Nov 07, 2013 8:17 pm

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

It is not public yet but I published it in Appery. Is that good enough for what you need?

http://mitechnologies.app.appery.io

Jay6395558
Posts: 0
Joined: Thu Nov 07, 2013 8:17 pm

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

The grouped buttons I want to center are on the home page.

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

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

Hi Jay,

Your button group is named "mobilegroupedbuttons_55" and in code you use "mobilegroupedbuttons".

Jay6395558
Posts: 0
Joined: Thu Nov 07, 2013 8:17 pm

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

I originally used that name but it wasn't working. Now it does, however, I don't want the width of the buttons to get smaller. I tried taking your reference to left margin out of the code but now the button size remains small and it is left aligned. See image and code... Image

Code:
bg = Appery("mobilegroupedbuttons_55");
bg.css("position", "absolute");
bg.css("top", "50%");
bg.css("margin-top", -parseInt(bg.css("height"))/2);

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

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

Jay,

If you need to align vertically only and leave the screen width, add the following code to the existing:prebg.css("width", "100%");/pre

Jay6395558
Posts: 0
Joined: Thu Nov 07, 2013 8:17 pm

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

Now it looks like this. I do not want it right aligned. I still want there to be equal padding on both sides.
Image

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

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

Hi Jay,

Please also add the following:precodebg.css("left", "0");
bg.css("margin-left", "0");/code/pre

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

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

The solution you gave some time ago to centre buttons was working fine both during test and on the phone, for some reason it has now stopped working properly on either, the button group is pushed too far to the right. The code you gave is :-
bg = Appery("mobilegroupedbuttons");
bg.css("position", "absolute");
bg.css("top", "50%");
bg.css("left", "50%");
bg.css("margin-left", -parseInt(bg.css("width"))/2);
bg.css("margin-top", -parseInt(bg.css("height"))/2);

Why would it have changed? There are no errors.

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

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

I have discovered what was wrong. Originally I was using static values for the button text but have now moved on to dynamic values coming from a service via local storage. I was setting the button value from the 'page show' event, if you set the values from 'page load' instead it works OK. Presumably the values were being calculated from the dimensions before the content was changed in 'page show'.

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

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

Hi Kevin,

Thank you for the update! Do you need any further help?

Return to “Issues”