CODEWITHSUNDEEP
htmlcssflexbox
adama
adama

Reputation: 557

HTML flexbox custom spacing with space-between creating an addition item

I just playing around with HTML and try to make a ToDo List. My HTML looks like this:

<h1>To Do List</h1>

<div class="header">
  <input type="text" placeholder="New Task..." name="task" id="task" class="task" autocomplete="off">
  <span onclick="newElement()" class="addBtn">Add</span>
</div>

<ul id="myUL"></ul>

<script src="script/js.js"></script>

This is my start page

enter image description here

After I added a new task, i have this

enter image description here

This is one li-element. So I added a display: flex and justify-content: space-between. So the text is on the left and the close-button on the right.

Now I can also check the task I already completed. This looks like this.

enter image description here

Because I create this checked-icon I now have three elements in my li-element. So the task-name is centered. What I want now is to have spacing between the checked-symbol and the task-name. The close-button should be still on the right side.

I played around with justify-content for my li-elements and the .close-class. I thought I can make the li-element flex-start and the .close-class flex-end. This is what I come up with:

enter image description here

Is it possible to achieve my goal with flexboxes? If yes, how can I do it? Here is the full css-file, I played around for some time, so many parts from the css are unneccessary, please ignore them. 

    *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

body{
    background: #F2994A;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #F2C94C, #F2994A);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #F2C94C, #F2994A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    margin-top: 30px;
    font-family: sans-serif;
    color: black;

}

h1{
  color: white;
}

.header{
    width: 40%;
    background-color: white;
    margin-top: 20px;
    padding: 15px;
    display: flex;
    flex-direction: row;
}

.task{
    width: 100%;
    overflow: hidden;
    border: none;
}

.addBtn{
    text-align: right;
    border: none;
    background: white;
    cursor: pointer;
    height: 100%;
}

ul{
    padding-top: 20px;
    list-style: none;
    width: 40%;
    align-content: center;


  }
  li{
    width: 100%;
    font-size: 1.3em;
    color: #2f4f4f;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-left: 15px;
  }

  .close {
    position: relative;
    text-align: right;
    align-content: right;
    justify-content: space-end;
    right: 0;
    top: 0;
    padding: 12px 20px 12px 20px;

  }

  .close:hover {
    background-color: #f44336;
    color: white;
    cursor: pointer;
  }

  ul li:hover{
      background: #ddd;

  }

  /* When clicked on, add a background color and strike out text */
ul li.checked {
    background: #888;
    color: #fff;
    justify-content: flex-start;
  }

  /* Add a "checked" mark when clicked on */
ul li.checked::before {
    content: '';
    border-color: #fff;
    border-style: solid;
    border-width: 0 2px 2px 0;
    align-content: center;
    transform: rotate(45deg);
    height: 15px;
    width: 7px;
  }

EDIT: Working demo.

Upvotes: 0

Views: 110

Answers (3)

Rhythm Ruparelia
Rhythm Ruparelia

Reputation: 667

I have created a demo with basic styles that can match your task list. Please check the example

ul {
  list-style-type: none;
}

.task {
  color: #666;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin-bottom: 5px;
}


.task.checked {
  background-color: #eee;
  padding-left: 35px;
}

.task.checked::before {
    content: '';
    border-color: #666;
    border-style: solid;
    border-width: 0 2px 2px 0;
    align-content: center;
    transform: rotate(45deg);
    height: 15px;
    width: 7px;
    position: absolute;
    left: 15px;
    top: 8px;
}

.task-title {
  font-size: 16px;
  margin-bottom: 0;
}

.close {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<div class="container">

<ul class="my-3">
  <li class="task checked">
    <h4 class="task-title">Task Item</h4>
    <a href="#" class="close">&times;</a>
  </li>
  <li class="task">
    <h4 class="task-title">Task Item</h4>
    <a href="#" class="close">&times;</a>
  </li>
  <li class="task">
    <h4 class="task-title">Task Item</h4>
    <a href="#" class="close">&times;</a>
  </li>
</ul>

</div>

And your demo fiddle updated (https://jsfiddle.net/rhythm19/pa9ouhmd/).

Upvotes: 0

Akash Rajput
Akash Rajput

Reputation: 11

I have removed display flex and text-align :center and justify content from ul and li here is your file of css and html

    *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

body{
    background: #F2994A;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #F2C94C, #F2994A);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #F2C94C, #F2994A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    
    font-family: sans-serif;
    color: black;

}

h1{
  color: white;
}

.header{
    width: 40%;
    background-color: white;
    
    padding: 15px;
    display: flex;
    flex-direction: row;
}

.task{
    width: 100%;
    overflow: hidden;
    border: none;
}

.addBtn{
    text-align: right;
    border: none;
    background: white;
    cursor: pointer;
    height: 100%;
}

ul{
   
    list-style: none;
    width: 40%;
    align-content: center;


  }
  li{
    width: 100%;
    font-size: 1.3em;
    color: #2f4f4f;
    flex-direction: row;
  }

  .close {
    float: right;


  }
  .text{
    padding-left: 15px;
  }
  .close:hover {
    background-color: #f44336;
    color: white;
    cursor: pointer;
  }

  ul li:hover{
      background: #ddd;

  }

  /* When clicked on, add a background color and strike out text */
ul li.checked {
    background: #888;
    color: #fff;
    justify-content: flex-start;
  }

  /* Add a "checked" mark when clicked on */
ul li.checked::before {
    content: '';
    border-color: #fff;
    border-style: solid;
    border-width: 0 2px 2px 0;
    align-content: center;
    transform: rotate(45deg);
    height: 15px;
    width: 7px;
  }
<html>
<head>
	<link rel="stylesheet" type="text/css" href="this.css">
	<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>

<h1>To Do List</h1>

<div class="header">    
    <input type="text" placeholder="New Task..." name="task" id="task" class="task" autocomplete="off">
    <span onclick="newElement()" class="addBtn">Add</span>
</div>

    <ul id="myUL">
    	<li class="myLi">
    		<span><i class="fa fa-check"></i></span>
    		<span class="text">Text</span>
    		<span class="close"><i class="fa fa-times"></i></span>
    	</li>
    </ul>



<script src="script/js.js"></script>


</body>
</html>

Upvotes: 1

beltouche
beltouche

Reputation: 761

I added margin-right: 1em; to the ul li.checked::before bit in your demo and got spacing.

Upvotes: 1

Related Questions