Helpex - Trao đổi & giúp đỡ
Đăng nhập
9

Tôi đang sử dụng Angular 2, Angular Material và tôi sẵn sàng hiển thị nhiều dữ liệu hơn trong menu md và do đó, tôi cần đặt chiều rộng tối đa của menu md thành giá trị cao hơn. Giá trị mặc định của nó là 280px.

    <img src="/assets/images/ic-notifications.png" [mdMenuTriggerFor]="appMenu"/> 
    <md-menu #appMenu="mdMenu"  [overlapTrigger]="false" yPosition="below" xPosition="before" class="notifications-dropdown">
        <button md-menu-item >
           <div class="row notification-row"> 
             <div>
               <span class="image-container"> Option 1 </span>
             </div>
           </div>
        </button>
    </md-menu>

Trong tệp CSS, tôi thực hiện điều này:

.mat-menu-panel.notifications-dropdown {
    max-width:none;
    width: 100vw; 
    margin-left: -8px;
    margin-top: 24px;
    overflow: visible;
}

.notification-row{
    width: 424px;
}

Trong bảng điều khiển, tôi có thể xác định lớp nơi giá trị mặc định được đặt: max-width:280px;và khi tôi chỉnh sửa nó trong bảng điều khiển của mình, nó hoạt động hoàn hảo, nhưng mặc dù tôi cố gắng ghi đè nó trong mã CSS của mình, tôi không thể làm điều đó. Tôi cũng đã thử cái này:

.mat-menu-panel{
    max-width: 600px;
}

Và điều này:

.cdk-overlay-container .mat-menu-panel{
     max-width:600px;
    width: 100vw;
    margin-left: -8px;
    margin-top: 24px;
}

Làm cách nào để ghi đè giá trị mặc định này?

9 hữu ích 5 bình luận 10k xem chia sẻ
3 trả lời 3
Viết câu trả lời
15

Đặt Chế độ xem đóng gói thành Không có trên thành phần của bạn:

@Component({
    templateUrl: './my.component.html' ,
    styleUrls: ['./my.component.css'], 
    encapsulation: ViewEncapsulation.None,
})

Sau đó, trong css thành phần của bạn, bạn có thể làm chính xác những gì bạn đã thử:

.mat-menu-panel.notifications-dropdown {
    max-width:none;
    width: 100vw; 
    margin-left: -8px;
    margin-top: 24px;
    overflow: visible;
}

.notification-row{
    width: 424px;
}

View Encapsulation = Không có nghĩa là Angular không đóng gói chế độ xem. Angular thêm CSS vào các kiểu chung. Các quy tắc xác định phạm vi, cách ly và biện pháp bảo vệ đã thảo luận trước đó không áp dụng. Điều này về cơ bản giống như dán các kiểu của thành phần vào HTML.

15 hữu ích 4 bình luận chia sẻ
1

Trong một số trường hợp, trình bao bọc .mat-menu-panelcó thể là .cdk-overlay-pane, trong trường hợp đó, css phải là một cái gì đó như thế này.

.cdk-overlay-pane.mat-menu-panel {
    max-width: your_custom_value
}

Do các quy tắc về tính cụ thể của css, cần có 2 lớp tính cụ thể để ghi đè các giá trị mặc định.

1 hữu ích 0 bình luận chia sẻ
0

Cùng một vấn đề điên rồ đối với tôi ... cách tôi giải quyết:

::ng-deep .cdk-overlay-pane .mat-menu-panel {
  max-width: 436px;
}

Tại tệp SASS thành phần

Xem: Kiểu thành phần góc - Xem đóng gói

và đưa ra nhận xét của @gaiki https://github.com/angular/material2/issues/4462

0 hữu ích 0 bình luận chia sẻ
loading

Đăng nhập để trả lời câu hỏi

Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ css angular2-template angular-material2 , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm

loading
Hoạt động
Liên quan
Mới tạo