I have a splitter that I need to hide or show based on certain conditions. I'm using angular's ng-show to hide and show the div containing the splitter.
If the window is resized while the splitter div is hidden, showing the div results in a 0 width first column.
I have seen similar issues on the forums that suggest triggering a resize on the splitter, but it doesn't work the way I'm trying to do it. I suspect that the resize is being triggered before the splitter is actually shown, but I'm not sure where else to put the resize trigger.
Sample code reproducing the issue is below.
Thanks!
<!DOCTYPE html>
<html>
<head>
<title>AngularJS</title>
<meta charset="utf-8">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.716/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
<script>
</script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl" style="width: 100%;">
<h1>How can I trigger a splitter resize when ng-show makes the div visible?</h1>
<h3>Calling $scope.mainSplitter.trigger("resize") when setting the visibility boolean doesn't work...</h3>
<h4>
<ol>
<li>Click the button to hide the splitter.</li>
<li>Resize the window.</li>
<li>Click the button to show the splitter. First column has zero width.</li>
<li>Resize the window again and observe the splitter resize.</li>
</ol>
</h4>
<button ng-click="toggleVisible()">{{buttonText}}</button>
<div class="box-col" style="width: 100%;" ng-show="isSplitterVisible">
<div kendo-splitter="mainSplitter"
k-panes="[ { size: '100px' }, null]"
k-orientation="horizontal">
<div>
<p>Pane 1</p>
</div>
<div>
<p>Pane 2</p>
</div>
</div>
</div>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ]);
function MyCtrl($scope) {
$scope.isSplitterVisible = true;
$scope.buttonText = "Hide Splitter";
$scope.toggleVisible = function()
{
$scope.isSplitterVisible = !$scope.isSplitterVisible;
if ($scope.isSplitterVisible){
// Splitter is visible. Try to trigger a resize
$scope.mainSplitter.trigger("resize");
// Change the button text
$scope.buttonText = "Hide Splitter";
}
else{
// Change the button text
$scope.buttonText = "Show Splitter";
}
}
}
</script>
</body>
</html>
If the window is resized while the splitter div is hidden, showing the div results in a 0 width first column.
I have seen similar issues on the forums that suggest triggering a resize on the splitter, but it doesn't work the way I'm trying to do it. I suspect that the resize is being triggered before the splitter is actually shown, but I'm not sure where else to put the resize trigger.
Sample code reproducing the issue is below.
Thanks!
<!DOCTYPE html>
<html>
<head>
<title>AngularJS</title>
<meta charset="utf-8">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.716/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
<script>
</script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl" style="width: 100%;">
<h1>How can I trigger a splitter resize when ng-show makes the div visible?</h1>
<h3>Calling $scope.mainSplitter.trigger("resize") when setting the visibility boolean doesn't work...</h3>
<h4>
<ol>
<li>Click the button to hide the splitter.</li>
<li>Resize the window.</li>
<li>Click the button to show the splitter. First column has zero width.</li>
<li>Resize the window again and observe the splitter resize.</li>
</ol>
</h4>
<button ng-click="toggleVisible()">{{buttonText}}</button>
<div class="box-col" style="width: 100%;" ng-show="isSplitterVisible">
<div kendo-splitter="mainSplitter"
k-panes="[ { size: '100px' }, null]"
k-orientation="horizontal">
<div>
<p>Pane 1</p>
</div>
<div>
<p>Pane 2</p>
</div>
</div>
</div>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ]);
function MyCtrl($scope) {
$scope.isSplitterVisible = true;
$scope.buttonText = "Hide Splitter";
$scope.toggleVisible = function()
{
$scope.isSplitterVisible = !$scope.isSplitterVisible;
if ($scope.isSplitterVisible){
// Splitter is visible. Try to trigger a resize
$scope.mainSplitter.trigger("resize");
// Change the button text
$scope.buttonText = "Hide Splitter";
}
else{
// Change the button text
$scope.buttonText = "Show Splitter";
}
}
}
</script>
</body>
</html>
3 Answers, 1 is accepted
0
Jon
Top achievements
Rank 1
Rank 1
answered on 02 Sep 2014, 07:30 AM
I worked around the issue in my particular case by using nested $state with ui-router, rather than using ng-show or ng-hide. The splitter is in a different substate, and using $state.go works fine, as the div with the splitter is never hidden.
But I'd still be interested in the best way to resize after ng-show / ng-hide takes effect for future reference.
Thanks!
But I'd still be interested in the best way to resize after ng-show / ng-hide takes effect for future reference.
Thanks!
0
Hello Jon,
I believe that in this case, you can use a $watch on the condition and resize the splitter with a $timeout -- because the $watch listener is executed before the ng-show directive shows the element. Here is a Dojo snippet that shows this approach. Please note that Dojo snippets can be shared -- when you start editing them, they are saved and get an unique URL.
Regards,
Alex Gyoshev
Telerik
I believe that in this case, you can use a $watch on the condition and resize the splitter with a $timeout -- because the $watch listener is executed before the ng-show directive shows the element. Here is a Dojo snippet that shows this approach. Please note that Dojo snippets can be shared -- when you start editing them, they are saved and get an unique URL.
Regards,
Alex Gyoshev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jon
Top achievements
Rank 1
Rank 1
answered on 03 Sep 2014, 03:57 AM
That's perfect, thanks!