Simple Centering Group Buttons

[Ellen Schlechter]

http://appery.io/app/mobile-frame?src...

Log in with username: jane and password: 123
Select the book dhjh from the select menu. Then at the bottom of each collapsible menu there is a button group.

[Yurii Orishchuk]

Hi Ellen,

You can try following CSS code(needed to be placed inside CSS asset):

pre

[name="mobilegroupedbuttons_403"] .ui-controlgroup-controls {

Code: Select all

 margin: 0 auto; 
 display: block; 
 width: 275px; 

}

/pre

Regards.

[Ellen Schlechter]

Unfortunately, that didn't work.

[Alena Prykhodko]

Dear Ellen,

Please debug your code carefully http://devcenter.appery.io/documentat... , as it works for us.
Also you can search online for appropriate solution.

Sorry, but custom code is something outside the scope of standard Appery.io platform support. You may consider purchasing Advisory Pack to get more in-depth help on this question. Here is more information about Advisory Pack (http://appery.io/services/#Advisory_Pack).

[Ellen Schlechter]

Ok so I found how to center it but as you can see, the component extends a little past the button, therefore making it not appear to be perfectly centered. How can I get rid of the excess room on the side so the button group appears truly centered?

[Illya Stepanov]

Ellen -

You will need to inspect this element using browser DevTools and look for CSS styles applied to this element and correct them the way you need.

[Ellen Schlechter]

I looked and I can confirm that this is no other CSS applied. That is just the size that the component has always been.

Public link:
http://appery.io/app/mobile-frame?src...

[Illya Stepanov]

It doesn't need to have CSS override or any other CSS, you can modify the applied styles in Dev Tools in real time. Just modify them the way you need or add additional properties if needed.