Forum | Appery.io

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/...

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

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

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.

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!

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

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.

ok, perfect! Thanks so much!

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;
}

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.

I do not have anything that would effect those buttons.

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