How to align table with other table components on same page

HTML & CSS
1

I’m trying to get the table underlined in the image below to line up with the ‘Notifications’ table that is to the right of it and also line up with the ‘Welcome’ table below up. So it basically aligns pushed over to the left with ‘Welcome’ and top and bottom line up with 'Notifications to the right of it. Sorry the lines aren’t drawn perfectly but you can see how I want it aligned. Basically I want to move the outlined ‘Account Overview’ table up and over to the left. Drew lines to show in the image.

Capture
Capture1909×1060 183 KB

Here is the html and css code for this. I tried using a codepen but there is just too much extra code needed to render on codepen.

html

<div class="sdps-is-relative badge-example-outline sdps-p-around_medium sdps-m- 
  around_medium">
<sdps-badge
  sdps-id="spdb-promotional-beta-overlay"
  type="promotional"
  status-text="Beta"
  promotional-type="beta"
  sr-label-prefix="You have got"
  sr-label-suffix="notifications"
  is-overlay
>
</sdps-badge>
<div class="ao-text-header">Account Overview has a new look</div>
You can view your retirement accounts below, or go back to the classic experience.
</div>
 <sdps-panel sdps-id="account-overview-panel-personalperformance">
     <div class="SSOManageAccount modalInject">
      <div slot="modal-body" appModalContent>
         <div>We want to let you know you’ll be accessing schwabdeferredcompensation.com, a third- 
       party website. By
            clicking continue below, you are requesting to open a new page.</div>
    </div>
    <div slot="modal-footer" appModalFooter>
        <div class="rps__d-flex rps__align-items-center SSOManageAccountFooter">
            <div class="rps__flex-grow-1 rps__align-self-end">(0823-3U5E)</div>
            <sdps-button class="sdps-m-left_medium no-margin" variation="secondary"
                sdps-id="btn-manage-external-account" 
        (sdpsClick)="modalContent.actions.secondary.action()"
                [sdpsAriaLabel]="modalContent.actions.secondary.ariaLabel"> 
   {{modalContent.actions.secondary.label}}</sdps-button>
            <sdps-button class="sdps-m-left_medium no-margin" variation="primary"
                sdps-id="btn-manage-external-account" 
  (sdpsClick)="modalContent.actions.primary.action()"
                [sdpsAriaLabel]="modalContent.actions.primary.ariaLabel"> 
   {{modalContent.actions.primary.label}}</sdps-button>
        </div>
    </div>
</div>
<div #loadable>
    <app-welcome></app-welcome>
    <div class="sdps-row">
        <app-balance></app-balance>
    </div>
    <sdps-button class="sdps-m-left_medium no-margin top-margin" variation="secondary" sdps- 
       id="btn-manage-external-account"
        (sdpsClick)="openModal()"
        [sdpsAriaLabel]="modalContent.actions.primary.ariaLabel">{{displayText}}</sdps-button>
   </div>
</sdps-panel>

css

@import "lib/scss/variables.scss";

.rps__balance-graph {
  &.loading {
        min-height: 274px;
     }
 }
 .no-margin {
   margin-left: 0!important;

}

.top-margin {
    margin-top: 20px!important;
}

.SSOManageAccountFooter {
    & sdps-button:not(:last-child) {
       margin-right: 20px;
  }

   & *:nth-child(1) {
       order: 1;
   }

  & *:nth-child(2) {
     order: 2;
 }

  & *:nth-child(3) {
       order: 3;
    }
 }

@media (max-width: $tablet-portrait-min) {
    .SSOManageAccountFooter {
      flex-wrap: wrap;

      & > *:not(:last-child) {
        margin-top: 24px;
     }

    & *:nth-child(1) {
        order: 3;
    }

    & *:nth-child(2) {
        order: 2;
    }

    & *:nth-child(3) {
        order: 1;
    }

    & sdps-button {
        width: 100%;
        justify-content: center;

        &::ng-deep > button {
            width: 100%;
            justify-content: center;
        }

        &:not(:last-child) {
            margin-right: 0;
           }
         }
      }
   }

.badge-example-outline {
  border-radius: 2px;
  border: 1px solid #cbd1d6;
  background-color: #fff;
 -webkit-box-shadow: 0 0 0 rgba(0,0,0,0);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  position: relative;
 }

.ao-text-header {
   font-size: 18px;
    font-size: 1.5rem;
   font-family: CharlesModern-Medium,CharlesModern-Regular,Arial,Helvetica,sans-serif;
   font-weight: 400;   
}
2

If you can’t make it render on codepen then there is little chance of us being very helpful as we also need to build a working example in order to test.

Also you have custom html elements so I don;t know how you have implemented those as they will behave as inline elements unless you have told them otherwise. That means vertical margins will have no effect.

You have to ask yourself why it is mis-aligned?

It looks to me as though the ‘beta’ button is the culprit and pushing everything wide. I would guess that you need to absolutely place the beta button so it doesn’t disrupt the flow of the other elements which should naturally align up by default (all things being equal).

Of course all that is just a wild guess :slight_smile:

If you have a link you could share the problem could be pinpointed more accurately.

1 Like