Scrollbar is hidden

[narnoneParticipant]

I have a project that I utilize jqxSplitter. I have released previous versions and it has worked great.
I have a big release ready to go out and found the Splitter is having an issue.
I used an example you have up, and the splitter works as I believe it should. However, on my project it does not.
Example: https://hlsm.com/jqwidgets/jq_tests/splitter/splitter_Data.htm
The issue is the scrollbar.
In the example I have a “divLeftPanel” and a child tag “LeftPanelHolder”.
There is a div “HoldLeftPanelStuff” that holds a number of children.
The divLeftPanel and LeftPanelHolder have a height of 390
The HoldLeftPanelStuff has a height of 2400.
If I set divLeftPanel and/or LeftPanelHolder to overflow: auto I have the vertical scrollbar. It moves with the splitter.
Workd as it should.
In my project, If I set LeftPanelHolder to overflow: auto, it works fine.
If I remove overflow: auto from LeftPanelHolder set divLeftPanel to overflow: auto, and refresh the page, the splitter bar (jqx-splitter-splitbar-vertical) on the right over laps the scrollbar. The scrollbar cannot be seen or accessed. It’s there. In developer I can see the scrollbar, it’s under the splitter bar. In fact, if I adjust the left attribute of the splitter bar and the jqx-widget-content, it will show the scrollbar.
If I set LeftPanelHolder to overflow: auto and refresh, I see the scrollbar. If I remove it in developer, it is still in view until I move the splitter bar, then it under the splitter bar.
I would like to release this version. I understand I have a work around, but something is not right. Is there a setting I have missed?

[svetoslav_borislavovParticipant]

Hi,

Please, give me an example with code so I can work with it.
I will be waiting for you sample

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[narnoneParticipant]

This is a test site you can view: https://partsfinder.onlinemicrofiche.com/hlsm/showmodel.asp?type=13&make=harleydavidsonmc&a=1366
Select Tab “Parts Diagram”
It’s the left panel, id = svHLSM_Splitter_Sections
In developer mode, you can highlight the div and see the scrollbar is hidden by the splitter bar.
If you set id= svHLSM_Splitter_Sections_html, which is a child, to overflow: auto and height: 100% and then MOVE the splitter bar, the scrollbar will appear.

[ivanpeevskiParticipant]

Hi narnone,

Thanks for the example. In your project -> sections.min.js, function fn_set_container_height_widths,
you should replace:
document.getElementById('svHLSM_Splitter_Sections').style.overflow = 'auto';
with
document.getElementById('svHLSM_Splitter_Sections').style.overflow = 'overlay';

This should fix the issue.
Best regards,
Ivan Peevski

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts