Angular md-tab needs more space to display tabs

Question

I have a limited width of 300px. There I need to display two tabs (A & B) and space is enough to show A & B as tab.

When used Angular md-tab-group, it automatically shows arrow icons with tab and to select another tab, I need to click arrow button multiple times.

Since tab names are very small, it should show the tabs.

<md-tab-group class="tab-group">
  <md-tab label="A">
    TAB A
  </md-tab>
  <md-tab label="B">
    TAB B
  </md-tab>
</md-tab-group>

Answer 1

Assuming its for material2, I found that by default material2 tabs are set to min-width: 160px. Since your screen size is only 300px, you will need to change the min-width to 100px or some other measurement that suits your need.

I tested it following demo and was able to fit both tabs within 300px without any scrolling arrows. You can use it to find the correct size you need.

html:

<div style="width: 300px; height: 500px; border: solid 1px black">
  <md-tab-group>
    <md-tab label="TAB A" style="min-width: 100px">Content 1</md-tab>
    <md-tab label="TAB B" style="min-width: 100px">Content 2</md-tab>
  </md-tab-group>
</div>