Page 1 of 2

Simple Centering Group Buttons

Posted: Mon Jun 16, 2014 11:01 pm
by Matt Scott

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

Image


Simple Centering Group Buttons

Posted: Tue Jun 17, 2014 12:42 am
by Yurii Orishchuk

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.


Simple Centering Group Buttons

Posted: Tue Jun 17, 2014 3:06 am
by Matt Scott

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!

Image


Simple Centering Group Buttons

Posted: Tue Jun 17, 2014 3:18 am
by Matt Scott

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


Simple Centering Group Buttons

Posted: Tue Jun 17, 2014 4:10 am
by Yurii Orishchuk

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.


Simple Centering Group Buttons

Posted: Tue Jun 17, 2014 9:26 pm
by Matt Scott

ok, perfect! Thanks so much!


Simple Centering Group Buttons

Posted: Sun Mar 08, 2015 2:36 am
by Ellen Schlechter

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


Simple Centering Group Buttons

Posted: Sun Mar 08, 2015 3:23 am
by Illya Stepanov

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.


Simple Centering Group Buttons

Posted: Sun Mar 08, 2015 1:51 pm
by Ellen Schlechter

I do not have anything that would effect those buttons.


Simple Centering Group Buttons

Posted: Sun Mar 08, 2015 5:53 pm
by Illya Stepanov

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