I am trying to customize a sweetAlert2 by defining a className, but it seems that the styling is not applying to the sweet alert. I have tried calling the class name "styleTitle" and various other names, but nothing seems to work. Could the issue be with the main CSS file for this package?
swal.fire({
title: Welcome,
className: styleTitle
});
The CSS
.styleTitle{
font-size: 25px;
}
I stumbled upon this resource in the documentation that could be beneficial for you.
It seems like you need to specify customClass instead of className.
Check out this example.
.custom-confirm-button {
background-color: red !important;
color: white !important;
border: none !important;
}
.custom-title {
font-size: 15px !important;
}
.custom-icon {
font-size: 10px !important;
}
.custom-confirm-button .swal2-icon svg {
width: 12px !important;
height: 12px !important;
}
.swal2-actions .swal2-confirm {
background-color: #f1c40f !important;
color: white !important;
border: none !important;
box-shadow: none !important;
}
.swal2-actions .swal2-cancel {
border-color: #f1c40f !important;
box-shadow: none !important;
border: none !important;
}
.swal2-confirm:focus, .swal2-cancel:focus {
box-shadow: none !important;
border: none !important;
}
.swal2-actions button:hover {
border: none !important;
}
Here is a customized version of sweetalert2:
Swal.fire({
icon: 'warning',
title: 'Are you sure?',
text: 'This action cannot be undone.',
showCancelButton: true,
confirmButtonText: 'Yes, delete it!',
cancelButtonText: 'No, cancel!',
customClass: {
confirmButton: 'custom-confirm-button',
title: 'custom-title',
icon: 'custom-icon'
},
html: `
<div style="max-height: 300px; overflow-y: scroll;">
${allItems.map((item) => `
<div key="${item.asset_number}">
<div>
<p>Name: ${item.name}</p>
<p>Address: ${item.address}</p>
</div>
<hr style="border-color: gray; border-width: 1px; margin: 10px 0;" />
</div>
`).join('')}
</div>
`,
}).then((result) => {
if (result.isConfirmed) {
Swal.fire('Deleted!', 'Your item has been deleted.', 'success');
} else if (result.isDismissed) {
Swal.fire('Cancelled', 'Your item is safe :)', 'error');
}
});
I hope this version suits your needs.
I have multiple dropdown menus, and when I select an option from any of them, I want to store the selected value in the component state. The onChange function that I call looks like this: function handleSelect(event) { console.log(event.target.value); ...
We're in the midst of a debate and I'm hoping you can help us reach an agreement. Imagine I have a basic factory set up like this: angular.module('myModule', []) .factory('Fact', function() { var Fact = function() { ...
I am currently using multer for uploading images. How can I retrieve a specific file from req.files? Trying to access it by index or fieldname has been unsuccessful. Even when I log it, I see that it's a normal array, so I suspect the issue may be rel ...
I'm having trouble creating a drop-down navigation menu using HTML and CSS. When I add the drop-down list, my menu extends onto two lines instead of one, and the drop-down menu doesn't appear when hovering. Here is a link to the jsfiddle for refe ...
After successfully completing the app building process, the final step remaining is to deploy it to the Vercel host using my Gitlab repository. The technology stack used includes Nuxt.js (SSR type) with Express.js server and the Nuxt.js Now Builder for de ...
After setting up my application with the VitePWA module and following the documentation, adding icons, and including the <NuxtPwaManifest> tag in app.vue, I noticed that when running npm run dev, my PWA doesn't run in Chrome Browser. Did I overl ...
Encountering difficulties receiving notifications for changes in a list when utilizing an input field within ng-repeat directly. However, I am able to modify values and receive notifications from $watchCollection. To illustrate: <!DOCTYPE html> < ...
Below is the data structure for storing affairs according to years, months, and days: let affairs = { 2018: { 11: { 29: ['task111', 'task112', 'task113'], 30: ['task121', 'ta ...
Imagine an Angular application structured like this (generated from my phone, excuse any odd syntax): angular.module('app1').controller(ctrl1, function($http){ $http.get(...); }); angular.module('app2', ['app1']).run(fun ...
While attempting a cross domain GET request using jQuery AJAX, I am encountering a situation where the error function returns success as the status. The data I am expecting to be returned from the get service is: document.write("<div class=\"displ ...
I'm attempting to implement nested tables where each row in the main table expands to display a sub-table with specific data when clicked. I've been following the official documentation, but so far without success. Below is a code snippet that I& ...
I am trying to extract all instances of names from this page: . For guidance, I have been using this tutorial as a reference: . However, when I run the code provided, it doesn't return anything. What could be going wrong? var request = new XMLHttpRe ...
My current code is : $.getJSON("https://www.domain.com/someapi/callback=?", function(data){ $.each(data, function(i,item){ alert(item.x); }); }); I am currently facing an issue with my JSON response because there is ...
Currently, I am in the process of constructing a website for one of my clients. The search page on the site is designed to update search results as you type in the search bar - with each keystroke triggering a new search request. However, there's an i ...
Has anyone else encountered a situation where using JSON.parse() to parse the PHP array return only works when applying 1.3.2/jquery.min.js and not 1.10.2/jquery.min.js? If so, what solution did you find? PHP array return $returnArray['vercode' ...
I have created a custom image viewer box that overlays a thumbnail gallery page. The image viewer should appear when a user clicks on a thumbnail. However, currently, the viewer only pops up briefly and then disappears again. I am looking for a way to mak ...
Within the source table are several records stored. Upon clicking each record in the source table, the AddSelectedItem(sValue) function is triggered, adding those specific records to the destination table. The desired outcome is for the array to dynamica ...
import { Component, Input, Output, OnInit, OnChanges } from '@angular/core'; import { ViewComponent } from '../view/view.component'; import { HitoService } from '../../services/hito.service'; @Component({ selector: 'ap ...
I have a container with two rows inside. One of those rows contains several columns. My goal is to have four columns per line on mobile devices, which I achieved using "row-cols-4". However, on larger screens, I want all the columns to be on the same line, ...
I'm currently working on a jQuery homework assignment and I've been attempting to enhance the mouseover feature, but unfortunately, it's not functioning as expected. $("button").mouseover(function() { $(this).css({ left: (Math.rando ...