html - Decrease number of columns in textarea in mobile view -
i want decrease number of columns in textarea in mobile view,how can this?
here html(based bootstrap):
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-2"> <textarea name="content" rows="4" cols="80" id="content"></textarea> </div> </div>
in mobile view need scroll screen sideways show texterea,so want decrease number of columns.
you can use class form-control
on textarea , control width setting width on parent. form-control
tries cover full width of parent. when set parent's class col-xs-10
textarea constrained accordingly.
if screen width reduces, textarea resize automatically.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-xs-10"> <textarea class="form-control" name="content" rows="4" id="content"></textarea> </div> </div>
Comments
Post a Comment