How to Float save button to centre on the page title component

  • 1
  • Question
  • Updated 2 years ago
  • In Progress
How can i float save and cancel buttons on a page title component to the middle of the page.. Right-now I have them on the left side of the page.
I tried the following CSS but dint work.

div .title-buttons-center .nx-header-right {
margin-left: auto;
margin-right: auto;
}
Photo of Avinash

Avinash

  • 1,726 Points 1k badge 2x thumb

Posted 2 years ago

  • 1
Photo of Conlan O'Rourke

Conlan O'Rourke

  • 3,270 Points 3k badge 2x thumb
I would recommend using the new Button Set component in Brooklyn release. There is a standard property to adjust the alignment of the buttons (left, center, right). That way, you won't have to bother with any CSS.

If you absolutely must keep the old buttons on a page title, what I used to do is place the page title component inside a responsive grid which had 3 divisions...placing the page title in the center division and setting the division width property to "Fit to Content". Then I removed the title and sub-title from the page Title. That way, it would float nicely in the center of the responsive grid.

But again, the new button set component was designed specifically for that purpose.
Photo of Avinash

Avinash

  • 1,726 Points 1k badge 2x thumb
Hi Conlan,


I tried the button set component and i set the buttons position to center. But when i preview the page i am seeing the buttons floating to the left side of the page.

This is how i see in the Edit page



This is how it shows up in the preview page



I don't have any CSS on this page and even if i change the button position to right and preview the page, i am seeing the button on the left side only when i preview the page.

How do i solve this issue?
(Edited)
Photo of Conlan O'Rourke

Conlan O'Rourke

  • 3,270 Points 3k badge 2x thumb
Hmm...I'm stumped then. I just tested it out in my own instance, and the button set positioning worked fine. Do you have the button set component inside any other layout components (panel set, responsive grid, etc.)?
Photo of Avinash

Avinash

  • 1,726 Points 1k badge 2x thumb
No. I don't have Button set component in any other place. I too tested the button component in a sample page and it worked out. But for some reason it is not working on the pop up that i wanted to.