Cuộn phương thức nội dung dài Bootstrap

Bootstrap Scrollable Modal Đôi khi chúng ta cần hiển thị nội dung bổ sung trong Modal, nội dung bổ sung tạo ra sự cố trong chế độ bootstrap twitter mặc định. Để hiển thị nhiều nội dung hơn trong Modal, chúng ta cần làm cho bootstrap có thể cuộn được vì điều này, chúng ta cần thêm thuộc tính css overflow-y scroll trong Modal body. Ở đây trong hướng dẫn này, chúng tôi sẽ giải thích cách bạn có thể làm cho nội dung cơ thể phương thức bootstrap có thể cuộn được. Bạn cũng có thể sử dụng trình chỉnh sửa trực tuyến của chúng tôi để chỉnh sửa và chạy mã trực tuyến

Tôi đã nhận thấy rằng khi tôi có một phương thức có nội dung dài, việc cuộn phương thức có thể khiến trang web chính bị cuộn khi tôi chạm đến đầu hoặc cuối phương thức, nhưng vẫn tiếp tục cuộn. Có vẻ như cơ thể. khai báo CSS mở phương thức ngăn chặn hành vi này đang bị ghi đè bởi mdb. css.

body.modal-open {
  overflow: inherit;
  padding-right: 0 !important; }

body {
  overflow: auto !important; }

. đang ghi đè lên khai báo bootstrap.

.modal-open {
  overflow: hidden;
}

Điều này có vẻ là một lỗi không?

Liz Cross thân mến,

Bạn nên thêm kiểu overflow-y: auto vào phần tử mdb-modal-container với lớp Renderer2 của Angular

Vui lòng kiểm tra mã dưới đây

@Component[{
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
}]
export class AppComponent {
  modalRef: MDBModalRef;

  constructor[
    private modalService: MDBModalService,
    private renderer: Renderer2] {
  }

  openModal[] {
    this.modalRef = this.modalService.show[ModalComponent]
    this.renderer.setStyle[document.querySelector['mdb-modal-container'], 'overflow-y', 'auto'];
  }
}

Trân trọng,

Damian

Bootstrap 5 Modal Cuộn nội dung dài

Cải thiện bài viết

Lưu bài viết

Thích bài viết

• Cập nhật lần cuối. 05 tháng 12 năm 2022

Đọc

Bàn luận

khóa học

Luyện tập

Băng hình

Cải thiện bài viết

Lưu bài viết

Bootstrap 5 Nội dung dài cuộn phương thức được sử dụng khi nội dung cơ thể phương thức trở nên rất lớn thì nó có thể cuộn được. Các phương thức có thể được cuộn độc lập với trang hoặc chúng ta có thể cuộn phần thân của phương thức. Chúng ta sẽ tìm hiểu về chúng bằng các ví dụ

cú pháp

    ...

Bootstrap 5 Modal Cuộn nội dung dài Lớp

• phương thức-hộp thoại-có thể cuộn. Lớp này được sử dụng để tạo nội dung theo chế độ cuộn

ví dụ 1. Trong ví dụ này, chúng ta sẽ tìm hiểu cách chúng ta tạo một phương thức sao cho nó cuộn độc lập với trang

HTML