Ademo Ademo - 1 year ago 110
CSS Question

Adjusting Widths of Two Buttons Within Containing Div

In my Angular app I have a UI section that is comprised of two buttons - one with some text (floated to the left) and an arrow (floated to the right). If the user clicks on the left side (where the text is), that will fire one function. If they click on the right side (where the arrow is), that fires a different function - which opens up a sub-menu with other options.

The way I have this programmed and styled, everything is working as expected. However, at present, the text section and arrow section buttons are equal widths within the containing element. I'd like to make the text section button take up to about 70% of the containing elements, with the arrow button taking up about 30%. I've tried doing this with width percentages added to the relevant css of each button, but this doesn't appear to affect the result. How do I need to adjust the styling to accomplish this?

Here is my view code:

<div class="move-btn-container">
<button md-button class="left-btn" *ngIf="!isPracticing()"
(click)="moveRecord(stage = getNextStage())">Advance Stage
</button>
<button md-button class="left-btn" *ngIf="isPracticing()"
(click)="onDischargingClicked()">Initiate Discharge
</button>
<button [mdMenuTriggerFor]="menu" md-button class="right-btn">
<md-icon class="arrow-center-align">arrow_drop_down</md-icon>
<md-menu #menu="mdMenu">
// sub-menu options code
</md-menu>
</button>
</div>


And here's the LESS/CSS styling:

.move-btn-container {
background-color: #cfcfcf;
}

.left-btn {
float: left;
background-color: #cfcfcf;
}

.right-btn {
float: right;
background-color: #dbdbdb;
}

.arrow-center-align {
vertical-align: middle;
}

Joe Joe
Answer Source

Using the flex-grow attribrute you can space items out proportionally within a parent display: flex, like this:

.move-btn-container {
  width: 200px;
  margin: auto;
  background-color: red;
  display: flex;
}

.left-btn {
  flex-grow: 7;
   background-color: #cfcfcf;
}

.right-btn {
  flex-grow: 3;
  background-color: green;
}
<div class="move-btn-container">
    <div md-button class="left-btn" *ngIf="isPracticing()"
         (click)="onDischargingClicked()">Initiate Discharge
    </div>
    <div [mdMenuTriggerFor]="menu" md-button class="right-btn">
      V
    </div>
  </div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download