Enterprise: Splitter: Not working with two vertical splitters

[Fruko]

Describe the bug
If two vertical splitters are used to make left and right sidebars. They do not work correctly.
Right panel is missing "expand" button even though collapseButton is set to true

Splitters ignore width property set via inline style making the right splitter hide the content in the middle

To Reproduce
Steps to reproduce the behavior:

1. Go to ids-enterprise-ng demo app
2. Click on splitter vertical part
3. Use this html

<div>
  <div class="sidebar scrollable" style="width: 300px">
    <h1>left</h1>
    <soho-splitter [isSplitterRight]="true" [collapseButton]="true" [save]="false"></soho-splitter>
  </div>

  <div class="scrollable-area no-scroll" style="width: 60%">
    <div soho-datagrid></div>
  </div>

  <div class="sidebar scrollable" style="width: 300px">
    <h1>right</h1>
    <soho-splitter [isSplitterRight]="false" [collapseButton]="true" [save]="false"></soho-splitter>
  </div>
</div>

1. See error

Expected behavior
Both left and right splitters would have expand/collapse button defined as per configuration
Both left and right splitters would respect inline width property

Version

• ids-enterprise-ng: 5.5.1

Screenshots

[tmcconechy]

We only support one directional splitter per page (or at least thats all we ever tested and had a use case for). So i think the problem is that you have two vertical splitters. From a design standpoint splitters had a lot of push back in use.

We would have to add support for this, so this is both a feature and a bug id say.

[tmcconechy]

Descoping some older issues we wont be able to get to. But its possible this might work in 5.0 and we can revisit this when thats done.

[whernebrink]

@tmcconechy, @EdwardCoyle.

This would be great for us (M3) to have. Currently (our product/tool is not live for atleast a good while) we have added angular material sidenav (which is not optimal for us since we'd like to have the drag to resize functionality, which the angular sidenav currently does not have).

Angular material Sidenav: https://material.angular.io/components/sidenav/overview
Example stackblitz two sidenavs: https://stackblitz.com/edit/angular-wvwgsh?file=src/app/sidenav-position-example.html

Current implementation in our tool (sidenav to the left, with option to also have one to the right):

If we are not able to have the soho-splitter to support multiple, we'd have to go with another solution. A third party lib e.g. https://angular-split.github.io/ Main downside with that is that it is a third party lib, which potentially could be discoutinued.

If we are able to use the future web-components and all other soho-* at the same time (?), we could wait (given that it could be pushed forward - asuming it is not among the most prioritized components) for the splitter being converted to the web-component with the needed features. Or, if you are planning to have more of a "layout-component", like the angular material sidenav (but with resizeable drawers/sidebars), that could also be something for us to wait for.

How do you guys think we should proceed?

[tmcconechy]

I think this is an entire rewrite. So when we redo the web component i was going to make sure nesting was possible.
With the older code it isnt really feasible. And they should be usable side by side when thats done.

[whernebrink]

@tmcconechy With the new web components, we are able to use them and ids-enterprise-ng both together, right? Do you have an initial schedule for the convertion to web components? If not, would the splitter be started on this year you think?

[tmcconechy]

Yes they should work side by side. We didnt test it as much as we should yet but its been working on the ones we tests. Somethings might not work tho. The new stuff is flexible but the problem is the old stuff. For example if you tried to use both the old and the new splitter side by side i think that would have an issue.

This one might be problematic as it really needs a full page container....Will have to test the side by side cases further and work through those cases but it is a requirement

I made https://github.com/infor-design/enterprise/issues/5142 for it. I think "this year" is feasible.