I have a fiddle where bootstrap panels are placed in 2 columns structure and as soon as I resize the window to a certain size they are stacked vertically which is absolutely what I need.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="panel panel-primary">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel1"> Panel1 <i class="chevron fa fa-fw" ></i></div>
<div class="panel-body" id="Panel1">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla </div>
</div>
<div class="panel panel-primary">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel2"> Panel2 <i class="chevron fa fa-fw" ></i></div>
<div class="panel-body" id="Panel2">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla </div>
</div>
<div class="panel panel-info">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel3"> Panel3 <i class="chevron fa fa-fw" ></i></div>
<div class="panel-body" id="Panel3">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla </div>
</div>
<div class="panel panel-default">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel4"> Panel4 <i class="chevron fa fa-fw" ></i></div>
<div class="panel-body" id="Panel4">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla </div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-info">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel5"> Panel5 <i class="chevron fa fa-fw" ></i></div>
<div class="panel-body" id="Panel5">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla </div>
</div>
<div class="panel panel-default">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel6"> Panel6 <i class="chevron fa fa-fw" ></i></div>
<div class="panel-body" id="Panel6">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla </div>
</div>
</div>
</div>
</div>
Now I have another fiddle where I have placed the same bootstrap panels inside a jqxsplitter and was hoping the same behaviour should happen when the panels are resized
$('#toggleSearchPane').on('click', function(){
var isExpanded = $('#nestedSplitter').data('expanded');
if(isExpanded)
$('#nestedSplitter').jqxSplitter('collapse');
else
$('#nestedSplitter').jqxSplitter('expand');
});
$('#toggleErrorLogPane').on('click', function(){
var isExpanded = $('#mainSplitter').data('expanded');
if(isExpanded)
$('#mainSplitter').jqxSplitter('collapse');
else
$('#mainSplitter').jqxSplitter('expand');
});
$('#mainSplitter').jqxSplitter({
width: '100%',
height: 750,
orientation: 'vertical',
panels: [
{ size: '85%', collapsible: false },
{ size: '15%', collapsible: true }
]
});
$('#nestedSplitter').jqxSplitter({
width: '100%',
height: 750,
orientation: 'vertical',
panels: [
{ size: '35%', collapsible: true },
{ size: '65%', collapsible: true }
]
});
$('#mainSplitter').on('resize', function (event) {
//displayEvent(event);
});
$('#mainSplitter').on('expanded', function (event) {
$(this).data('expanded',true);
//displayEvent(event);
});
$('#mainSplitter').on('collapsed', function (event) {
$(this).data('expanded',false);
//displayEvent(event);
});
$('#nestedSplitter').on('resize', function (event) {
//displayEvent(event);
});
$('#nestedSplitter').on('expanded', function (event) {
$(this).data('expanded',true);
//displayEvent(event);
});
$('#nestedSplitter').on('collapsed', function (event) {
$(this).data('expanded',false);
//displayEvent(event);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<link href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<input id="toggleSearchPane" type="button" value="Toggle Search Pane" />
<input id="toggleErrorLogPane" type="button" value="Toggle Error Log Pane" />
<br /><br />
<div id='jqxWidget'>
<div id="container-fluid" style="float: left; width: 100%; height: 100%;">
<div id="mainSplitter" data-expanded="true">
<div>
<div id="nestedSplitter" data-expanded="true">
<div id="searchPane">
Search Pane</div>
<div id="infoPane" style="overflow:auto;">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="panel panel-primary">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel1"> Panel1 <i class="chevron fa fa-fw" ></i></div>
<div class="panel-body" id="Panel1">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla </div>
</div>
<div class="panel panel-primary">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel2"> Panel2 <i class="chevron fa fa-fw" ></i></div>
<div class="panel-body" id="Panel2">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla </div>
</div>
<div class="panel panel-info">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel3"> Panel3 <i class="chevron fa fa-fw" ></i></div>
<div class="panel-body" id="Panel3">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla </div>
</div>
<div class="panel panel-default">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel4"> Panel4 <i class="chevron fa fa-fw" ></i></div>
<div class="panel-body" id="Panel4">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla </div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-info">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel5"> Panel5 <i class="chevron fa fa-fw" ></i></div>
<div class="panel-body" id="Panel5">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla </div>
</div>
<div class="panel panel-default">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel6"> Panel6 <i class="chevron fa fa-fw" ></i></div>
<div class="panel-body" id="Panel6">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="msgPane">
Messaging pane</div>
</div>
</div>
</div>
Is there a way in which I can have the same responsive behaviour inside a jqxsplitter when we resize the splitter. Any help will be appreciated. Thanks!!!