如何禁用水平条
How to disable horizontal bar
我正在使用 Sweetalert2 和 Bootstrap 5.1.3。我正在尝试像下面这样装饰 Sweetalert:
var htmlString = `
<div class="row"><div class="text-end col-6">ID:</div> <div class="text-start col-6">${data.id}</div></div>
<div class="row"><div class="text-end col-6">Name:</div> <div class="text-start col-6">${data.name}</div></div>
<div class="row"><div class="text-end col-6">Email:</div> <div class="text-start col-6">${data.email}</div></div>
<div class="row"><div class="text-end col-6">IsActive?</div> <div class="text-start col-6">${data.active}</div></div>
`;
还有我的Swal.fire
块:
Swal.fire({
titleText: 'You sure to delete this user? ',
showDenyButton: true,
//showCancelButton: true,
confirmButtonText: 'Yes',
confirmButtonColor: 'green',
denyButtonText: 'No',
denyButtonColor: 'gray',
customClass: {
actions: 'my-actions',
confirmButton: 'order-1',
denyButton: 'order-2 right-gap',
},
html: htmlString,
focusDeny: true,
}).then((result) => {
if (result.isConfirmed) {
fetch(`${baseURL}/appUsers/${id}`, { method: "delete" });
var p = obj.parentNode.parentNode;
p.parentNode.removeChild(p);
Swal.fire('Deleted Successfully !!', '', 'success');
} else if (result.isDenied) {
Swal.fire('Changes are not saved', '', 'info')
}
})
现在警报有一个看起来很奇怪的水平条,如下所示:
问题:我该如何摆脱它?
如果您能找到一种方法来从配置中设置 swal 容器元素的样式,则可以添加样式 overflow-x: hidden
值。否则,你可以包含一个 CSS 样式,在我检查容器后 class 你可以使用的名称是 .swal2-html-container
.swal2-html-container {
overflow-x: hidden;
}
https://codepen.io/david-yappeter/pen/NWwwyQg?editors=1111
// 编辑:
其他解决方案,在row
之后添加m-0
class
<div class="row m-0"><div class="text-end col-6">ID:</div> <div class="text-start col-6">ID</div></div>
<div class="row m-0"><div class="text-end col-6">Name:</div> <div class="text-start col-6">NAME</div></div>
<div class="row m-0"><div class="text-end col-6">Email:</div> <div class="text-start col-6">EMAIL</div></div>
<div class="row m-0"><div class="text-end col-6">IsActive?</div> <div class="text-start col-6">ACTIVE</div></div>
或者用classcontainer
包裹起来
<div class="container">
<div class="row"><div class="text-end col-6">ID:</div> <div class="text-start col-6">ID</div></div>
<div class="row"><div class="text-end col-6">Name:</div> <div class="text-start col-6">NAME</div></div>
<div class="row"><div class="text-end col-6">Email:</div> <div class="text-start col-6">EMAIL</div></div>
<div class="row"><div class="text-end col-6">IsActive?</div> <div class="text-start col-6">ACTIVE</div>
</div>
我正在使用 Sweetalert2 和 Bootstrap 5.1.3。我正在尝试像下面这样装饰 Sweetalert:
var htmlString = `
<div class="row"><div class="text-end col-6">ID:</div> <div class="text-start col-6">${data.id}</div></div>
<div class="row"><div class="text-end col-6">Name:</div> <div class="text-start col-6">${data.name}</div></div>
<div class="row"><div class="text-end col-6">Email:</div> <div class="text-start col-6">${data.email}</div></div>
<div class="row"><div class="text-end col-6">IsActive?</div> <div class="text-start col-6">${data.active}</div></div>
`;
还有我的Swal.fire
块:
Swal.fire({
titleText: 'You sure to delete this user? ',
showDenyButton: true,
//showCancelButton: true,
confirmButtonText: 'Yes',
confirmButtonColor: 'green',
denyButtonText: 'No',
denyButtonColor: 'gray',
customClass: {
actions: 'my-actions',
confirmButton: 'order-1',
denyButton: 'order-2 right-gap',
},
html: htmlString,
focusDeny: true,
}).then((result) => {
if (result.isConfirmed) {
fetch(`${baseURL}/appUsers/${id}`, { method: "delete" });
var p = obj.parentNode.parentNode;
p.parentNode.removeChild(p);
Swal.fire('Deleted Successfully !!', '', 'success');
} else if (result.isDenied) {
Swal.fire('Changes are not saved', '', 'info')
}
})
现在警报有一个看起来很奇怪的水平条,如下所示:
问题:我该如何摆脱它?
如果您能找到一种方法来从配置中设置 swal 容器元素的样式,则可以添加样式 overflow-x: hidden
值。否则,你可以包含一个 CSS 样式,在我检查容器后 class 你可以使用的名称是 .swal2-html-container
.swal2-html-container {
overflow-x: hidden;
}
https://codepen.io/david-yappeter/pen/NWwwyQg?editors=1111
// 编辑:
其他解决方案,在row
m-0
class
<div class="row m-0"><div class="text-end col-6">ID:</div> <div class="text-start col-6">ID</div></div>
<div class="row m-0"><div class="text-end col-6">Name:</div> <div class="text-start col-6">NAME</div></div>
<div class="row m-0"><div class="text-end col-6">Email:</div> <div class="text-start col-6">EMAIL</div></div>
<div class="row m-0"><div class="text-end col-6">IsActive?</div> <div class="text-start col-6">ACTIVE</div></div>
或者用classcontainer
<div class="container">
<div class="row"><div class="text-end col-6">ID:</div> <div class="text-start col-6">ID</div></div>
<div class="row"><div class="text-end col-6">Name:</div> <div class="text-start col-6">NAME</div></div>
<div class="row"><div class="text-end col-6">Email:</div> <div class="text-start col-6">EMAIL</div></div>
<div class="row"><div class="text-end col-6">IsActive?</div> <div class="text-start col-6">ACTIVE</div>
</div>