Tushar Rai Tushar Rai - 8 months ago 73
Dart Question

How to remove margin in material-tab of AngularDart material comonents

I want to remove the margins from material-tab-components of AngularDart Material Components. How can I do that?
enter image description here

tab_component.html

<material-tab-panel centerStrip class="tab-panel visible-desktop" [activeTabIndex]="1">
<material-tab label="Home">
Eager Content of Tab 1
</material-tab>
<material-tab label="Tab 1">
<div class="tab-background">

</div>
</material-tab>
<material-tab label="Tab 2">
Eager Content of Tab 3
</material-tab>
<material-tab label="Tab 3">
Eager Content of Tab 3
</material-tab>
</material-tab-panel>


tab_component.scss

@import 'package:angular_components/tree/master/lib/css/material/material';
@import 'package:angular_components/tree/master/lib/material_tab/mixins';

@include tab-panel-accent-color('.tab-panel', $mat-red);
@include tab-panel-tab-strip-width('material-tab-panel[centerStrip]', 400px);


tab_component.css

material-tab-panel {
width: 400px;
}

material-tab {
width: 100vw;
}

.tab-background {
height: 100vh;
width: 100vw;
background-color: aqua;
}

Answer Source

The padding is set with the material-tab class. You can change it by overwriting it in your tab_component.css like so:

material-tab.material-tab {
  padding: 0px;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download