core splitter does not resize the height of the area below the splitter

[AnjaGer]

The core splitter does not resize the height of the area below the splitter. As a consequence, if the horizontal splitter is moved up, some kind of blank area appears. We have the following coding proposal for core_elements/src/core-splitter/core-splitter.html,

Original: track: function(e) { if (this.locked) { return; } var d = e[this.horizontal ? 'dy' : 'dx']; this.target.style[this.dimension] = this.size + (this.isNext ? -d : d) + 'px'; }

Changed: track: function(e) { if (this.locked) { return; } var d = e[this.horizontal ? 'dy' : 'dx']; if(this.horizontal == false){ //for vertical case this.previousElementSibling.style[this.dimension] = this.size + d + 'px'; this.style["left"] = this.size + d + 'px'; this.nextElementSibling.style["left"] = this.size + d + 12 + 'px'; this.nextElementSibling.style[this.dimension] = this.parentNode.offsetWidth - (this.size + d + 12) + 'px'; }else{ //for horizontal case this.previousElementSibling.style[this.dimension] = this.size + d + 'px'; this.nextElementSibling.style[this.dimension] = this.parentNode.offsetHeight - (this.size + d ) + 'px';
} }

If you need a screenshot or some other information, please come back to me.

[frankiefu]

If you put core-splitter inside an element that is vertical layout and make the bottom area flex, then the area below the splitter will auto resize.

<div vertical layout>
  <div>top area</div>
  <core-splitter direction="up"></core-splitter>
  <div flex>bottom area</div>
</div>

jsbin: http://jsbin.com/kumurefe/1/edit

[AnjaGer]

the problem with flex is that the content in the flexbox is not properly resized when the parent container is changed: e.g. <div flex> <div id=container style="height: 100%"> <my-polymer-element>...</my-polymer-element> </div> </div>

We have problems getting the element inside the container to heigth=100%, when the splitter is resized.

[frankiefu]

flex doesn't make the element a flexbox. You can learn more about layout attributes here: http://www.polymer-project.org/docs/polymer/layout-attrs.html

I think what you want is something like this:

<div flex vertical layout>
  <div id=container flex>
    <my-polymer-element>...</my-polymer-element>
  </div>
</div>

http://jsbin.com/kumurefe/2/edit

[frankiefu]

Please reopen if you think it is still an issue.