Hello, I added a checkbox to each input im writing.
The problem is when the input text (todo) is placed in the app, the input form is always on the right side and not on the bottom. The text of the todo should be always on the bottom of all the todo list and should get the whole width of the page.
Ill put two screenshots to show it better
BEFORE:
AFTER INPUT TEXT:
Code:
<template>
<div class="page" data-name="todo">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link back">
<i class="icon icon-back"></i>
<span class="if-not-md"></span>
</a>
</div>
<div class="title">To-Do</div>
</div>
</div>
<div class="page-content">
<div class="container block">
{{#if todos.length}}
<div class="list simple-list">
<ul class="todo-list js-todo-list">
{{#each todos}}
<li>
<label class="item-checkbox item-content">
<input type="checkbox" name="demo-checkbox" value="Books" checked="checked"/>
<i class="icon icon-checkbox"></i>
<div class="item-inner">
<div class="item-title">{{this}}</div>
</div>
</label>
</li>
{{/each}
</ul>
</div>
{{else}}
<div class="empty-state">
<h2 class="empty-state__title">Füge deine erste ToDo hinzu.</h2>
<p class="empty-state__description">Was musst du heute machen?</p>
</div>
{{/if}}
</div>
<div class="block">
<form class="js-form" @submit='addTodo'>
<input autofocus type="text" aria-label="Enter a new todo item" placeholder="z.B Hund füttern" class="js-todo-input">
</form>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'TodoList',
data () {
return {
todos: []
}
},
methods: {
addTodo (e) {
e.preventDefault()
this.$setState({
todos: [
...this.todos,
this.$dom7('.js-form').find('input').val()
]
})
this.$dom7('.js-form').find('input').val('')
}
}
}
</script>