Skip to main content

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.

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


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;}


How can I do the same thing but have the buttons Centered?


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. 


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.


Is there anyway to do this with a custom CSS class so that you could apply it to just one element on the page?


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*/<br>div .title-buttons-left .nx-header-right {<br>&nbsp; &nbsp; float: left;<br>}


You could do something similar by applying a class to a single pagetitle button.


Thanks Matt!  


How do you float them in the center?  I tried “float: center” and “float: middle” but neither seems to work…


I haven’t tested this, but you could try something like this:


div &#46;title-buttons-center &#46;nx-header-right {<br />&nbsp; &nbsp; margin-left: auto;<br />&nbsp; &nbsp; margin-right: auto;<br />}

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.


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.


This is implemented via the Button Set component’s position property (right, left, center).