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%" }
            ]
        });

and my CSS :

<style>
    div#layout h2 {margin: 0;}

    div#layout .left, div#layout .right, div#layout .center, div#layout .footer, div#layout .header {
      color: #fff;
      background-color: #c7d1d6;
    }

    div#layout .left p, div#layout .right p, div#layout .center p, div#layout h3 {
      margin: 15px;
    }

   div#layout .footer, div#layout .header {padding:  5px 0 5px 0;}
   div#splitter {
        background-color: #c7d1d6;
    }
   div.panel1 {
        border: 1px solid #aaaaaa;        
    }
    div.panel2 {
        border: 1px solid #aaaaaa;         
    }
    .ui-igsplitter .ui-widget-content {
        background-color: #c7d1d6;          /* This indeed will change the splitter color, but background color may change when collapsing/expanding */
    }
</style>

Hello Bob M.

Did you accomplish that scenario? Do you need a help?

Regards,

Stanimir Todorov

Okay, sure Stanimir.

Please visit http://www.bobmazzo.com/temp/ and you'll see Margins_copy.cshtml.

thanks !

Bob

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

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 !

Bob

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;
}