How to remove vertical scroll bar from angular Pop Up

how to remove horizontal scrollbar in angular
iframe hide vertical scrollbar
how to hide vertical scrollbar in css
disable vertical scroll
how to disable scroll in angular 6
disable scroll css
hide horizontal scrollbar css
how to remove scrollbar in angular material

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;
  }

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

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

Remove vertical scrollbar in bootstrap modal popup, It may help you. Fixing the overflow hidden will remove the scrollbar, To get full content within the page use overflow auto to modal body. CSS: 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.

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;
}

How to remove vertical scroll bar from angular Pop Up - css - html, 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​  In the Settings window, click the “Ease of Access” category. On the left side of the Ease of Access screen, click the “Display” option. On the right, turn off the “Automatically Hide Scroll Bars In Windows” toggle to make sure your scrollbars don’t disappear anymore.

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

How To Hide Scrollbars With CSS, How To Hide Scrollbars. Add overflow: hidden; to hide both the horizontal and vertical scrollbar. Example. body { You open a modal, scroll through it, close it, and wind up somewhere else on the page than you were when you opened the modal. That’s because modals are elements on a page just like any other. It may stay in place (assuming that’s what it’s meant to do) but the rest of page continues to behave as normal.

Vertical scroll bar always showing when modal shown · Issue , GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together. Sign up. It is used to move the window up and down. Selenium Webdriver does not require scroll to perform actions as it manipulates DOM. But in certain web pages, elements only become visible once the user have scrolled to them. In such cases scrolling may be necessary. Scroll bar is of two type : Horizontal and vertical scroll bar as shown in below

Prevent Page Scrolling When a Modal is Open, You open a modal, scroll through it, close it, and wind up somewhere of the viewport and hiding vertical overflow when the modal is open: Click ‘Tools’ button in the top right corner of the screen. In the drop-down menu select ‘Internet Options’. Click on the ‘Privacy’ tab and select ‘Settings’ in the pop-up blockers section. Find the Cloudstream.bar URL and click the ‘Remove’ button to delete the site.

Hide scroll bar, but while still being able to scroll using CSS , To hide the scrollbar use -webkit- because it is supported by major browsers (​Google Chrome, Safari or Preferably Hide scrollbars only when if all content is visible else user may skip the content Check out this Author's contributed articles. The main issue that I have with 3rd party plugins is that they usually contain a lot of features I don't need which adds unnecessary bloat to my application, so a few years ago I took the time to create a custom modal window in Angular 1 to see how difficult it would be and also to remove the mystery I had in my mind about exactly how modals work.

Comments
  • hi, can you plz send jsfiddle link. i am not able to replicate it. thanks