Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I left align the text in an Angular Material stretched md-button?

Without tinkering too much with my own CSS, Is there an attribute or configuration I can use to left align the text in a md-button that is stretched a bit to fit a menu for example?

This is my current view

<md-sidenav md-is-locked-open="$mdMedia('gt-md')" layout="column">
  <md-toolbar>
    <h1 class="md-toolbar-tools">
      <a ng-href="/" layout="row" href="/">
        <div class="docs-logotype">Material Design</div>
      </a>
    </h1>
  </md-toolbar>
  <md-content flex role="navigation" layout="column">
    <md-button>Button1</md-button>
    <md-button>Button2</md-button>
  </md-content>
</md-sidenav>

<md-content flex layout="column">
  <md-toolbar>
    <div class="md-toolbar-tools">
      <button class="md-icon-button md-button" aria-label="Settings">
        <md-icon md-svg-icon="images/icons/menu.svg" aria-hidden="true"></md-icon>
        <div class="md-ripple-container"></div>
      </button>
      <md-button>Button1</md-button> <!-- how to left align this text inside a stretched button -->
      <md-button>Button2</md-button>
      <span flex=""></span>
      <md-button>Right side button</md-button>
      <button class="md-icon-button md-button" aria-label="More">
        <md-icon md-svg-icon="images/icons/more_vert.svg" aria-hidden="true"></md-icon>
        <div class="md-ripple-container"></div>
      </button>
    </div>
  </md-toolbar>
  <md-content flex>
    Some content !!
  </md-content>
</md-content>

enter image description here

like image 418
Christiaan Westerbeek Avatar asked May 26 '15 07:05

Christiaan Westerbeek


People also ask

Which alignment is used to move text to the left?

Align the text left or right On the Home tab, in the Paragraph group, click Align Left or Align Right .

Which property allows to adjust the alignment of the text?

The text-align property is used to set the horizontal alignment of a text. A text can be left or right aligned, centered, or justified.


2 Answers

Use empty <span> tag with a flex attribute, as shown below. You can even specify a value to the flex attribute to get a more specific location.

<div layout="row" layout-align="start center" flex>
    <md-button>button 1 </md-button>
    <span flex></span>
</div>

If you just want to align text inside a button, try setting the style attribute like this:

<md-button style="text-align:left">button </md-button>
like image 167
nitin Avatar answered Oct 09 '22 08:10

nitin


You can do this if using within md-toolbar(Angular 4) Angular 6+:

Html

<mat-toolbar id="toolbar" color="primary" >
  <mat-button>button 1 </mat-button>
  <span class="spacing"></span>
  <mat-button>button 2 </mat-button>
</mat-toolbar>

OR

<mat-toolbar id="toolbar" color="primary">
  <mat-button>button 1 </mat-button>
  <span style="flex: 1 1 auto;"></span>
  <mat-button>button 2 </mat-button>
</mat-toolbar>

Your CSS if no styling in HTML:

.spacing {
    flex: 1 1 auto;
}

Hope this helps someone.

like image 43
Amarnath Reddy Dornala Avatar answered Oct 09 '22 10:10

Amarnath Reddy Dornala