diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index d8a96ab78e..0a7698e8bd 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -22,11 +22,9 @@
 <div content="jquery-wrapper" class="abs holder-all browse-mode">
     <mct-include key="'topbar-browse'"></mct-include>
     <div class="holder browse-area s-browse-area abs" ng-controller="BrowseController">
-        <mct-split-pane class='split-layout vertical contents abs'
-                        anchor='left'
-                        initial="25%">
+        <mct-split-pane class='contents abs' anchor='left'>
             <div class='split-pane-component treeview pane'
-                 style="min-width: 150px; max-width: 800px;">
+                 style="min-width: 150px; max-width: 800px; width: 25%;">
                 <mct-representation key="'create-button'" mct-object="navigatedObject">
                 </mct-representation>
                 <div class='holder tree-holder abs'>
diff --git a/platform/commonUI/general/src/directives/MCTSplitPane.js b/platform/commonUI/general/src/directives/MCTSplitPane.js
index c53f50947b..fff3d095c8 100644
--- a/platform/commonUI/general/src/directives/MCTSplitPane.js
+++ b/platform/commonUI/general/src/directives/MCTSplitPane.js
@@ -72,8 +72,6 @@ define(
          * Implements `mct-split-pane` directive.
          *
          * This takes the following attributes:
-         * * `initial`: Initial positioning to use, as a plain string.
-         *   For example, "30%"
          * * `position`: Two-way bound scope variable which will contain
          *   the pixel position of the splitter, offset from the appropriate
          *   edge.
@@ -106,7 +104,7 @@ define(
             function controller($scope, $element, $attrs) {
                 var anchorKey = $attrs.anchor || DEFAULT_ANCHOR,
                     anchor,
-                    styleValue = $attrs.initial,
+                    styleValue,
                     positionParsed = $parse($attrs.position),
                     position; // Start undefined, until explicitly set
 
@@ -133,11 +131,13 @@ define(
                         firstSize;
 
                     first.css(anchor.edge, "0px");
-                    first.css(anchor.dimension, styleValue);
+                    if (styleValue !== undefined) {
+                        first.css(anchor.dimension, styleValue);
+                    }
 
                     // Get actual size (to obey min-width etc.)
                     firstSize = getSize(first[0]);
-
+                    first.css(anchor.dimension, firstSize);
                     splitter.css(anchor.edge, firstSize);
 
                     last.css(anchor.edge, calcSum(firstSize, splitterSize));
@@ -191,6 +191,9 @@ define(
 
                 $scope.$watch($attrs.position, getSetPosition);
 
+                $element.addClass("split-layout");
+                $element.addClass(anchor.orientation);
+
                 // Initialize positions
                 updateElementPositions();
 
@@ -207,7 +210,7 @@ define(
                 // Restrict to attributes
                 restrict: "E",
                 // Expose its controller
-                controller: controller
+                controller: ['$scope', '$element', '$attrs', controller]
             };
         }