Ways to avoid overflow of dynamically added div element?

Currently, I am facing an issue while dynamically appending div elements with the .magnet class to my page. These elements end up overflowing the container boundaries and I am struggling to find a solution for this problem. If anyone could check out my jsfiddle and provide assistance, I would be extremely grateful. The CSS code for the container is also included below. Explore JsFiddle Example

body {
margin:0 auto;
overflow:hidden;
}
#container {
background-color: #446b81;
}

.magnet {
width:45px;
background-color: #FFFFFF;
padding:5px 25px;
font-family: Times;
font-size: 16px;
border:1px outset;
position:absolute;
}
javascriptjqueryhtmlcss

Answer №1

Have you thought about adjusting the width and height of the document by specific amounts? Instead of using arbitrary numbers like 50 and 100, consider setting them to match the exact size of the divs.

   testsub.css("top",Math.floor(Math.random() * ($(document).height()-50)));
   testsub.css("left",Math.floor(Math.random() * ($(document).width()-100)));

Check out the updated fiddle here: https://jsfiddle.net/mszvbfoe/5/

Answer №2

To ensure no overflow, be sure to include the "overflow:hidden;" property within your container and set a fixed width for it.

#container 
{
    background-color: #446b81;
    overflow:hidden;
    width:500px;
}

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

Changing the name of a tab within a p-tabview

Setting up a p-tabview with tabs containing specific content involves the following code: <p-tabView class="tabmain" > <ng-container *ngFor="let tab of tabs"> <p-tabPanel [header]="tab.header" > ...

cssangulartypescriptprimengprimeng-turbotable

What is the solution for resolving the "cannot resolve" issue in CSS for an Angular project?

During a small project I was working on, I decided to add a background image to another image using CSS. Here is the code snippet: .child2 img { width: 200px; height: 200px; border-radius: 50%; background-image: url('./assets/images/imageb ...

cssangular

Angular: Keeping all FormControls in sync with model updates

I am dealing with a collection of FormControls that were created using FormBuilder: this.someForm = this.fb.group({ name: '', size: '', price: '', }); Is there an alternative method to update them based on ...

javascriptangularangular-forms

Using jQuery to send information to PHP via an AJAX request

When attempting to use jQuery to send form data to a PHP file, nothing happens when the button is pressed. The jQuery code snippet: $(document).ready(function(){ $("#daily_user_but").click(function(){ $('#result').html('<im ...

javascriptphpjqueryajax

Generate a unique promise with custom functionality using JavaScript bindings in Selenium WebDriver

Is there a specific way to generate a personalized promise within a Selenium WebDriver environment using Node.js? Typically, in a Node.js application, I would produce a promise that encapsulates all of my asynchronous calls like so: return new Promise(fu ...

javascriptnode.jsseleniumselenium-webdriverpromise

Mongoose fails to save due to an error stating "undefined id"

Having some trouble with the Mongoose save function... In my user model file: const mongoose = require('mongoose'); const Schema = mongoose.Schema; const User = mongoose.model('User', { name: Schema.Types.Mixed, gender: String, ...

javascriptnode.jsmongodbmongoose

Display a text field when the onclick event is triggered within a for

Control Panel for($i = 1; $i <= $quantity; $i++){ $data .= '<b style="margin-left:10px;">User ' . $i . '</b>'; $data .= '<div class="form-group" style="padding-top:10px;">'; $data .= ' ...

javascriptphphtml

Ways to append a number to the start or end of an array using JavaScript

Can you help me figure out why the function to order the "s" array from minor to major is adding the number at the end instead of the beginning? The if statement seems to be true (2 < 7 = true) but the logic is not working as expected. Any advice on how ...

javascriptarraysloops

Create a new cookie in Angular if it is not already present

I am looking to check if a cookie is set in Angular. If the cookie is not found, I want to create a new one. Currently, I have this code snippet: if ($cookies.get('storedLCookie').length !== 0) { $cookies.put('storedLCookie',' ...

javascriptangularjscookies

Why does Drupal's Advagg display several css and js files?

After installing the Advag module, I noticed that it is combining files, but there seems to be an issue: <link type="text/css" rel="stylesheet" href="/sites/default/files/advagg_css/css__sqX0oV0PzZnon4-v--YUWKBX0MY_EglamExp-1FI654__IOPiOtulrIZqqAM0BdQC ...

javascriptcssdrupal-7

Creating an infinite scroll with a gradient background: a step-by-step guide

I am currently working on a project to develop an infinite scrolling webpage with a dynamic gradient background that changes based on the user's scroll position. While researching, I came across some code for infinite scrolling using time and date. I ...

javascripthtmlcssgradientinfinite-scroll

Display and conceal individual divs using jQuery

Despite my lack of experience with jQuery, I am struggling with even the simplest tasks. The goal is to display/hide specific messages when certain icons are clicked. Here is the HTML code: <div class="container"> <div class="r ...

javascripthtmljquerycssjquery-events

Exploring hash retrieval in Perl templates

What is the method for accessing variables in a hash when using Perl's HTML::Template module? As I construct the following hash in my Perl code: # Implementing success/error flash messages if ($query->param("submit")) { $template->param( ...

htmlperltemplateshashcgi

What is the best way to arrange flex elements in distinct columns for stacking?

Recently, I utilized the flex property along with flex-flow: column nowrap to showcase my elements. Take a quick look at what my elements currently resemble: [this] It's quite apparent that simply stacking both columns on top of each other won't ...

javascripthtmlcssajaxflexbox

Setting up a project with Angular 2 and NodeJS

Hello there, I have some inquiries about organizing the project structure of a MEAN application with Angular2. Initially, I followed the introductory guide on angular.io to create a basic Angular2 app. Now, I am attempting to incorporate this app into a N ...

javascriptnode.jsnpmangularproject-structure

Struggling to constrain a TextField component from material-ui and encountering an issue with the inputRef

Currently, I am attempting to restrict the length of an autocomplete textfield within my project. However, when I apply InputProps={{ maxLength: 2 }}, it throws an error stating that my inputRef.current is null. Even though I have set the ref in the inputR ...

javascriptreactjsmaterial-ui

Creating a Drop-Down Button Using HTML, CSS, and JavaScript

I am currently working with the following code: <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=PT+Sans ...

javascripthtmljquerycssreactjs

Due to high activity on the main thread, a delay of xxx ms occurred in processing the 'wheel' input event

While using Chrome version: Version 55.0.2883.75 beta (64-bit), along with material-ui (https://github.com/callemall/material-ui) version 0.16.5, and react+react-dom version 15.4.1, an interesting warning message popped up as I scrolled down the page with ...

javascriptgoogle-chromereactjsbrowsermaterial-ui

The path NPM Package is missing in the package export

For my first NPM package, I've been diving into the manuals and exploring other projects for hours to make everything work. Getting Started with the Project https://i.sstatic.net/4JIHz.png The package successfully builds, generating files for ESM an ...

javascriptnode.jsnode-modulespackage.jsones6-modules

What could be the reason for the HTML canvas not displaying anything after a new element is added?

How come the HTML canvas stops showing anything after adding a new element? Here is my HTML canvas, which works perfectly fine until I add a new element to the DOM: <canvas class="id-canvas", width="1025", height="600"> ...

javascripthtmldomcanvas