Problems using with bootstrap tabs #10

telimbectar · 2016-08-04T12:07:16Z

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>```

itajackass · 2018-07-17T15:01:38Z

same problem for me: any solution?

ro31337 · 2018-07-17T15:55:51Z

Can't reproduce, link to jsfiddle please. Thanks!

zt50tz · 2022-04-13T19:49:28Z

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.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Problems using with bootstrap tabs #10

Problems using with bootstrap tabs #10

telimbectar commented Aug 4, 2016 •

edited

Loading

itajackass commented Jul 17, 2018

ro31337 commented Jul 17, 2018

zt50tz commented Apr 13, 2022

Problems using with bootstrap tabs #10

Problems using with bootstrap tabs #10

Comments

telimbectar commented Aug 4, 2016 • edited Loading

itajackass commented Jul 17, 2018

ro31337 commented Jul 17, 2018

zt50tz commented Apr 13, 2022

telimbectar commented Aug 4, 2016 •

edited

Loading