Defaceo Defaceo - 3 months ago 11
CSS Question

Aligning items in a table

I made a "To-List" with two icons that animate on the side. the icon on the right is not in the table. So when animating you can see it moving beyond the table. I can't understand why? any help please?
Thank you!

Hi, here is the fiddle:

https://jsfiddle.net/rggo2tmv/

As you can see, the garbage-bin icon disappears inside the table while the other icon (on the right) continues outside the table.

HTML:

<!DOCTYPE html>
<html>
<head>
<title>To-Do List Project</title>
<!-- local css file sheet-->
<link rel="stylesheet" type="text/css" href="assets\css\todo.css">
<!-- Local JQuery js file-->
<script type ="text/javascript" src="assets/js/lib/jquery-3.1.0.min.js"></script>

<!-- googel fonts -->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>

<!-- howel sounds -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.0.0/howler.core.min.js"></script>

<!-- Paper -->
<script type="text/javascript" src="papaer\dist\paper-full.js"></script>

<script type="text/paperscript" canvas="myCanvas">

<!-- two numbers are placing, last number is a radious-->

var circles = [];
var colors = ['blue', 'red', 'orange', 'purple'];

<!-- //DEFINING AN OBJECT -->
var keyData = {
a: {
color: 'purple',

},

b: {
color: 'green',

},

c: {
color: 'yellow',

},

d: {
color: 'orange',

},

e: {
color: 'NavajoWhite',

},

f: {
color: 'yellow',

},

g: {
color: 'orange',

},

h: {
color: 'grey',

},

i: {
color: 'SpringGreen',

},

j: {
color: 'black',

},

k: {
color: 'white',

},

l: {
color: 'darkgrey',

},

m: {
color: 'darkblue',

},

n: {
color: 'darkblue',

},

o: {
color: 'yellow',

},

p: {
color: 'cyan',

},


q: {
color: 'Maroon',

},


r: {
color: 'Red',

},


s: {
color: 'pink',

},

t: {
color: 'Salmon',

},

u: {
color: 'cyan',

},

v: {
color: 'FireBrick',

},

w: {
color: 'Tan',

},

x: {
color: 'Brown',

},

y: {
color: 'Olive',

},

z: {
color: 'YellowGreen',

},


};//closes keyData





function onKeyDown(event) {

if(keyData[event.key]){ //if key is defined

keyData[event.key].color;

<!-- will calc the max size of visible canvas-->
var maxPoint = new Point(view.size.width, view.size.height);
<!-- random is between 0 and 0.99 -->
var randomPoint = Point.random();
<!-- so multiplying max and a random decimal nmber will give us random locaiton inside the canvas -->
var point = maxPoint * randomPoint;

var newCircle = new Path.Circle(point, 200);
newCircle.fillColor = keyData[event.key].color;

<!-- adds the circle to the array -->
circles.push(newCircle);
}//if

};



function onFrame(event) {
<!-- // Each frame, change the fill color of the path slightly by
// adding 1 to its hue: -->
for(var i = 0; i<circles.length; i++){
circles[i].fillColor.hue += 1;
circles[i].scale(.955);
};

};


</script>
</head>

<body>

<div id="container">
<h1>To-Do List <button <i class="fa fa-plus" aria-hidden="true"></i> </button></h1>

<input type="text" placeholder="Add New To-Do">

<!-- span is the button and its inside the li which contains the text -->
<!-- added table to each so they won't all aniamte toghther -->


<table>
<tr>
<td><span class="spanLeft"><i class="fa fa-trash"></i></span></td>

<td colspan="2">Hello There</td>

<td><span class="spanRight"><i class="fa fa-check-square-o"></i></span></td>
</tr>
</table>

<table>
<tr>
<td><span class="spanLeft"><i class="fa fa-trash"></i></span></td>

<td colspan="2">Hello There</td>

<td><span class="spanRight"><i class="fa fa-check-square-o"></i></span></td>
</tr>
</table>

<table>
<tr>

<td><span class="spanLeft"><i class="fa fa-trash"></i></span></td>

<td colspan="2">Hello There</td>

<td><span class="spanRight"><i class="fa fa-check-square-o"></i></span></td>


</tr>
</table>

</div>


<canvas id="myCanvas" resize></canvas>
<!-- Javascript -->

<!-- //icons -->
<script src="https://use.fontawesome.com/9430f1a1cb.js"></script>
<!-- local javascript -->
<script type="text/javascript" src="assets/js/todo.js"></script>

</body>
</html>


Javascript:

///// check-off and remove spicific to-do by clicking or restore it to not-done-yet

//will add/remove class "completed" - grey and line-through
$("div").on("click", "span.spanRight", function(){
$(this).parent().parent().toggleClass("completed"); //if class exists will remove and the opposite according to aprent from span.spanRight

});



var sound = new Howl({
src: ['https://raw.githubusercontent.com/jonobr1/Neuronal-Synchrony/master/assets/A/clay.mp3']
});

//click on delete button to remove to-do
$("div").on("click", "span.spanLeft", function(){
//will remove the to-do, which its li is the parent element of the span
$(this).parent().parent().fadeOut(500, function() //this here refers to the span, but now because of parent()
//fadeOut will not remove only hide element, so we add remove()
{$(this).remove();}); //this refers to the parent

event.stopPropagation(); //will stop the toggle to "completed" class
});

/////creation of new to-do
//event on key press. When we click "enter" it will add the new to-do (input)
$("input[type='text'").keypress(function(){ //only if input is 'text' it will select the input
if (event.which === 13){//if "enter" is clicked in input field
//grabbing text from input
var todoText = $(this).val(); //takes value that inside input
//create a new li and add to ul

if( todoText!== ''){

$("div").append("<table>" + "<tr><td><span class='spanLeft'><i class='fa fa-trash'></i></span></td>" +

"<td colspan='2'>" + todoText + "</td>" +

"<td><span class='spanRight'><i class='fa fa-check-square-o'></i></span></td>" +
"</tr></table>");
$("input").val('');

sound.play();

}

}



});

/////Add button
// selecting the icon


$(".fa-plus").on("click", function() {


if ( $("input").val() === "") {
// empty
$("input").focus();
} else { //make it do enter key /simulate an enter key, sends the input value and clears the input field (and value)
var press = jQuery.Event("keypress");
press.ctrlKey = false;
press.which = 13;
$("input").trigger(press);

//wil ladd input value to feild
$("div").append("<table>" + "<tr><td><span class='spanLeft'><i class='fa fa-trash'></i></span></td>" +

"<td colspan='2'>" + $("input").val() + "</td>" +

"<td><span class='spanRight'><i class='fa fa-check-square-o'></i></span></td>" +
"</tr></table>");
$("input").val('');
sound.play();


} //else

$("input").val('');
});


CSS:

canvas {


position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*layer index*/
z-index: -5;


}


body{

height: 100%;
margin: 0px;
background: linear-gradient(to left, #16BFFD , #CB3066);
}



#container {
width: 360px;
/*to center:*/
margin: 200px auto 200px auto;
/*slight black shadow around*/
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
background: #e6f3ff;
/**/

}



tbody, table {
/*removes bulletpoints*/

padding: 0;
border: none;
margin: 0;
width: 100%;
height: 100%;
/*removes annoying border from table that broswer creates*/
border-collapse:collapse;
background-color: white;


}

tr {

color: #666;
height: 40px;
/*centers the text*/
line-height: 40px;
width: 100%;

}

/*every second li will get this background color IMPORTANT*/
tr:nth-child(2n){
background: #f7f7f7;
}


td {
padding: 0;
margin: 0;
height: 100%;
border: none;
width: 20px;
}




/*mae the delete button appear. animated at span*/
tr:hover span{

/*40px so we'll see the icons which were set to 0 at start*/
width: 40px;
opacity: 1.0;
border: rgb(0, 0, 0, 0,);
}

span {

width: 0%;
padding: 0;
margin: 0;
}

.spanLeft {

background: #e74c3c;
height: 40px;
margin-right: 20px;
margin-left: 0px;

float: left;
text-align: center;
color: white;
/*set zero for animation*/
width: 0px;
/* display: inline-block;*/
/*animates*/
transition: 0.5s;
opacity: 1;



}


.spanRight {

background: blue;
height: 40px;
margin-right:0px;
margin-left: 20px;

float: right;
text-align: center;
color: white;
/*set zero for animation*/
width: 0px;
/* display: inline-block;*/
/*animates*/
transition: 0.5s;
opacity: 0;

}

input {
padding: 13px 13px 13px 20px;
font-size: 16px;
background-color: #f7f7f7;
width: 100%;
/*box sizing includes the padd, margin etc*/
box-sizing: border-box;
/*takes a way the small gaps around input*/
border: 3px solid rgba(0,0,0,0);

}

/*pnly when focued on an input*/
input:focus{
background: #fff;
border: 3px solid #2980b9;
outline: none;
}


.completed {

color: grey;
text-decoration: line-through;
}


/*the plus sign*/
.fa-plus{

background: none;
border: none;
float: right;
}



h1 {
color: white;
text-transform: uppercase;
background: #2980b9;
margin: 0;
padding: 10px 20px;
font-size: 24px;
font-weight: normal;
/*a google font*/
font-family: 'Roboto', sans-serif;
}

Answer

The icon inside the span element that you animate, doesn't "shrink" with the span as you might expect. It is shown to the right of the 0 width span instead (i.e. it overflows). You have the same effect both on the left and right side which is visible if you change the color of the icons.

Span is an inline element so it normally doesn't have the overflow property but you can use display: inline-block to display it with a given width and height. Use overflow: hidden to hide the icon when squeezing the width of the span element.