Simple Centering Group Buttons

Mon Jun 16, 2014 11:01 pm

Hello,
I have tried numerous codes found here on the forums, but still fail to get my horizontal group buttons centered. I need a simple center alignment, not left alignment.

I have tried making a new CSS file and using the codes I found here:

https://getsatisfaction.com/apperyio/...

But with no success. I have also tried various lines of standard CSS. I also tried adding the !important. I am still doing something wrong.

Would you please advise on what I am missing? Thanks so much.

I am attaching a screenshot.

I simply would like all my horizontal group buttons, (not only on this page), centered. I would like both:
(1) the button group centered in-line as seen in screenshot. AND
(2) the icons centered on each button.

Thanks so much for your assistance!
Matt

Tue Jun 17, 2014 12:42 am

Hi Matt.

Please provide us your app public link and describe steps to reproduce your problem.

Also make screen shots and add details on it how you would like to get it work.

Regards.

Tue Jun 17, 2014 3:06 am

Hello,

Yes, sure. The app, "God Tools Thailand," has already been shared with appery support.

There are no steps to reproduce the problem. The default alignment for the group buttons box is left. I want it to be CENTER alignment.

Let us focus on only 1 question - It is very basic I think:

#1 Using CSS, how do I center the GROUP BUTTONS component for all my pages? I want to center the whole component - the whole box - for all my pages.

Thanks so much!

Tue Jun 17, 2014 3:18 am

in my app, the page used to test this is "Man_2_Eng". thank you.

Tue Jun 17, 2014 4:10 am

Dear Matt.

Please follow these steps:

1 Open your goal page and activate your custom component by clicking on it.

2 Properties side bar will appear, copy component name. http://prntscr.com/3tlkxs/direct

3 Create new css asset and fill it with following code:

pre

//Note: you should replace "customnaveng1_46" with name frome 2nd step.
div[dsid="customnaveng1_46"] div[dsid="customnaveng1_46_mobilegroupedbuttons_35"]{
text-align: center;
}

//Note: you should replace "customnaveng1_46" with name frome 2nd step.
div[dsid="customnaveng1_46"] div.ui-controlgroup-controls{
display: inline-block;
}

/pre

That's all.

Regards.

Tue Jun 17, 2014 9:26 pm

ok, perfect! Thanks so much!

Sun Mar 08, 2015 2:36 am

I tried using that the same code but it didn't work for me.

div[dsid="mobilegroupedbuttons_403"] {
text-align: center;
}

div[dsid="mobilegroupedbuttons_403"] div.ui-controlgroup-controls{
display: inline-block;
}

Sun Mar 08, 2015 3:23 am

Hi Ellen -

Works for me with this CSS:

precode
div[dsid="mobilegroupedbuttons_2"] {
text-align: center;
}

div[dsid="mobilegroupedbuttons_2"] .ui-controlgroup-controls {
display: inline-block;
}/code/pre

It could be that some other styles overrides your CSS rule.

Sun Mar 08, 2015 1:51 pm

I do not have anything that would effect those buttons.

Sun Mar 08, 2015 5:53 pm

Please provide us with a public app link and steps to reproduce.