Color of Splitpanel splitter?

Vaadin 6 / 7 / 8 Framework UI
1

Hi all,
I could build a little page a Spiltpanel on it.
But now I do not have an idea how to make the splitter invisible?? Can someone help?

Here is the code (snippet):



public class ContactView extends SplitPanel implements ClickListener {

      public ContactView() {
        setOrientation(SplitPanel.ORIENTATION_HORIZONTAL);
        setHeight(Dimension.WORKBENCH_HEIGHT.getCode(), Sizeable.UNITS_PIXELS);
        setWidth(Dimension.TOTAL_WIDTH.getCode(), Sizeable.UNITS_PIXELS);
        setFirstComponent(new Label("left"));
        setSecondComponent(new Label("right"));
        setSplitPosition(Dimension.LEFT_NAV_WIDTH.getCode(), Sizeable.UNITS_PIXELS);
        setLocked(true);

    }
2

DId you notice that the Reindeer, Runo and Chameleon themes all provide a SPLITPANEL_SMALL style? That will make the splitter 1px wide, which could be enough.

If you really need to make it invisible, you can use a custom style name for it. Quick example (not tested, but should be close):

// JAVA

mySplitPanel.addStyleName("invisible");


// CSS, for vertical split panel (replace vsplitter with hsplitter for horizontal)

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

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

Yes, it really must be invisible.
But unfortunately your suggestion did not work. :frowning:
I tried with addStyleName and setStyleName, but there is no effect.
Plz help!

4

Did you rememeber to replace
vsplitter
 with
hsplitter
 in the CSS (as suggested in the comment). According to the code you provided you do have a SplitPanel with horizontal orientation.

  • Teemu
5

Yes, I tried with both - still no effect.

The CSS part looks like (at the moment):


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

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

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

Edit:
I also tried [code]

.v-splitpanel-first-container-invisible {
    background: red;
}

[/code] for testing - that worked perfectly, so the correct css file should be found.
confused

Edit2:
I think I could handle it via [code]

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

}

[/code]

6

Oh yeah, sorry, I forgot to mention that indeed if the SplitPanel is locked, you need that additional class as well.