Overflow-y SweetAlert Icon

Struggling with a website modification issue where using Swal.fire(...) causes an overflow problem affecting the icon rendering. How can this be fixed? Here is the custom CSS code in question:

* {
    margin: 0px;
    padding: 0px;
    font-family: 'Roboto Mono', monospace;
    overflow-x: hidden;
    color: white;
    user-select: none;
    font-size: 20px;
}
h1 {
    font-size: 60px;
}

body {
    z-index: -2;
    background-color: black;
}

#canvas1 {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-1;
    background: black;
}

.header {
    text-align: center;
    height: 100vh;
}

.header-title {
    font-size: 70px;
    font-weight: bold;
    margin-top: 40vh;
}

section {
    padding: 20vh;
}

.section-title {
    font-size: 60px;
}
.section-text {
    font-size: 25px;
}

footer {
    height: 30vh;
    background-color: rgb(24, 24, 24);
}

.navbar {
    font-size: 40px;
    position: fixed;
    list-style-type: none;
    overflow: hidden;
}

.navbar > li {
    float: left;
}

.navbar > li a {
    transition: .3s;
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* More CSS code continues... */

Concerned that altering this CSS code might crash the website, but seeking a solution to the icon overflow issue. Any insights would be appreciated. Thanks!

javascripthtmlcsssweetalert

Answer №1

Your icon seems to be overflowing, causing the orange line to display a scrollbar.

To fix this issue, try adding the following code to your CSS: 

.sa-icon.sa-success { overflow:hidden }
. If this doesn't resolve the problem, inspect the success icon element, copy its class, and add overflow:hidden to that class. If you're still having trouble, feel free to copy the popup code and add it to your question - I can provide you with a solution that works.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to verify the presence of a specific word within a classname?

My goal is to verify if the string ("Pre laminated ") matches the css class name I am checking. I only need confirmation of whether the given word is present in the classname: Output "pass" if it exists, output "fail" if it does not. ...

javacssseleniumclassname

Why does tsc produce a compiled file that throws an exception when executed, while ts-node successfully runs the TypeScript file without any issues?

I have written two ts files to test a decorator. Here is the content of index.ts: import { lockMethod } from './dec'; class Person { walk() { console.info(`I am walking`); } @lockMethod run() { console.info(`I am running`); } ...

javascripttypescripttypescript-decorator

How to stop an AJAX request using Chrome developer tools?

Is there a way to cancel an initiated ajax request from Chrome Developer Tools? I want to test if my fallback message displays correctly without changing the code. Setting No throttling to Offline will make all calls fail, but I just need one API to fail f ...

javascriptajaxgoogle-chromegoogle-chrome-devtools

Problem with Jquery show/hide feature only resolved after refreshing the page

I built a checkout page that consists of three fieldsets with unique IDs - 1, 2, and 3. I want the page to initially display only fieldset 1 while hiding fieldsets 2 and 3. Here is the jQuery code I used: $(document).ready(function(){ $("#1").show(); ...

phpjavascriptjquerycss

I encountered a permission error while trying to npm install, despite running the command with root privileges

After running npm install as root, I am still encountering permission errors. This is unfamiliar territory for me. I have attempted using chmod -R 777 *, and chown nobody:nogroup -R * within the project folder, but to no avail. Here's the specific er ...

javascriptnode.jsnpmnpm-installnode-gyp

SmartCollection in Meteor generating unpredictable outcomes

When executing News.insert({name: 'Test'}) in the browser JS console, it caused {{count}} to increase from 0 to 1. Checking in mongo console using mrt mongo, db.news.find().count() also returns 1. However, after adding a record through the mongo ...

javascriptmongodbmeteorsmartcollection

Can you explain the distinction between these codes?

function Example() { this.display1 = function() { alert(1) } } Example.prototype.display2 = function() { alert(2) } var e = new Example e.display1() e.display2() display1 and display2 both have the ability to trigger an alert showing a number. Do yo ...

javascriptjqueryprototype-oriented

Tips for building a diverse array of data types and effectively utilizing them based on their specific type in Typescript

Trying to store both custom types, Graphic and Asset, in the same array is proving to be a challenge. The goal is to access them and retain their individual type information. const trail: Array<Graphic | Asset> = []; for (let index = 0; index < t ...

javascripttypescript

Encounter error message "Angular-CLI: Karma-Webpack fails due to 'file or directory not found'"

After initially starting with the classic Angular/systemjs setup for the Tour of Heroes, I transitioned to using angular-client. The application now performs well in both development and production modes, except for when I try to run tests using ng test. A ...

javascriptangularjskarma-runner

Using npm webpack-mix to execute a JavaScript function stored in a separate file

Currently, I am facing a challenge with accessing a function that is defined in the table.js file from within my index.html. Here is a snippet of the code: table.js let table; function set_table(table) { this.table = table; consol ...

javascripthtmljquerynpmwebpack

Issue with utilizing addEventListener("load") in Firefox in conjunction with <iframe>

I've encountered an issue with my iframe when it is used as the target for a form. In all major browsers, except for Firefox, the iframe successfully removes the main element upon pressing the submit button. However, in Firefox, the main element is re ...

javascripthtmlfirefoxiframeecmascript-6

Display a new div with its content every 5th item

I am currently working with a Smarty template that contains the following code output: Check out my other question on Stackoverflow My problem lies in the fact that the provided code does not repeat the inserted HTML after every 5 elements... Could some ...

javascriptjqueryhtmlsmarty3

There was an issue when trying to process the Javascript data structure with JSON.parse

Currently, I have the following data stored in a JavaScript variable: "{'Headings': [{'name': 'Behavior', 'majorTopic': 'N', 'vote': {'down': 1, 'up': 1}}, {'na ...

javascriptjqueryjsondictionary

angularjs select not chosen option

Hey there, I'm currently attempting to select an item from an array in the select options by using a string value. Below is my HTML code: <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularj ...

javascriptangularjs

Receive the complete HTML page as a response using JavaScript

When making an Ajax post to a specific page, I either expect to receive an ID as a response if everything goes smoothly, or I might get a random html page with a HTTP 400 error code in case of issues. In the event of an error, my goal is to open the enti ...

javascriptjqueryajax

Encountering issues with the Sequelize Model.prototype.(customFunction) feature malfunctioning

While attempting to define a customFunction within the Sequelize model, I encountered an error: TypeError: user.getJWT is not a function at User.create.then (/projects/test/a/app/controllers/UserController.js:22:29) Below is the code snippet from ...

javascriptnode.jsexpresssequelize.js

A guide on simulating an emit event while testing a Vue child component using Jest

During my testing of multiple child components, I have encountered a frustrating issue that seems to be poor practice. Each time I trigger an emit in a child component, it prompts me to import the parent component and subsequently set up all other child co ...

javascriptunit-testingvue.jstestingjestjs

Compatibility of Typescript with local storage

Can Typescript interact with local storage in any way? I have been setting items using the following code: localStorage.setItem('someString', JSON.stringify(MyTypescriptObject)); This method stores the object as a plain string. For example: ...

javascriptangulartypescriptlocal-storage

Discovering the difference between a singular array and an array of arrays

x = [1, 2,3, 5]; y = [1, [2], [3, [[4]]],[5,6]])); I am currently facing a challenge in finding the difference between these two arrays. function findArrayDifference(arr1, arr2) { var tempArr = [], difference = []; for (var i = 0; i < arr1.l ...

javascriptarraysangularjs

Using an `<img>` element as an event handler in a JavaScript function

I'm having trouble setting up a click handler for the search field in my project. I've tried using on() with an img or class, but it's not working as expected. When adding the image using the code below: jQ('#psc').append('&l ...

javascriptjqueryfunctiononclickevent-handling