Forum | Appery.io

Hi,

I'm having a requirement to align a button group to bottom and center in the page. I don't want to use the footer as I want to use the same background color to be for the button group I'm putting in. Attached the screen I'm having so far with the use of Footer, where I can see the footer to be different than the page and it doesn't look nice.

I'll be happy to hear any suggestions either:

1. Have same background image to the footer

2. Suggestion how to put the button group to bottom center

   Thanks!

Hi Suda,

Please take a look here: http://devcenter.appery.io/documentat...

and you can apply styles to button groups with CSS, here is described a basic approach: http://devcenter.appery.io/documentat...

I have used the code below from your docs. It works great for images but I am unable to center a button group. Any suggestions? Many thanks!

Centering a component

To center the component on the page, add the following JS onscreen load event:
Apperyio('mobileimage_1').css('margin', 'auto');
Apperyio('mobileimage_1').css('display', 'block');

Hello Caroline,

Please try adding class name to the button group and try our rules in CSS asset with adding code!important/code to them.

Evgene,

This is what I have added to my css file but the group of buttons are not centered.
[dsid=pet_state_radiogroup] .ui-btn {
margin: auto !important;
display: block !important;
}

Please let me know what I should try.

Many thanks!

Hi Caroline,

Please try following solution to center radiobuttongroup component:

1. Remove or comment all css code you write before.

2. Create new CSS asset.

3. Add following CSS code to this CSS asset:

   pre

   /* where "mobileradiogroup_211" is your radiogroup component name */
   [dsid="mobileradiogroup_211"].ui-field-contain{
   display: table;
   margin: 0 auto;
   }

   /pre

   Note: you should use your radiogroup component name.

   Regards.

Thank you. That worked like a charm.