CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Dwayne
Dwayne

Reputation: 179

how to move the text to the left

How do I move the highlighted text to left-hand side? Ah, I am so tired trying to adjust this and seeing undesirable results. Can anyone please help?

screenshot

HTML

<div mat-dialog-actions class="actionButtons">
  <span  style="white-space: nowrap; padding-left: 0px;">  {{count + ' ' + this['groupType'] | pluralize}} Selected</span>
  <a (click)="clearAll()" href="javascript:void(0);" style="padding-left: 10px;">Clear All</a>
  <button type="button" class="btn-outline btn-outline-primary" (click)="onNoClick()">Cancel</button>
  <button type="button" class="btn-width btn-sm btn-secondary" (click)="confirmModal()" [disabled]="isSaveSelectionDisabled()">Save Selection</button>
  </div>

CSS

.actionButtons {
  float: right;
  padding-right: 20px;
  background: white;
  position: sticky;
  top: 0;
  z-index: 100;
}

Upvotes: 1

Views: 1291

Answers (4)

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48600

If you want to float the text to the left and keep the buttons to the right, you need to make the text elements display:block and float them to the left.

You will have the give the status bar a width of 100% so that you can float the items all the way over.

I did not modify any of the existing HTML (except for changing the "Selected" text to a static value).

.actionButtons {
  float: right;
  padding-right: 20px;
  background: white;
  position: sticky;
  top: 0;
  z-index: 100;
  
  /** Added */
  width: calc(100% - 20px);
  text-align: right;
}

/** Added */
.actionButtons > span,
.actionButtons > a {
  display: block;
  float: left;
  margin-top: 1.5px; /* heights: button = 21px, text = 18px */
}
<div mat-dialog-actions class="actionButtons">
  <span style="white-space: nowrap; padding-left: 0px;">0 Selected</span>
  <a (click)="clearAll()" href="javascript:void(0);" style="padding-left: 10px;">Clear All</a>
  <button type="button" class="btn-outline btn-outline-primary" (click)="onNoClick()">Cancel</button>
  <button type="button" class="btn-width btn-sm btn-secondary" (click)="confirmModal()" [disabled]="isSaveSelectionDisabled()">Save Selection</button>
</div>

Upvotes: 1

Manjuboyz
Manjuboyz

Reputation: 7066

I just modified your code a bit, you can look into this:

The reason it was not working for you because you made all elements to move right by marking float:right. What I did was to make only those elements to move left and anything else towards right. hope it helps.

now you can remove your code from the .actionButtons it is no longer needed now.

.actionButtons {
  border-top: 1px solid black;
}

#btnOutline,
#btnWidth {
  float: right;
}

#moveLeft {
  padding-top:2px;
  float: left;
}
<div mat-dialog-actions class="actionButtons">
  <div id="moveLeft">
    <span style="white-space: nowrap;">  Selected</span>
    <a (click)="clearAll()" href="javascript:void(0);" style="padding-left: 10px;">Clear All</a>
  </div>
  <button id="btnOutline" type="button" class="btn-outline btn-outline-primary" (click)="onNoClick()">Cancel</button>
  <button id="btnWidth" type="button" class="btn-width btn-sm btn-secondary" (click)="confirmModal()" [disabled]="isSaveSelectionDisabled()">Save Selection</button>
</div>

Upvotes: 1

user1449249
user1449249

Reputation: 194

Have you tried text aligning?

.actionButtons {
  float: right;
  padding-right: 20px;
  background: white;
  position: sticky;
  top: 0;
  text-align: left; /* You may want this? */
  z-index: 100;
}

Upvotes: 0

DumbCoder7
DumbCoder7

Reputation: 252

Remove the float style assigned to actionButtons and try this:

.actionButtons * {
  float:right;
}

.actionButtons > span {
  float:left;
}

Upvotes: 0

Related Questions