SweetAlert - Thay đổi chiều rộng phương thức?

Question

Tôi thích thư viện này. Tôi muốn sử dụng nó để hiển thị một bảng phản hồi vừa phải trên một trong các trang web của tôi, nhưng văn bản được một chút rộng. Tôi đã hy vọng có một tùy chọn để thay đổi chiều rộng của cảnh báo tổng thể cho trang mà tôi đang hiển thị bảng trong SweetAlert, nhưng tôi không có bất kỳ may mắn nào. Bảng & HTML trông tuyệt vời, chỉ cần quá nhiều thông tin cho phương thức.

Tôi thậm chí không thể tìm thấy chiều rộng được đặt trong sweetalert.css tổng thể.

Tôi nghĩ có lẽ là chìa khóa configuation customClass có thể giúp đỡ và tôi đã cố gắng:

swal({ 
     title: priorityLevel +' Issues for '+appName, 
     html: appHTML, 
     type: "info", 
     customClass: 'swal-wide', 
     showCancelButton: true, 
     showConfirmButton:false 
    }); 

Các css chỉ là một đơn giản:

.swal-wide{ 
    width:850px; 
} 

này đã không làm bất cứ điều gì. Bất cứ ai cũng có một ý tưởng về làm thế nào để làm điều này hoặc có lẽ đã chơi xung quanh với các yếu tố chiều rộng?

Cảm ơn bạn!

Answer 1

cố gắng đưa !important như thế này trong css:

.swal-wide{ 
    width:850px !important; 
} 

Xem nó làm việc trong đoạn mã.

function TestSweetAlert(){ 
 
    swal({ 
 
     title: 1 +' Issues for test', 
 
     text: "A custom <span style='color:red;'>html</span> message.", 
 
     html: true, 
 
     type: "info", 
 
     customClass: 'swal-wide', 
 
     showCancelButton: true, 
 
     showConfirmButton:false 
 
    }); 
 
}; 
 

 
$('#testeSWAL').on("click",TestSweetAlert);

.swal-wide{ 
 
    width:850px !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet"/> 
 

 

 
<button id="testeSWAL"> Test SWAL </button>

Note: có thể bạn sẽ có vấn đề với vị trí này.

Answer 2

Tên lớp cho chế độ SweetAlert là cảnh báo ngọt. Vì vậy, nếu bạn muốn thay đổi chiều rộng của nó, các mã CSS đúng là:

.sweet-alert { 
     width: 850px; 
} 

này đang hợp tác với SweetAlert 1.1.3

Answer 3

Thay vì ghi đè mặc định .sweet-alert lớp css bạn có thể định nghĩa của riêng bạn

.sweet-alert.sweetalert-lg { width: 600px; } 

Thần chỉ cần sử dụng tùy chọn sweetalert để thiết lập lớp học của bạn chỉ cho những cảnh báo bạn muốn trở thành rộng:

swal({ 
    title: "test", 
    text: "Am I wide?", 
    customClass: 'sweetalert-lg' 
}); 

PS (cập nhật): Bạn có thể cần phải thay đổi sweetalert lớp một chút để tập trung nó đúng cách:

.sweet-alert { margin: auto; transform: translateX(-50%); } 

Here is jsbin để thử nó ra sử dụng

Answer 4

Better SweetAlert2 mà là một người kế nhiệm của SweetAlert. Chỉ cần thêm thuộc tính "chiều rộng", như:

swal({ 
    title: priorityLevel +' Issues for '+appName, 
    html: appHTML, 
    type: "info", 
    customClass: 'swal-wide', 
    showCancelButton: true, 
    showConfirmButton:false, 
    width: '850px' 
}); 

Answer 5

Chỉ cần sử dụng width, tức là:

swal({ 
    title: "Some Title", 
    html: "<b>Some Html</b>", 
    width: '800px' 
}) 

---

Sweet Alert2 Docs