jquery.ns-autogrow
jquery.ns-autogrow copied to clipboard
Published
20 hours ago •
ro31337
ro31337
Problems using with bootstrap tabs
Ran into a problem using ns-autogrow with bootstrap and it's tabbed navigation.
First (initially visible) textarea works fine, but the ones on the other tabs behave strangely. The textarea decides to grow by each and every keystroke.
A minimal test:
<!DOCTYPE html>
<html lang="en">
<head>
<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" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="http://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="jquery.ns-autogrow.js"></script>
<script>$('#myTabs a').click(function (e) {e.preventDefault();$(this).tab('show');})</script>
</head>
<body>
<div class="container-fluid">
<div class="panel panel-primary">
<div class="panel-body">
<div>
<ul id="myTabs" class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home"><textarea style="height:150px;" name="home_ta"></textarea></div>
<div role="tabpanel" class="tab-pane" id="profile"><textarea style="height:150px;" name="profile_ta"></textarea></div>
</div>
</div>
</div>
</div>
</div>
<script>
$("textarea").autogrow({vertical: true, horizontal: false, flickering: false});
</script>
</body>
</html>```
You can reinit autogrow on change tabs.
$(document).on('shown.bs.tab', function (e) {
var $pane = $($(e.target).attr('href'));
if ($pane.length) {
$pane.find('textarea:visible').each(function () {
var $this = $(this);
$this.data('autogrow-enabled', false);
$this.autogrow({vertical: true, horizontal: false, flickering: false});
});
}
});
Be aware of duplicating shadows.
