SweetAlert - Изменение Модальной Ширины?

Мне нравится эта библиотека. Я хотел бы использовать его для отображения умеренной таблицы ответов на одной из моих веб-страниц, но текст немного шире. Я надеялся, что есть возможность изменить ширину общего предупреждения для страницы, на которой я показываю таблицу в SweetAlert, но мне не повезло. Таблица и HTML отлично смотрятся, слишком много информации для модальных.

Я даже не могу найти, где ширина установлена в общем файле sweetalert.css.

Я подумал, может быть, ключ настройки customClass может помочь, и я попробовал:

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

css был просто:

.swal-wide{
    width:850px;
}

Это ничего не делало. У кого-нибудь есть идея, как это сделать или, возможно, играли с элементом ширины?

Спасибо!

Ответ 1

попробуйте поставить !important как это в css:

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

Посмотрите, как работает этот фрагмент.

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>

Ответ 2

`width: '800px'`

то есть:

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

Sweet Alert2 Документы

Ответ 3

Вместо того, чтобы перезаписывать класс .sweet-alert css по умолчанию, вы можете определить свой собственный

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

Просто используйте параметры sweetalert, чтобы установить свой класс только для тех предупреждений, которые вы хотите быть широкими:

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

PS (обновление): вам может потребоваться немного изменить класс sweetalert, чтобы сосредоточить его должным образом:

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

Вот jsbin, чтобы попробовать его

Ответ 4

Лучше использовать SweetAlert2, который является преемником SweetAlert. Просто добавьте свойство width, например:

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

Ответ 5

Простое решение - добавить ниже CSS. ссылка: Сладкое предупреждение 2 модальных шоу слишком мало

.swal2-popup { font-size: 1.6rem !important; }

Ответ 6

Имя класса для SweetAlert modal является сладкосердечным. Итак, если вы хотите изменить его ширину, правильный код CSS:

.sweet-alert { 
       width:  850px;   
}

Это работает с SweetAlert 1.1.3

Ответ 7

Ни один из ответов здесь не работал для меня. Все, что мне нужно было сделать, это добавить значение ширины в виде целого числа (без строк) и удалить суффикс "px".

swal({
       width: 400,
       html: data,
       showCancelButton: true,
       showConfirmButton:false,
       cancelButtonText: "Close",
});