Question 45099 in Html Question posted in
Some basic documentation can be found here.

How to make tabs and toogle button placing in same row using css? – Html

How can I place tabs and toggle buttons in the same row?

enter image description here

Please see the attached image also added my code below. could someone help me with this

<mat-tab-group>
  <mat-tab label="Label1">
    <div style="text-align: right; margin-top: 10px">
      <mat-button-toggle-group #toggleGroup1="matButtonToggleGroup">
        <mat-button-toggle value="Angular Material UI">
          Angular Material UI
        </mat-button-toggle>
        <mat-button-toggle value="React Material UI">
          React Material UI
        </mat-button-toggle>
      </mat-button-toggle-group>
      <br />
      You have selected : {{ toggleGroup1.value }}
    </div>
    test 1
  </mat-tab>
  <mat-tab label="Label2"> test 2 </mat-tab>
  <mat-tab label="Label3"> test3 </mat-tab>
</mat-tab-group>

demo

i’m bad in CSS could someone advise how to do this.

Tags:

2

Answers


  1. 0

    (Quick fix, take a look at BUT section, before using it)
    Adding those two css rules should help:

    .mat-tab-group {
  flex-direction: row !important;
}
.ng-trigger-translateTab div {
  margin-top: 0 !important;
}

    BUT: Using !important is a bad practice, and overriding the default behaviour of the components is also a bad practice. (however, above snippet will not work without !important because we are trying to rewrite the generic behaviour).
    For a good practice I would advice to look inside the components, and try to think how you change their css rules or maybe better arrange or nest them more properly, so they look in a way you want them to look.

    Login or Signup to reply.
  2. 0

    maybe try to give your div :

    <div style="d-flex-inline">

    That means display flex inline.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search