splitpanel splitter hiding

hai, i am new to vaadin. I want a help on splitpanel divider hiding. I tryied the following but it doesn’t work.

.v-splitpanel-vsplitter-invisible {
width: 0;
background: transparent;
}

.v-splitpanel-vsplitter-invisible div {
width: 0;
margin: 0;
background: transparent;
}
.v-splitpanel-hsplitter-invisible {
width: 0;
background: transparent;
}

.v-splitpanel-hsplitter-invisible div {
width: 0;
margin: 0;
background: transparent;
}

.v-splitpanel-hsplitter-invisible, .v-splitpanel-hsplitter-invisible-locked
{
width: 0px;
background: transparent;

}

Please help me.

If you just want to hide the splitter but let the mouse react to it :


.v-app .invisible .v-splitpanel-vsplitter div{
 background:none;
}

If you want to remove it entirely :


.v-app .invisible .v-splitpanel-vsplitter div{
 display:none;
}

(of course you need to add the style “invisible” to the splitter)

hai Mathias Clerc, thanks for responding.

I tryied the above one, it is working but it hide the entire SplitPanel. It doesn’t display any components in the SplitPanel. I want to hide only divider in the SplitPanel.

this is my code

style.css

.v-splitpanel-hsplitter-invisible,
.v-splitpanel-vsplitter-invisible div{

/* width: 0px; /
/
background:none; */
display:none;

}

java

SplitPanel split = new SplitPanel(SplitPanel.ORIENTATION_HORIZONTAL);

	split.addStyleName("invisible");
	split.setSplitPosition(200,SplitPanel.UNITS_PIXELS);

plese respond it.
thanks in advance.

With : .v-splitpanel-hsplitter-invisible, .v-splitpanel-vsplitter-invisible div
you are asking the CSS to be applied on the root of the splitter… which as you can see won’t work as it is not selecting the right element. Use the selectors I have given.

hai Mathias Clerc,

I used the selectors above u have given, but those r not working, it doesn’t hide anything and it display normally.

In
this
other thread I made a test with an HorizontalSplitPanel as I had a few minutes to test it.

I have tested successfully those selectors (as well as a few others) :

.v-app .v-splitpanel-hsplitter-invisible div{
display:none;
}
.v-app .v-splitpanel-hsplitter-invisible{
background-image:none;
background-color:transparent;
border:0px;
}

Thanks Clerc, It is working fine. Thank You.

Hi! First, I want to add something. If you’ve locked the splitPanel, and you still want to hide the splitter, you should write:


//css
.invisible .v-splitpanel-hsplitter-locked div{
    display:none;
}

Otherwise it won’t work, I don’t really get why. I mean, if I set something for the whole spliPanel, why shouldn’t it apply to it when it’s locked? After all, beeing locked it’s just a state of the panel, it doesn’t turn it into a different component.

And now a cuestion, out of curiosity, why sometimes you write .v-app?? (like in .v-app .v-splitpanel-hsplitter-invisible{). I have tried the code with and without it, getting the same result. So, why do you put it there?

The component may be same but the css classes attached to it are not, so the selector does not work anymore.

For the reason of the .v-app is that you need a more specific CSS selector in your theme in order to override an existing style.
For instance if in the base theme (let’s say reindeer) you have :

.someClass{
  color:blue;
}

And you write in your theme :

.someClass{
  color:yellow;
}

The text will stay blue because reindeer is applied first and your selector is not any more specific than the original.

Now the base themes never use the .v-app selector and .v-app is always present in a vaadin application.
So in order not to try to guess whether or not your CSS will be applied and spend time debugging to know why only part of it was applied, I find it easier to prefix everything by .v-app.

.v-app .someClass{
  color:yellow;
}

Will make the text yellow even in the previous case.

Got it, thanks.
I’ve just found another difference. When .v-app is used, the settings don’t affect subwindows, while they do affect them when .v-app isn’t added.