CODEWITHSUNDEEP
cssangulartypescript
Cpt Kitkat
Cpt Kitkat

Reputation: 1402

How to remove vertical scroll bar from angular Pop Up

I have an Edit Project Button. On click of Edit Button a pop up appears and I can edit the fields.

Currently everything is working fine however the layout looks ugly because I have to scroll down to click on Save/Cancel Button. I want to adjust my pop up in such a way that I don't have to scroll down.

My edit page html is :

<div class="main-content">
<div class="container-fluid">
  <div class="row">
    <div class="card">
      <div class="card-header">
        <h5 class="title">Update Project</h5>
      </div>
      <div class="container">
        <form class="mat-dialog-content" (ngSubmit)="submit" #formControl="ngForm">

          <div class="form">
            <mat-form-field color="accent">
              <input matInput #input class="form-control" placeholder="Project Name" [(ngModel)]="data.projectName"
                name="projectName" required>
              <mat-error *ngIf="formControl.invalid">{{getErrorMessage()}}</mat-error>
            </mat-form-field>
          </div>

          <!--Textarea for demo purposes-->

          <div class="form">
            <mat-form-field color="accent">
              <textarea matInput #input class="form-control" placeholder="Description" [(ngModel)]="data.projectDescription"
                name="projectDescription" required></textarea>
              <mat-error *ngIf="formControl.invalid">{{getErrorMessage()}}</mat-error>
            </mat-form-field>
          </div>


          <div mat-dialog-actions>
            <button mat-button [type]="submit" [disabled]="!formControl.valid" [mat-dialog-close]="data" (click)="stopEdit()">Save</button>
            <button mat-button (click)="onNoClick()" tabindex="-1">Cancel</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

My CSS is : 

    .container {
    border-radius: 4px;
    box-sizing: border-box;
    overflow: auto;
    outline: 0;
    width: 500px;
    height: 250px;
    min-height: inherit;
    max-height: inherit;

  }
  .form {
    display: flex;
    padding-top: 6px;
  }
  .mat-form-field {
    font-size: 16px;
    flex-grow: 1;
  }

Upvotes: 1

Views: 16940

Answers (4)

Akash Starvin D&#39;Souza
Akash Starvin D&#39;Souza

Reputation: 399

  1. Give a fixed height for vertical scroll. Give a fixed width for horizontal scroll.

Example

height: 200px;

or

height: 30%;

  1. Then add these to below lines of code to root div which you want to scroll

    overflow-x: hidden;
overflow-y: hidden !important;

Upvotes: 0

Sneha Pawar
Sneha Pawar

Reputation: 1127

You have to set the height to the .modal-body and give it overflow-y: hidden. Also reset .modal-dialog overflow value to initial

.modal{
display: block !important; /* I added this to see the modal, you don't need this */
}

/* Important part */
.modal-dialog{
  overflow-y: hidden !important
}
.modal-body{
  height: 250px;
  overflow-y: hidden;
}

Working example - http://www.bootply.com/T0yF2ZNTUd

Upvotes: 0

Cpt Kitkat
Cpt Kitkat

Reputation: 1402

I added viewport min height to the css and it worked.

.container {
border-radius: 4px;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: hidden !important;
outline: 0;
width: 500px;
height: 250px;
min-height: inherit;
max-height: inherit;

.mat-dialog-content {
min-height: 35vh;
}

Upvotes: 1

Nate D
Nate D

Reputation: 29

Use overflow property and set it to hidden to the container that scrolls.

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

Upvotes: 0

Related Questions