Skip to main content
BOOK A DEMO

Search

Modern Forms - Button (with Action) align right?

Joerg_K.
  • Discussion Edited

Hello,

I tried all what I knew so far to get a button aligned to the right, but nothing worked so far, any CSS nerds reading and ready to help?

margin-right: 0;
margin-left:auto;
display:block;

or

display:flex;
justify-content: flex-end;

or

text-align: right;

or

float: right;

Didn't do the trick so far :( and I think it is because of the structure of the CSS classes. The class for the "button with actions" is having a GUID attached so we can't address that container right?

More ideas to try?

Many thanks in advance.

Cheers

Joerg

0

Comments

3 comments

Date Votes
  • Kilgore ServiceAccount

    Greetings,

    I can't claim to have the exact solution you are looking for, but this might help...

    I was attempting to simply Center an Action Button when I eventually found that 'margin-left' was the only attribute that seemed to get me close to what I wanted. 

    Button - Completed: HR Initial Review

    .sb-button {
      background-color: #063d68;
      color: #f4f4f4;
      border-color: #c8ff85;
      border-width: 6px;
      border-radius: 9px;
      height: 90px;
      width: 300px;
      font-size: 15pt;
      margin-left: 80px;
    }

    .sb-button:hover:not(:active) {
      background-color: #c8ff85;
      border-color: #063d68;
      color: #080808;
    }

    .sb-button-label {
      font-weight: 700;
    }

    Button - View: All Offboarding Task

    .sb-button {
      background-color: #063d68;
      color: #f4f4f4;
      border-color: #ffd385;
      border-width: 6px;
      border-radius: 9px;
      height: 90px;
      width: 300px;
      font-size: 15pt;
      margin-left: 111px;
    }

    .sb-button:hover:not(:active) {
      background-color: #ffd385;
      border-color: #063d68;
      color: #080808;
    }

    .sb-button-label {
      font-weight: 700;
    }

    Button - Add: New Offboarding Item

    .sb-button {
      background-color: #063d68;
      color: #f4f4f4;
      border-color: #ffd385;
      border-width: 6px;
      border-radius: 9px;
      height: 72px;
      width: 270px;
      font-size: 15pt;
      margin-left: 130px;
    }

    .sb-button:hover:not(:active) {
      background-color: #ffd385;
      border-color: #063d68;
      color: #080808;
    }

     

     

    0
  • Joerg_K.

    Many thanks Kilgore ServiceAccount, this confirms that the used classes and nesting as currently in use will not allow to right align a button. Too sad. 

    Using the margin-left seems to be a solution, but only if you have consistent screen sizes, if you go too far the button may not be visible anymore.

    0
  • Kilgore ServiceAccount

    Joerg_K. , you are correct. The screen/device size consistency is the pain-point here. 75% of my forms are utilized on a PC, with the other 25% on an iPad. Any Lists where there is a mix use of PC-iPad, I usually create Forms specifically for the iPad, which includes 'CSS hacks' for the buttons and other nuances to layout correctly.

    0

Please sign in to leave a comment.