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




    <html>

    <head>

        <0 12

    3

    4_______7_______527 82

    <0

    4_______8_______22<4_______10_______

        <<8 <92

    html1

    html282

    html5

    html2<22<4>

        >2_______8_______8>

    >2_______12_______>

    >8

    <<0>

        <<4 <52_______8_______7>

    <9<head1 <52head4>

    html2head7

    <9>2head1>

    <9<>4>

    html2>7

    <9>2>4>

    >8

    <9<    5     62    8 <52<1

    <2<32<5

    <2<72<9_______10_______

    <202

    <9>2    5>

    >8

    <9<___<4 <5_______7_______213 14216>

    html2<<4 <5223>

    <2<___<4 <5230>

    32_______8__________<4 <5237>

    39_______8__________41 <5244 1424748

    Làm cách nào để làm cho phương thức có thể cuộn được trong Bootstrap?

    Bootstrap 4. 3 đã thêm tính năng cuộn tích hợp mới vào các phương thức. Điều này chỉ làm cho nội dung phương thức cuộn nếu kích thước của nội dung sẽ làm cho trang cuộn. Để sử dụng nó, chỉ cần thêm lớp modal-dialog-scrollable vào cùng một div có lớp hộp thoại modal .

    Các phương thức có thể cuộn được không?

    Mục tiêu là giữ ngữ cảnh, do đó, một phương thức không nên chiếm toàn bộ chế độ xem màn hình. Nội dung phải phù hợp với phương thức. Nếu cần thanh cuộn, bạn có thể cân nhắc tạo một trang mới để thay thế.

    Làm cách nào để làm cho chế độ giao diện người dùng vật liệu có thể cuộn được?

    Bạn cần sử dụng 'overflow = scroll' cho kiểu phương thức. Dưới đây là mã ví dụ để lấy phương thức material-ui có thể cuộn. .
    tiêu đề
    Nội dung
    Chân trang (tùy chọn)

    Làm cách nào để tăng kích thước của hộp thoại phương thức?

    Câu trả lời. Đặt chiều rộng cho. phần tử hộp thoại phương thức . phương thức-sm ,. phương thức-lg và. modal-xl để thay đổi kích thước hộp thoại phương thức nhỏ, lớn và cực lớn tương ứng