hello,
I have the following splitter and have two issues:
$("#splitter").igSplitter({ height: "610px", orientation: 'vertical', panels: [ { collapsible: true, size: "50%" }, { collapsible: true, size: "30%" } ] });
1) I can't seem to change the default "white" color of the splitter, so I wrapped a <div> around it with my own color. Except that if I collapse the right panel, the splitter color defaults back to white. It also goes to white if I resize my browser window (left to right, or right to left).
2) I often lose the collapse/expand icon when collapsing the right panel. if I then widen my browser window, the icon shows up ! Then of course my right panel goes white again !
Is some styling that someone can guide me through to override the default WHITE in the panels ?
Does the fact that I'm putting the splitter INSIDE an igLayout div have something to do with this ?
For example, here's an outline of my markup
<div id="layout" style="width:100%; height: 620px;"> <div class="left"> SOME TEXT HERE </div> <div class="right"> SOME TEXT HERE </div> <div class="header" >Razor Configuration</div> <div class="footer" >Razor Configuration</div>
<div class="center"> <div id="splitter"> <div class="panel1" > <!-- add a div here to get control of the color -->
<!-- A BUNCH OF HTML ELEMENTS HERE... -->
</div>
thank you.
Bob
Hello Bob,
Thanks for using Infragistics Controls!
In order to change splitter control just change ui-widget-content class:
.ui-igsplitter .ui-widget-content { background-color: red; }
ui-igsplitter is added to be changed only for splitter control instances.
Would you provide splitter configuration for second scenario? Thanks in advance.
Regards,
Stanimir Todorov
Hello Stanimir,
Thanks for your reponse.
It turns out that this CSS setting solved my first problem, and I no longer see the white color when collapsing/expanding the splitter panels :
div#splitter { background-color: #c7d1d6; }
this makes does in fact set the splitter's color, but if I remove the div#splitter css above and just use this, I still get white color once in a while) :
.ui-igsplitter .ui-widget-content { background-color: #c7d1d6; }
Here's my script code - and maybe the layout manager has something to do with it :
$('#layout').igLayoutManager({ layoutMode: "border", borderLayout: { leftWidth: "10%", rightWidth: "15%" } });
$("#splitter").igSplitter({ height: "610px", orientation: 'vertical', imageClass: "ui-igsplitter-collapse-button-hover ", panels: [ { collapsible: true, size: "50%" }, { collapsible: true, size: "30%" } ] });
Yes the problem comes from layout manager.
Add this to fix disappearing of the splitter button:
.ui-igsplitter { position: relative; }
And that will fix the problem with color when collapsing/expaning:
.ui-widget-content { background-color: #c7d1d6!important; }
Hi again,
I'm sorry to keep bothering you.
So I have the css code as you suggested, but I still lose the Splitter Icon sometimes:
.ui-igsplitter .ui-widget-content { background-color: #c7d1d6; } .ui-igsplitter {position: relative;}
I think the igLayoutManager is also skewing my page a bit. Look at the horizontal scroll bar at the bottom.
I wonder why what's happening. As if the layout manager is automatically widening the whole page for some reason. I would need more control over that.
See screen shot below of 1) the magical disappearing splitter icon, 2) the very wide page with scroll bar.
I can't figure out how to attach an image to this post, so I put it up on my personal website (not a virus):
www.bobmazzo.com/temp/splitter_stuff.jpg
thanks a million !
Perhaps, there are some CSS rules that might break the layout.
Would you send me a link to the app in order to debug it? Or sample with that.
Stanimir
Okay, sure Stanimir.
Please visit http://www.bobmazzo.com/temp/ and you'll see Margins_copy.cshtml.
thanks !
Hello Bob M.
Did you accomplish that scenario? Do you need a help?