Laravel PHP form submition, breaks text when displaying results? - php

Question

So I have a ToDo List and really strange problem.
So I have a form where user writes the Title and task description, task description is done as textarea, after that the user presses the submit button and submits the Task, which then redirects user to the "Home page" and displays all pending tasks.
The problem is when user presses "ENTER" inside the texarea the text "breaks" and doesn't align with the HTML div tag.( As shown in the picture below (TASK 3 and TASK 2))
This is my "Display all tasks" code
> #foreach ($tasks as $task)
> <div class="Task">
> <h1>{{ $task->TaskName }}</h1>
> <div class="TaskDescription">
> <p>{{ $task->TaskDescription }}</p>
> </div>
> </div>
> #endforeach
,this is my "Create new task" form
<div class="FormContainer">
<form method="POST" action="/tasks" class="form_group_vertical">
#csrf
<input name="TaskName" placeholder="Task name..." class="lineInput">
<textarea name="TaskDescription" placeholder="Task description..." class="Form_TextArea"></textarea>
<button class="btn_submit" type="submit">Create new Task</button>
</form>
and this is how I store all my tasks
public function storeTasks(){
// return request()->all(); data displayed in JSON
Task::create([
'TaskName' => request('TaskName'),
'TaskDescription' => request('TaskDescription')
]);
return redirect('/tasks');
}
and this is my migration up function
public function up()
{
Schema::create('tasks', function (Blueprint $table) {
$table->id();
$table->string('TaskName');
$table->text('TaskDescription');
$table->timestamps();
});
}
So far I had tried, changing how the data is saved,
tried replacing the {{ }} with {!! !!}, tried changing databases, and tried completely rewriting the form - I couldn't find any fix with this aproach.

Answer 1

Use nl2br
#foreach ($tasks as $task)
<div class="Task">
<h1>{{ $task->TaskName }}</h1>
<div class="TaskDescription">
<!-- Change here -->
<p>{!! nl2br(trim($task->TaskDescription)) !!}</p>
<!-- OR -->
<p>{!! str_replace(array("\r\n", "\r", "\n"), "<br />", $task->TaskDescription) !!}</p>
</div>
</div>
#endforeach

Answer 2

Having the textarea inside <pre> works too.

Answer 3

SOLUTION !!!
To fix my issue I had to replace the $table->text('TaskDescription') and change it into $table->longText('TaskDescription')
Replaced text with longtext
public function up()
{
Schema::create('tasks', function (Blueprint $table) {
$table->id();
$table->string('TaskName');
$table->longText('TaskDescription');
$table->timestamps();
});
}