Allow "Page Title" buttons to be located on the left side

  • 7
  • Idea
  • Updated 4 months ago
  • Implemented
I need to create a custom redirect button with custom rendering that appear above a table, so I'm using a Page Title component. It would be nice if I was able to make the button appear on the left side instead of only the right side, though, so that it was more visible to the user. Sometimes pages ends up scrolling horizontally and then the button isn't visible.
Photo of Peter Bender

Peter Bender, Champion

  • 6,246 Points 5k badge 2x thumb

Posted 5 years ago

  • 7
Photo of Sean Phillips

Sean Phillips

  • 248 Points 100 badge 2x thumb
Hi Peter this should help: Add a new inline CSS and enter the following in the Resource Body: "div.nx-editor-header{float: left;}"

Note that this will also shift the filters in any of your tables to the left also
Photo of Sasidharreddy myf

Sasidharreddy myf

  • 152 Points 100 badge 2x thumb
Hi Peter this will help:
 Page Title components appear on the left side instead of only the right side

Individuals

for filters ------------------------------------------------------  .nx-conditioncontainer{float:left;}

for save, cancel & search buttons-----------------------  .nx-header-right{float:left;}

TOTAL SECTION

for filters and buttons and else part of header -------  div.nx-editor-header{float: left;}
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,310 Points 2k badge 2x thumb
How can I do the same thing but have the buttons Centered?
Photo of John Nelson

John Nelson, Product Manager

  • 3,234 Points 3k badge 2x thumb
Would really just like it if the buttons weren't tied to the Page Title component. They should really live on their own, or at least in their own container. Then you could put them wherever you want using a panel set. 
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,310 Points 2k badge 2x thumb
Yes, that would be ideal. Sometimes I want to be able to put buttons next to or under field editors and then show them if fields are selected or have certain values.
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,322 Points 5k badge 2x thumb
Is there anyway to do this with a custom CSS class so that you could apply it to just one element on the page?
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
absolutely.

If I want all of the buttons on my pagetitle component to float left instead of right, I give the pagetitle the css class "title-buttons-left" and then add CSS to my page (or master page or into my theme directly) that looks like this:

*Float Button Left*/
div .title-buttons-left .nx-header-right {
    float: left;
}

You could do something similar by applying a class to a single pagetitle button.
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Thanks Matt!  
Photo of Stephen Chilcoat

Stephen Chilcoat

  • 732 Points 500 badge 2x thumb
How do you float them in the center?  I tried "float: center" and "float: middle" but neither seems to work..
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
I haven't tested this, but you could try something like this:

div .title-buttons-center .nx-header-right {
    margin-left: auto;
    margin-right: auto;
}
(Edited)
Photo of Stephen Chilcoat

Stephen Chilcoat

  • 732 Points 500 badge 2x thumb
I'll try this.  Thanks.  I also discovered a round-about way by using a responsive grid with 3 columns (page title component in the middle column).  Then you can get there just by adjusting the width of each column.
(Edited)
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Stephen,

The Grid is the easiest way to go if you don't need the title/subtitle text on the pagetitle component. You can just create a new grid with three divs, drop your page title component in the middle one, and set that one to 'fit to content'. The other two will adjust automatically to center your pagetitle component.
Photo of John Nelson

John Nelson, Product Manager

  • 3,234 Points 3k badge 2x thumb
This is implemented via the Button Set component's position property (right, left, center).