Jquery textextjs on tabs twitter bootstrap not work properly

Question

I try to use http://textextjs.com on tabs (Twitter bootstrap).

This is my code example :

codepen

HTML Tab content :

<!-- Tab panes -->
    <div class="tab-content">
        <div class="tab-pane active" id="home" role="tabpanel">
            Tab content 1
            <br>
            <textarea id="textarea1" rel="textext" rows="1"></textarea>
        </div>
        <div class="tab-pane" id="profile" role="tabpanel">
            Tab content 2
            <br>
            <textarea id="textarea2" rel="textext" rows="1"></textarea>
        </div>

CSS :

.wrapper {
    width: 500px;
    margin: 30px auto;
}

.tab-content {
    padding: 20px 0;
}

JS :

$('textarea[rel="textext"]').textext({
    plugins : 'tags',
    tagsItems : [ 'Basic', 'JavaScript', 'PHP', 'Scala' ]
});

As I see, in the tab 1 there is a "dynamic" padding-left and "height". But on the second tab, it does not work on mine for any reason. Maybe jQuery which is unable to determine the dimensions of invisible elements.

How to fix it?

Answer 1

Yes, it's the reason, on load of the page your second tab is hidden so your block are not computed.

So the solution is to call your plugin just when you show your tab. Here a solution where i instantiate textext() on tab show and i store the instantiated tabs for avoid multiple call.

$('textarea[rel="textext"]').first().textext({
        plugins : 'tags',
        tagsItems : [ 'Basic', 'JavaScript', 'PHP', 'Scala' ]
});

//Array who contain id of computed tabs
var tabComputed = ["#home"];

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  //Get tabs target id and check if he's already computed
  var target = $(e.target).attr("href");

  if(tabComputed.indexOf(target)==-1)
  {
     $(target).find("textarea").textext({
        plugins : 'tags',
        tagsItems : [ 'Basic', 'JavaScript', 'PHP', 'Scala' ]
     });
     tabComputed.push(target);
  }
});

$('textarea[rel="textext"]').first().textext({
		plugins : 'tags',
		tagsItems : [ 'Basic', 'JavaScript', 'PHP', 'Scala' ]
});


var tabComputed = ["#home"];

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  
  var target = $(e.target).attr("href");
  if(tabComputed.indexOf(target)==-1)
  {
     $(target).find("textarea").textext({
		plugins : 'tags',
	  	tagsItems : [ 'Basic', 'JavaScript', 'PHP', 'Scala' ]
     });
     tabComputed.push(target);
  }
});

.wrapper {
	width: 500px;
	margin: 30px auto;
}

.tab-content {
	padding: 20px 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-textext/1.3.0/jquery.textext.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="wrapper">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li class="active" role="presentation">
            <a aria-controls="home" data-toggle="tab" href="#home" role="tab">
                Tab 1
            </a>
        </li>
        <li role="presentation">
            <a aria-controls="profile" data-toggle="tab" href="#profile" role="tab">
                Tab 2
            </a>
        </li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
        <div class="tab-pane active" id="home" role="tabpanel">
            Tab content 1
						<br>
						<textarea id="textarea1" rel="textext" rows="1"></textarea>
        </div>
        <div class="tab-pane" id="profile" role="tabpanel">
            Tab content 2
						<br>
						<textarea id="textarea2" rel="textext" rows="1"></textarea>
        </div>
    </div>
</div>