0

I am having a problem with the following piece of html. The functionality is to dynamically create an infinite number of textarea and text boxes, but when I increase rows of textarea from the UI, the bottom row gets disturbed and arranges the element in the bottom row to the right of the space occupied by extended textarea, leaving empty space at the left of extended textarea.

I want that whenever textarea is expanded, the bottom row shouldn't rearrange itself instead it should just move whole row down as the textarea is extended. The code is follows:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-1"><input type="text"/></div>
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-1"><textarea></textarea></div>
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-1"><input type="text"/></div>
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-1"><input type="text"/></div>
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-1"><input type="text"/></div>
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-1"><input type="text"/></div>
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-1"><input type="text"/></div>
</div>

</body>
</html>

enter image description here

Danyal Shahid
  • 136
  • 1
  • 8
  • `.col-` should be placed inside `.row`.. https://stackoverflow.com/questions/22053195/bootstrap-rows-and-columns-do-i-need-to-use-row/22053352#22053352 – Carol Skelly Oct 21 '18 at 12:48
  • It will not work as well. I tried to place row as a parent of all the col fields and even if I place row as a parent for first 4 col elements for "col-log-3", then the UI would be affected for "col-md-4" and "col-sm-6" when browser size changes. – Danyal Shahid Oct 21 '18 at 13:26
  • 1
    It's invalid Bootstrap w/o `.row`, and it's well known that clearfix/resets must be used in Bootstrap 3 like this: https://www.codeply.com/go/CASCWdAZly – Carol Skelly Oct 21 '18 at 13:30

0 Answers0