When I use the horizontal igSplitter, the right button is not positioned correctly on the splitter bar. Instead, the right collapse button is a few pixels up. Also the right collapse button cannot be clicked. And although the left collapse button is in the correct position, it can only be clicked in a very specific sliver.
This same thing happens if I make any of my several igSplitters horizontal.
Any ideas?
Hi Ryan Melendez,
It sounds like some css layout issue. I have to inspect the styles of the whole page to see which of them influence the styles of the splitter. Could you please send us isolated working sample where we can observe the issue and will be able to investigate it?
I don't think I can send a working sample at this moment. But, I can give more information about the problem.
I, too, believe that the problem is css related. The infragistics.css file that I'm using matches this one:
http://cdn-na.infragistics.com/igniteui/2016.1/latest/css/structure/infragistics.css
And, there is also a 44 line infragistics.ui.splitter.css file which consists of the 44 line splitter section of the infragistics.css file.
By editing these two files at the time I was able to get to right collapse button to be correctly positioned on the splitter bar.
I changed the following code in both files:
.ui-igsplitter-collapse-button-horizontal-left{margin-left:-33px;margin-top:-1px}.ui-igsplitter-collapse-button-horizontal-right{margin-left:11px;margin-top:-6px}
If I change the "margin-top" in the second line from "-6px" to "-4px" then both collapse buttons will be correctly positioned on the splitter bar. But, if these changes are made then neither collapse button can be clicked at all. I tried to further fix the problem by editing these two lines:
.touch .ui-igsplitter-collapse-button-horizontal-left{margin-left:-66px}.touch .ui-igsplitter-collapse-button-horizontal-right{margin-left:22px;margin-top:-18px}
But, after trying numerous variations of edits I could not make the collapse buttons clickable.
Does this help solve the problem?
As I understand you have layout issue with the splitter form the beginning of the usage of it. And now you try to adjust the buttons.
First, I should not have layout issues with the splitter. If you do, then something in your styling is wrong, not in the splitter.
And second, I think you have to solve this issue that causes the broken layout instead of fixing its consensuses. That means to look for some styles that overrides the styles of the splitter, using web tool developer of the browser. Or to send us sample working sample to demonstrate the issue.
I'm sending small working sample to demonstrate that splitter layout is OK and how sample should look like. If you cannot isolate the issue and send it to us, how can we even reproduce and investigate it?
The sent information is insufficient and we cannot solve the problem based on it.