#102653
ivanpeevski
Participant

Hi anna,

Thank you for the additional information! The CSS issue is caused by the max-width property of .smart-kanban-task. Instead, I suggest setting left and right padding to theĀ column-content element and you can achieve the same visual effect:

.smart-kanban-column-content {
background-color: rgb(240, 240, 240);
border-radius: 0.5em;
padding: 0 4%;
}

.smart-kanban-task {
border-radius: 0.2em;
margin: auto;
}

Regarding storing the checklist, you can have a look at the way we store comments in our tutorial demo. The idea with checklist is exactly the same. You need to create a new table Checks, with the check properties – text, completed, and an additional taskId field. Then everytime you execute a SELECT Query for Tasks, you need to execute an additional SELECT Query for Checks where taskId matches with the id of the task you are selecting. The array you receive from the second query, you need to set as a value to the task.checklist property. The same goes for Insert/Delete Queries. When you execute an UPDATE Query, you first need to delete the checks and then insert the new ones.
Have a look at an example with checklist here: demo with checklist

If you have any other questions, please do not hesitate to contact us again.
Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/