When b-form-textarea is contained within a b-tab that is not initially active, the auto-height feature does not work. In the following code, Tab 1 - the initially active tab, works and the textarea is automatically resized, Tab 2 however does not resize the textarea when clicked.
This can be fixed by calling setHeight() on the b-textarea component when the tab changes but this is not a published API method and resize should occur automatically.
Vue:
<b-tabs>
<b-tab title="Tab 1" active>
<b-form-group label="Tab 1 Notes" label-size="sm" label-cols="3" horizontal>
<b-form-textarea ref="tab1Notes" size="sm" max-rows="15" v-model="tab1Notes"></b-form-textarea>
</b-form-group>
</b-tab>
<b-tab title="Tab 2">
<b-form-group label="Tab 2 Notes" label-size="sm" label-cols="3" horizontal>
<b-form-textarea ref="tab2Notes" size="sm" max-rows="15" v-model="tab2Notes"></b-form-textarea>
</b-form-group>
</b-tab>
</b-tabs>
JS:
import Vue from 'vue';
var indexVm = new Vue({
el: '#testbed-app',
data() {
return {
tab1Notes: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris viverra leo eget auctor imperdiet. Aliquam interdum tellus in urna sollicitudin mollis.\
Aenean consectetur justo sit amet efficitur luctus. Maecenas posuere magna neque, nec ultricies diam aliquam ac. Sed venenatis bibendum sapien ut fringilla. \
Maecenas pulvinar erat eget urna ultricies, non consectetur erat eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; \
Curabitur lorem nulla, placerat sed ullamcorper et, fermentum nec ipsum. Proin efficitur ipsum sit amet elit posuere vehicula nec at quam. \
Nulla facilisi. Nunc libero orci, commodo quis nibh eu, porttitor imperdiet dui. Donec mollis suscipit malesuada. Aliquam porta rhoncus nisi, vel volutpat arcu rhoncus sed. \
Praesent ultrices ligula eu luctus porta. Pellentesque ipsum purus, tempor a eleifend quis, eleifend ut nisl.\
\
Ut pulvinar tristique odio et commodo. Praesent ac lorem sapien. Curabitur ut orci ac ante ornare bibendum vel a justo. Nunc sed diam nec urna tristique blandit hendrerit sed dui. \
Maecenas tempus, velit et convallis tincidunt, mi odio luctus ipsum, eget ullamcorper nunc nulla sit amet eros. Proin ultricies molestie massa, sit amet tincidunt lacus elementum a. Donec id commodo justo.',
tab2Notes: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras faucibus elit eu velit dapibus imperdiet. \
Aliquam ut accumsan lorem. Vestibulum ut risus sollicitudin, convallis purus non, sollicitudin velit. \
Aliquam sapien eros, sagittis vitae ornare vitae, dignissim eu arcu. Integer vehicula massa lectus, molestie accumsan ipsum malesuada eu. Integer ut nibh mollis nulla dignissim scelerisque. \
Sed vitae diam semper, egestas mauris vel, ultrices dui. Suspendisse quis gravida nibh. Donec pellentesque condimentum blandit. \
Proin porttitor risus lacus, sit amet facilisis sem commodo non. Nam laoreet tempus quam non efficitur. In eu accumsan nulla. Donec eu tincidunt nibh, quis lobortis nisl.'
};
},
mounted: function() {
},
methods: {
}
});
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4