CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sergey Arenzon
Sergey Arenzon

Reputation: 325

CSS styling space between tags

I want to make input tag(currently height=0) popup when I press the plus button,and remove it when I press it again. How can I remove the gap between the "to do list" div and "dfsdfs" li without removing any html tags? If I remove the input tag id = "searchBox" (currently height = 0) the problem get solved, but I need the input tag. Just cant find the problem why I cant fit them whithout any space.

$("ul").on("click","span",function (){  
    $(this).parent().fadeOut(500,function () {
        $(this).remove();
    });
})


$("ul").on("click","li",function (){
    $(this).toggleClass("lineThrough");    
})


$("#plusBtn").on("click",function(){
    
       
    
})


$("#searchBox").on("keypress",function(k){ 
    if(k.which == 13){
        var newTodo = $("#searchBox").val();
        var newTodo = "<li><span><i class='far fa-trash-alt'></i></span>"+newTodo+"</li>"
        if($("#searchBox").val() != ""){
            $("#toDos").append(newTodo);
            $(this).val("");
        }
    }
})
body{
    background-image:linear-gradient(to right, #076585 ,#fff); ;

}

#table{

    width: 350px;  
    margin: 100px auto;
   
    box-shadow: 5px 5px 20px   #79777767;
    
    
}
#todoTitle{
    background: rgb(88, 88, 214);
    height: 45px;
    line-height: 50px;
    padding-left: 10px;
    color: whitesmoke;
    font-size: 25px;

}

#plusBtn{
    background: transparent;
    border: 0;
    color: white;
    font-weight: bold;
    font-size: 45px;
    float: right;
    line-height: 45px;
    outline: none;
}

#searchBox{
    width: 100%;
    border: 0;
    padding: 0;
    height: 0;
    font-size: 20px;
    padding-left: 10px;
    color: gray;
    box-sizing: border-box;
}
#toDos{
    list-style-type: none;
    padding: 0;
    margin: 0;
}

li{
    padding: 0;
    width: 100%;
    background: rgb(240, 240, 240);   
    box-sizing: border-box;
    height: 45px;
    line-height: 45px;
    font-size: 25px;
    color: gray;

    
}

li:nth-child(2n){
    background: white;

}

.lineThrough{
    text-decoration: line-through;
    color: rgb(182, 179, 179);
   
}



span{
    text-align: center;
    color: white;
    width: 0;
    height: 45px;
    display: inline-block;
    background: rgb(248, 46, 46);
    margin-right:12px;
    border: 0;
    opacity: 0;
}

li:hover span{
    width: 45px;
    transition:.2s linear ;
    opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TO DO LIST</title>
    <link rel="stylesheet" type="text/css" href="tdl_css.css">
    <script type = "text/javascript" src="jquery-3.4.1.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Gupter&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300i&display=swap" rel="stylesheet">
    <link rel = "stylesheet" type ="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
</head>
<body>
    
    <div id = "table">
       <div id = "todoTitle">TO-DO LIST
            <button id= "plusBtn">+</button>
       </div>
       <input type="text" id = "searchBox" placeholder="Add New Todo"></input>
        
       <ul id="toDos">
        <li>dsfsdfs</li>
       </ul>


    </div>





    <script type = "text/javascript" src="tdl_js.js"></script>
</body>
</html>

Upvotes: 3

Views: 78

Answers (2)

Mark McWhirter
Mark McWhirter

Reputation: 1196

Have you tried executing a script to manipulate the display:

if( element.style.display === 'block') {
    document.getElementById("searchBox").style.display = 'none';
} 
else {
    document.getElementById("searchBox").style.display = 'block';
}

Upvotes: 1

IceMetalPunk
IceMetalPunk

Reputation: 5556

Instead of setting the input's width or height to 0, use display: none to remove it from the layout flow entirely.

Upvotes: 4

Related Questions