Angular HTML element alignment issue

Question

I am trying to align the bottom picture to the right of the table. I know that i am missing a small setting here, but cant seem to find it. At the bottom code it is the saleForMonth element that I want to align it to the right.

   <mat-sidenav-container>
    <mat-sidenav-content style="height:99vh;">
        <div style="float:left; margin:22px 0px 0px 32px;">
            <div style="text-align:center;">
            </div>
            <button mat-raised-button type="button" style="background-color:#3378a8;color:WHITE;height:45px;" (click)="sidenavOpen('sale',sidenav)">
                <b>SALE</b>
            </button>
            <button mat-raised-button type="button" style="background-color:#3378a8;color:WHITE;height:45px;margin-left:2px;" (click)="sidenavOpen('upgrade',sidenav)">
                <b>UPGRADE</b>
            </button>
            <div style="margin-top:53px">
                <div>
                    <salesByPackage></salesByPackage>
                </div>
                <div style="margin-top:240px;">
                    <salesByCampaign></salesByCampaign>
                </div>
            </div>
        </div>
        <div class="container" style="margin-top:20px;float:right">
                <div class="col-lg-9">
                  <mat-tab-group #tab mat-stretch-tabs (selectedTabChange)="onTabClick($event)">
                      <mat-tab label="SALES">
                          <orders></orders>
                      </mat-tab>
                      <mat-tab label="UPGRADES">
                          <upgrades></upgrades>
                      </mat-tab>
                  </mat-tab-group>
              </div>
              <!-- Change to this -->
              <div class="col-lg-3">
                  <div>
                      <salesForMonth></salesForMonth>
                  </div>
              </div>
              </div>
    </mat-sidenav-content>

have you tried style="float:right"? on div

Himanshu Bansal
– Himanshu Bansal

2018-05-25 04:33:15 +00:00
Commented May 25, 2018 at 4:33 — Himanshu Bansal
– Himanshu Bansal, Commented May 25, 2018 at 4:33
Yes I already did, it didn't work out

Sumchans
– Sumchans

2018-05-25 04:40:43 +00:00
Commented May 25, 2018 at 4:40 — Sumchans
– Sumchans, Commented May 25, 2018 at 4:40

Tony · Accepted Answer · 2018-05-25 06:37:16Z

1

<div class="row" style="float:right">
  <div class="col-lg-3">
    <salesForMonth></salesForMonth>
  </div>
</div>

Or you can use empty div at the left side and set it with col-lg-9

<div class="row">
  <div class="col-lg-9">

  </div>
  <div class="col-lg-3">
    abc
  </div>
</div>

answered May 25, 2018 at 6:37

Tony

1,2942 gold badges12 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sumchans Over a year ago

Thanks everybody for joining in.

Pardeep Jain · Accepted Answer · 2018-05-25 04:34:00Z

0

If your component salesForMonth is not of full width, Try this CSS -

    <div style='width:100%; float:right'>
        <salesForMonth></salesForMonth>
    </div>

else just put float:right on your element.

answered May 25, 2018 at 4:34

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

5 Comments

Pardeep Jain Over a year ago

Can you reproduce it on stackblitz?

Sumchans Over a year ago

its going to be a bit hard with this complex setup I have.

Sumchans Over a year ago

With putting float:right this way <div style="float:right"> <salesForMonth></salesForMonth> </div> I was able to bring it to the right side bottom to the table.

Pardeep Jain Over a year ago

OH, so you mean you want it to adjust it right side of table not on bottom right, I am right?

Sumchans Over a year ago

Yes that is the way I am aiming for

Himanshu Bansal · Accepted Answer · 2018-05-25 06:02:16Z

0

    <div class="container col-lg-9" style="margin-top:20px;float:right">
        <mat-tab-group #tab mat-stretch-tabs (selectedTabChange)="onTabClick($event)">
            <mat-tab label="SALES">
                <orders></orders>
            </mat-tab>
            <mat-tab label="UPGRADES">
                <upgrades></upgrades>
            </mat-tab>
        </mat-tab-group>
    </div>
    <!-- Change to this -->
    <div class="container col-lg-3">
        <div>
            <salesForMonth></salesForMonth>
        </div>
    </div>

put those 2 blocks into container and partition them as col-lg-9 and col-lg-3

edited May 25, 2018 at 6:02

answered May 25, 2018 at 5:14

Himanshu Bansal

2,1131 gold badge26 silver badges49 bronze badges

2 Comments

Sumchans Over a year ago

I got the 3rd pic uploaded with the above setting. It changed the whole setup

Himanshu Bansal Over a year ago

@Sumchans you sure? coz we made changes to last 2 blocks only.. but your image show changes on 'SHOW' and 'UPGRADE' tab too.. can you show the changes you made?

Collectives™ on Stack Overflow

Angular HTML element alignment issue

3 Answers 3

1 Comment

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related