Skip to main content

Search

Modern Forms - Button (with Action) align right?

Comments

3 comments

  • 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.