I'm working on a contact app to build my portfolio.
const image_input = document.querySelector("#image_input");
var uploaded_image = "";
image_input.addEventListener("change", function(){
const reader = new FileReader();
reader.addEventListener("load", () => {
uploaded_image = reader.result;
document.querySelector("#display_image").style.backgroundImage = `url(${uploaded_image})`
});
reader.readAsDataURL(this.files[0]);
})
document.body.onload=function(){var e=".draggable{cursor: move;display: inline-block;} .text{display: inline-block; cursor: move;} .text:focus{cursor: auto;} .text-wrapper{width: 100%;position: relative;} .wrap{position: absolute;margin: y;top: 0;bottom: 0;left: 0;right: 0;}';",t=document.createElement("style");t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e)),document.getElementsByTagName("head")[0].appendChild(t);var n,o,i=document.querySelectorAll(".draggable"),a=document.querySelectorAll(".text");z=1,editing=!1;var r=null;function s(e){event.target.classList.contains("text")||(editing=!1,editing&&n.blur())}document.body.addEventListener("mousedown",s),document.body.addEventListener("touchstart",s);for(var d=0;d<i.length;d )i[d].addEventListener("mousedown",c),i[d].addEventListener("touchstart",f),b=i[d].getBoundingClientRect(),i[d].initialOffsetX=b.left window.pageXOffset,i[d].initialOffsetY=b.top window.pageYOffset,i[d].x=b.left,i[d].y=b.top,i[d].style.cursor="move",document.addEventListener("mouseup",g),document.addEventListener("touchend",g);for(let e=0;e<a.length;e ){var l;a[e].addEventListener("dblclick",u),(l=document.createElement("div")).className="text-wrapper",a[e].parentNode.insertBefore(l,a[e]),l.appendChild(a[e]),l.style.height=p(a[e]) "px",(l=document.createElement("div")).className="wrap",a[e].parentNode.insertBefore(l,a[e]),l.appendChild(a[e]),a[e].contentEditable="true"}function u(e){n=e.target,editing=!0,n.focus()}function f(e){e.preventDefault(),c(e),null==r?r=setTimeout(function(){r=null},500):(clearTimeout(r),r=null,u(e))}function c(e){if(e.target.classList.contains("text")||(editing=!1,editing&&n.blur()),!editing){e.preventDefault(),moving=!0,z =1,(o=e.target).attributeName="test",b=o.getBoundingClientRect();var t=b.left window.pageXOffset,i=b.top window.pageYOffset;offsetX=e.pageX||e.changedTouches[0].pageX,offsetY=e.pageY||e.changedTouches[0].pageY,document.addEventListener("mousemove",function(e){if(!0===moving){var n="transform: translate(" (e.pageX-offsetX t-o.initialOffsetX) "px, " (e.pageY-offsetY i-o.initialOffsetY) "px);z-index:" z ";";o.setAttribute("style",n)}}),document.addEventListener("touchmove",function(e){var n=e.changedTouches;if(!0===moving)for(let e=0;e<n.length;e ){var a="transform: translate(" (n[e].pageX-offsetX t-o.initialOffsetX) "px, " (n[e].pageY-offsetY i-o.initialOffsetY) "px);z-index:" z ";";o.setAttribute("style",a)}})}}function g(e){moving=!1}function p(e){var t=e.offsetHeight,n=getComputedStyle(e);return t =parseInt(n.marginTop) parseInt(n.marginBottom)}};
var i = 0;
function duplicate() {
var original = document.getElementById('duplicater' i);
var clone = original.cloneNode(true); // "deep" clone
clone.id = "duplicater" i; // there can only be one element with an ID
// event handlers are not cloned
original.parentNode.appendChild(clone);
}body{
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
flex-direction: column;
height: 100vh;
}
#display_image{
width: 75px;
height:75px;
border: 1px solid black;
background-position: center;
background-size: cover;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery UI Sortable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href=“/resources/demos/style.css”>
<link rel="stylesheet" href="style.css">
<style>
#sortable { margin: 0; padding: 0; width: 200%; }
#sortable li { margin: 0px 300px 405px ; padding: 1em; padding-left: 1.5em; font-size: 1.4em; height: 20px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#sortable" ).sortable();
} );
</script>
</head>
<body>
<ul id="sortable" style=" border:3px; border-style:solid; background-color: #E9E395; border-color:transparent; padding: 1em; width:fit-content; width:-webkit-fit-content; width:-moz-fit-content;">
<div id="duplicater0">
<li ><span ></span><input type= "file" id="image_input" accepts="image/png, image/jpg">
<div id="display_image"></div>
<script src="script.js"></script>
<form>
<textarea style="border:3px; font-family: 'Times New Roman', Times, serif; text-align: left" rows = "1" cols = "15" name = "first name">
First Name
</textarea>
<textarea style="border:3px; font-family: 'Times New Roman', Times, serif;" rows = "1" cols = "15" name = "last name">
Last Name
</textarea>
</form>
<form>
<textarea style="border:3px; text-align: left; font-family: 'Times New Roman', Times, serif;" rows = "1" cols = "15" name = "first name">
Phone #
</textarea>
<a style="color: #B8B8B8; font-size: medium; font-family:serif"><b>Text </b></a><a style="color: #B8B8B8; font-size: medium; font-family:serif">|</a><a style="color: #B8B8B8; font-size: medium; font-family:serif"><b> Call</b></a>
</form>
<form>
<textarea style="border:3px; font-family: 'Times New Roman', Times, serif; text-align: left" rows = "1" cols = "15" name = "first name">
Occupation
</textarea>
</form>
<button onclick="duplicate()">Add</button>
<p id="demo"></p>
</li>
<br>
<br>
<br>
<br>
</div>
</ul>
</body>
</html>When I press the "add" button below occupation, the HTML at the top gets cut off. I've tried editing the padding but to no avail. The bottom has no cut-off when I press add. I also used "break" for some space. I suspect it's something with the padding but no too sure.
const image_input = document.querySelector("#image_input");
var uploaded_image = "";
image_input.addEventListener("change", function(){
const reader = new FileReader();
reader.addEventListener("load", () => {
uploaded_image = reader.result;
document.querySelector("#display_image").style.backgroundImage = `url(${uploaded_image})`
});
reader.readAsDataURL(this.files[0]);
})
document.body.onload=function(){var e=".draggable{cursor: move;display: inline-block;} .text{display: inline-block; cursor: move;} .text:focus{cursor: auto;} .text-wrapper{width: 100%;position: relative;} .wrap{position: absolute;margin: y;top: 0;bottom: 0;left: 0;right: 0;}';",t=document.createElement("style");t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e)),document.getElementsByTagName("head")[0].appendChild(t);var n,o,i=document.querySelectorAll(".draggable"),a=document.querySelectorAll(".text");z=1,editing=!1;var r=null;function s(e){event.target.classList.contains("text")||(editing=!1,editing&&n.blur())}document.body.addEventListener("mousedown",s),document.body.addEventListener("touchstart",s);for(var d=0;d<i.length;d )i[d].addEventListener("mousedown",c),i[d].addEventListener("touchstart",f),b=i[d].getBoundingClientRect(),i[d].initialOffsetX=b.left window.pageXOffset,i[d].initialOffsetY=b.top window.pageYOffset,i[d].x=b.left,i[d].y=b.top,i[d].style.cursor="move",document.addEventListener("mouseup",g),document.addEventListener("touchend",g);for(let e=0;e<a.length;e ){var l;a[e].addEventListener("dblclick",u),(l=document.createElement("div")).className="text-wrapper",a[e].parentNode.insertBefore(l,a[e]),l.appendChild(a[e]),l.style.height=p(a[e]) "px",(l=document.createElement("div")).className="wrap",a[e].parentNode.insertBefore(l,a[e]),l.appendChild(a[e]),a[e].contentEditable="true"}function u(e){n=e.target,editing=!0,n.focus()}function f(e){e.preventDefault(),c(e),null==r?r=setTimeout(function(){r=null},500):(clearTimeout(r),r=null,u(e))}function c(e){if(e.target.classList.contains("text")||(editing=!1,editing&&n.blur()),!editing){e.preventDefault(),moving=!0,z =1,(o=e.target).attributeName="test",b=o.getBoundingClientRect();var t=b.left window.pageXOffset,i=b.top window.pageYOffset;offsetX=e.pageX||e.changedTouches[0].pageX,offsetY=e.pageY||e.changedTouches[0].pageY,document.addEventListener("mousemove",function(e){if(!0===moving){var n="transform: translate(" (e.pageX-offsetX t-o.initialOffsetX) "px, " (e.pageY-offsetY i-o.initialOffsetY) "px);z-index:" z ";";o.setAttribute("style",n)}}),document.addEventListener("touchmove",function(e){var n=e.changedTouches;if(!0===moving)for(let e=0;e<n.length;e ){var a="transform: translate(" (n[e].pageX-offsetX t-o.initialOffsetX) "px, " (n[e].pageY-offsetY i-o.initialOffsetY) "px);z-index:" z ";";o.setAttribute("style",a)}})}}function g(e){moving=!1}function p(e){var t=e.offsetHeight,n=getComputedStyle(e);return t =parseInt(n.marginTop) parseInt(n.marginBottom)}};
var i = 0;
function duplicate() {
var original = document.getElementById('duplicater' i);
var clone = original.cloneNode(true); // "deep" clone
clone.id = "duplicater" i; // there can only be one element with an ID
// event handlers are not cloned
original.parentNode.appendChild(clone);
}body{
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
flex-direction: column;
height: 100vh;
}
#display_image{
width: 75px;
height:75px;
border: 1px solid black;
background-position: center;
background-size: cover;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery UI Sortable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href=“/resources/demos/style.css”>
<link rel="stylesheet" href="style.css">
<style>
#sortable { margin: 0; padding: 0; width: 200%; }
#sortable li { margin: 0px 300px 405px ; padding: 1em; padding-left: 1.5em; font-size: 1.4em; height: 20px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#sortable" ).sortable();
} );
</script>
</head>
<body>
<ol id="sortable" style=" border:3px; border-style:solid; background-color: #E9E395; border-color:transparent; padding: 1em; width:fit-content; width:-webkit-fit-content; width:-moz-fit-content;">
<div id="duplicater0">
<li ><span ></span><input type= "file" id="image_input" accepts="image/png, image/jpg">
<div id="display_image"></div>
<script src="script.js"></script>
<form>
<textarea style="border:3px; font-family: 'Times New Roman', Times, serif; text-align: left" rows = "1" cols = "15" name = "first name">
First Name
</textarea>
<textarea style="border:3px; font-family: 'Times New Roman', Times, serif;" rows = "1" cols = "15" name = "last name">
Last Name
</textarea>
</form>
<form>
<textarea style="border:3px; text-align: left; font-family: 'Times New Roman', Times, serif;" rows = "1" cols = "15" name = "first name">
Phone #
</textarea>
<a style="color: #B8B8B8; font-size: medium; font-family:serif"><b>Text </b></a><a style="color: #B8B8B8; font-size: medium; font-family:serif">|</a><a style="color: #B8B8B8; font-size: medium; font-family:serif"><b> Call</b></a>
</form>
<form>
<textarea style="border:3px; font-family: 'Times New Roman', Times, serif; text-align: left" rows = "1" cols = "15" name = "first name">
Occupation
</textarea>
</form>
<button onclick="duplicate()">Add</button>
<p id="demo"></p>
</li>
<br>
<br>
<br>
<br>
</div>
</ol>
</body>
</html>CodePudding user response：
The reason is because when you click the add button you have margin values on all of your list items #sortable li of margin: 0px 300px 405px; which includes adding a bottom margin value of 405px on your related <li> elements. So when you add an item it creates that extra margin, pushing it out of view.
Also, your <ol> element with id #sortable has a width: 200%, you need to make that width: 100% as follows and add box-sizing: border-box so any padding values remain inside the element as opposed to adding extra-width horizontally as well.
#sortable {
margin: 0;
padding: 0;
width: 100%;
box-sizing: border-box;
}
My suggestion for the other problem would be to use the flex display property for your page layout. There is a very good set of flexbox tutorials here:
CodePudding user response：
I added flex to the unordered list and set the color of the html tag to the same color as the unordered list tag.
html{
background-color: #E9E395
}
ul{
display:flex;
flex-direction: column;
height: 100vh;
}