Currently, I am facing an issue with my website where multiple panels are created using a foreach loop that includes textareas/textboxes. Whenever I resize my browser window, it messes up the UI by shifting the position of the textareas and other elements. Is there a way to make all components auto-resize based on the window size to prevent this UI distortion?
Below is the code I am using to generate the panels:
<div class="panel panel-primary" style="max-height:66vh; min-width:100vh">
<div class="panel-heading" style="max-height:15vh">
@Html.DisplayFor(modelItem => item.Name) - @Html.DisplayFor(modelItem => item.department) - @Html.DisplayFor(modelItem => item.position)
</div>
<div class="panel-body">
<div style="float:left; margin:6px;">
<img id="profileImg" height="155" width="155" />
</div>
<div style="float:left; margin:6px; margin-right:10px; min-width:50vh">
@Html.TextAreaFor(modelItem => item.description, 7, 200, new { @class = "form-control", @readonly = true })
</div>
<div style="float:left; margin:6px; min-width:50vh">
<h5>Comments:</h5>
@Html.TextAreaFor(modelItem => item.comment, new { @class = "form-control", @cols = 70, @rows = 5 })
</div>
</div>
</div>