Question 46096 in CSS Question posted in
Some basic documentation can be found here.

How to fix button element in angular using CSS

How to fix button element in angular using CSS
this error come from when I’m using mobile view

This is HTML Code

 <div class="button-containers">
            <button
              mat-stroked-button
              color="primary"
              [routerLink]="'/contracts/create/' + agency?.id">
              <mat-icon>add</mat-icon> New Contract
            </button>
          </div>

This is CSS Code

.info-icon {
  cursor: pointer;
  vertical-align: middle;
  height: 16px;
  width: 16px;
  vertical-align: text-bottom;
  margin-right: 0.25em;
}

.fee{
  min-width: 17em;
}

.button-container-reduced {
  padding: 0 1.5em 0 0;
}

.tab-reduced {
  padding: 0;
}

.btn-width-130{
  width: 130px;
}
.button-containers {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  flex: 0 1 auto;
  align-items: center;
  flex-wrap: wrap;
}

how can I fix this error using CSS

[1]: https://i.stack.imgur.com/fq1bv.png

Tags:

2

Answers


  1. 0

    Try adding a class that use a fixed width for both buttons (contract & employees):

    CSS

    .btn-width-130{
   width: 130px;
}

    HTML

     <div class="button-containers">
        <button
          class="btn-width-130"
          mat-stroked-button
          color="primary"
          [routerLink]="'/contracts/create/' + agency?.id">
          <mat-icon>add</mat-icon> New Contract
        </button>
      </div>
    Login or Signup to reply.
  2. 0

    You can align the buttons with justify-content: flex-start left:

    .button-containers {
  ...
  justify-content: flex-start;
  ...
}

    or give the buttons a minimum width, for example:

    .button-containers button {
  min-width: 200px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search