Breaking changes since 1.5.1

[radiantone]

Hi,
This is just a heads up that we had to revert to version 1.5.1 as recent changes have caused some layout and rendering issues in our tool. We have a boostrap/css app with tabs and multiple splits (e.g. a vertical split, then the top region has a horizontal split). With the latest release (and maybe a couple behind that) the split bar inside the second tab (not shown initially) did not render (no grab bar). In another tool, the component inside a split div did not consume all the space as it did before.

Sorry I do not have specifics yet, but will dig deeper and post them here. Thanks for an awesome library!

[nathancahill]

To clarify, it's working in 1.5.1?

[radiantone]

Yes

[nathancahill]

Were you able to try with any other versions, 1.5.2, 1.5.3, 1.5.4, 1.5.5, 1.5.6, 1.5.7 to try to pinpoint the breaking change?

[nathancahill]

ie.. if 1.5.2 breaks, that narrows down the issue.

[radiantone]

I tried a couple others but let me try 1.5.2

[radiantone]

Actually, after some more study, it looks like only 1.5.7 breaks our app.

[nathancahill]

Great, thanks for taking the time to test that. It's very helpful. I believe I know what the issue is. Does this only happen in the tab that isn't initially shown?

[radiantone]

It seems so. Yes.

[nathancahill]

Thanks. It looks like I caused a conflict with Bootstrap tabs. Before you change to that tab, can type in the browser console:

document.querySelector('#view-1').parentElement.clientWidth

Where #view-1 is one of the elements in the split in the tab?

[radiantone]

document.querySelector('#aipane2').parentElement.clientWidth
0

[nathancahill]

Perfect, that's what I was expecting. Fix coming soon!

[nathancahill]

Please try the latest release, 1.5.9. This should fix the issue.

[UmangThapliyal]

Hello, i am facing the same issue, I have tried 1.5.9 also

[radiantone]

That botched the visible tab now.

[UmangThapliyal]

I faced the same issue and when i moved back to previous version it gets fixed

[nathancahill]

@radiantone is there a chance you could share the code that shows this issue? Or @UmangThapliyal?

[radiantone]

It's just normal split calls, but the divs live inside bootstrap 3 layouts

var sidebar = Split(['#sidebar', '#workspace'], {
sizes: [30, 70],
direction: 'horizontal'
});
var codebars = Split(['#jscode', '#htmlcode'], {
sizes: [50, 50],
direction: 'horizontal'
});
Split(['#aipane1', '#aipane2'], {
sizes: [50, 50],
direction: 'horizontal'
});
Split(['#aipanetop', '#aipanebottom'], {
sizes: [65, 35],
direction: 'vertical'
});
Split(['#lingpanetop', '#lingpanebottom'], {
sizes: [65, 35],
direction: 'vertical'
});
Split(['#coderegion', '#previewregion'], {
sizes: [55, 45],
direction: 'vertical'
});
Split(['#pagecoderegion', '#pageframe'], {
sizes: [50, 50],
direction: 'vertical'
});

[nathancahill]

Right, can you share the relevant Bootstrap layout? That's the part that seems to be conflicting.

[radiantone]

Here's the relevant top portion of the markup.

<div id="workspace" class="split split-horizontal">
    <div class="tab-content" style="margin-top:-35px;height:-webkit-calc(100% - 125px)">
        <div class="tab-pane fade in active" id="projectone">
            <br>
            <div class="container-fluid" style="margin:10px;height:-webkit-calc(100% );">
                <BR>
                <div id="coderegion" class="split split-vertical" style="height:350px;overflow:hidden" >
                    <div id="jscode" class="split split-horizontal" style="overflow:hidden">
                        <div id="codeeditor"
                             style="border-style: solid;border-width: 1px;border-color:lightgray;width:100%;height:-webkit-calc(100% - 20px)"></div>
                        <a class=" pull-right" data-toggle="button" title="Collapse" id="collapseleft" aria-pressed="false" autocomplete="off"
           role="button" style="margin:3px"><i class="fas fa-arrow-circle-left fa-lg "></i></a>
                        <h5 style="margin:0px">JavaScript</h5>
                    </div>
                    <div id="htmlcode" class="split split-horizontal" style="overflow:hidden">
                        <div id="htmleditor"
                             style="border-style: solid;border-width: 1px;border-color:lightgray;width:100%;height:-webkit-calc(100% - 20px)"></div>
                        <a class=" pull-left" data-toggle="button" title="Collapse" id="collapseright" aria-pressed="false" autocomplete="off"
           role="button" style="margin:3px"><i class="fas fa-arrow-circle-right fa-lg "></i></a>
                        <h5 style="margin:0px" class="pull-right">HTML</h5>
                    </div>
                    <br>
                </div>

                <iframe id="previewregion" class="split split-vertical" width="100%"
                        style="border-style: solid;border-width: 1px;border-color:lightgray;background-color: white;margin-bottom:-20px">
                </iframe>

[nathancahill]

Ok, a better way might be to take a screenshot of the Styles inspector in the debugger. Both of the parent element and one of the split elements. Thanks!

[radiantone]

Here is one shot of working 1.5.6 and one of 1.5.9 (which has no gutters even).

[nathancahill]

Very helpful. Are there any errors in the console?

[radiantone]

Refused to execute script from 'https://unpkg.com/split.js@1.5.9/split.min.js' because its MIME type ('text/plain')

Oh, I see. there is a directory change here. Let me edit and try again.

[radiantone]

Ok, things are working now in 1.5.9. Thank you

[nathancahill]

Great. Updated the URL in the readme too. @UmangThapliyal does that solve your problem too?

https://unpkg.com/split.js/dist/split.min.js

[nathancahill]

Closing this for now. @UmangThapliyal if you have another issue please open another issue.

[UmangThapliyal]

Thanks,
Will check and see if face the issue