TextArea in jqxWindow
100% large widgets creates scrollbars in JQXWindows
by mogador
HTML
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
the textArea is defined on 100%, but scrollbars appears in the window.
<div id='jqxwindow1'>
<div>Header</div>
<div>
<div class="container">
<div class="row">
<div class="col">
bootstrap
<br/>
</div>
</div>
</div>
<textarea id="jqxTextArea1"></textarea>
</div>
</div>
<div id='jqxwindow2'>
<div>Header</div>
<div>
<!-- <div class="row">
<div class="col">
test
<br/>
</div>
</div> -->
<textarea id="jqxTextArea2"></textarea>
</div>
</div>
JavaScript
$("#jqxwindow1").jqxWindow({
height: 100,
width: 300,
theme: 'energyblue',
position: 'left',
showCloseButton:false
});
$('#jqxTextArea1').jqxTextArea({ placeHolder: '100` => scrollbar', height:"100%", width: "99%", minLength: 1});
$("#jqxwindow2").jqxWindow({
height: 100,
width: 300,
theme: 'energyblue',
position: 'right',
showCloseButton:false
});
$('#jqxTextArea2').jqxTextArea({ placeHolder: '99` => no scrollba', height:"95%", width: "99%", minLength: 1});