Centering makes me bonkers!

I thought I was getting proficient at the technique of making my Grids do what I need them to do, but Buttons and Radio Buttons make me crazy.

I have tried custom-grid CSS, padding, offset, endless tricks.

My main grid is set to CSS CLass center and Style is margin: auto;

What am I missing with my approach?

Thank you, as always, for your wisdom!

Hello @shedev,

That is not clear for me what result do you want to get?

Do you want to remove spaces between buttons?

I want equal spacing between items and I want all three items centered on the page.

@shedev,

To center content in the grid, you need to assign CSS class to Parent grid, e.g. mainGrid.


And use the following code in JavaScript editor to align the content of the grid.

fd.spRendered(function() {
    $(".custom-grid").find(".row:not(.form-group)").eq(0).addClass("align-items-center");
});

If you want to change spacing between buttons, you need to set Offset property for the second and third buttons.

Or, if you want spacing between buttons to be fixed, you need to place each button in a separate grid, assign CSS class to it and use the below code in CSS Editor.

.col-sm-1.smallGrid {
    padding-right: 200px !important;
}
1 Like