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

edited July 13, 2018 in Ideas
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.
5
5 votes

Implemented · Last Updated

Comments

  • edited June 24, 2014
    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
  • edited July 28, 2014
    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;}
  • edited December 29, 2014
    How can I do the same thing but have the buttons Centered?
  • edited December 30, 2014
    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.
  • Jack SanfordJack Sanford San Antonio, TX 💎💎
    edited January 12, 2018
    Is there anyway to do this with a custom CSS class so that you could apply it to just one element on the page?
  • Matt SonesMatt Sones 💎💎💎
    edited February 10, 2017
    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.
  • Rob HatchRob Hatch 💎💎💎
    edited September 1, 2016
    Thanks Matt!  
  • edited February 14, 2017
    How do you float them in the center?  I tried "float: center" and "float: middle" but neither seems to work..
  • Matt SonesMatt Sones 💎💎💎
    edited February 10, 2017
    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 February 14, 2017
    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.
  • Matt SonesMatt Sones 💎💎💎
    edited January 10, 2017
    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.
  • edited July 13, 2018
    This is implemented via the Button Set component's position property (right, left, center). 
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!