Valo Theme Issue: Indeterminate State of Tri-State Checkbox Does Not Show U

Hi,

I developed a widget set with a tri-state checkbox following the guide in the Vaadin 7 cookbook:
http://books.google.de/books?id=0IS3worpD44C&pg=PT223&lpg=PT223&dq=vaadin+7+tri-state+checkbox&source=bl&ots=aF-oB9HzOx&sig=VINiAZ-DpXI9QvFOSB7K2_p2pBk&hl=de&sa=X&ei=hM5ZVOn-D9fiaoaWgMAE&ved=0CEAQ6AEwAw

The checkbox has three states: Checked, unchecked and indeterminate . The indeterminate state is set by a native javascript call.
Without Valo, the checkbox behaves as expected. However, when applying the Valo theme on my application, the indeterminate state is set on the server side, but never shown in the browser.

Please find attached an Eclipse project containing the example source code of the tri-state checkbox.

Is there a good practice / workaround to override the behaviour of the Valo theme for checkboxes?

Cheers,
Julia
17133.zip (377 KB)

Hey Julia,

If you add
setPrimaryStyleName("
something-about-tristate
");
in TriStateCheckbox it should work. :slight_smile: Valo hides (or clips) the
native
checkbox input. The checkbox that you see on-screen is created in the pseudo-elements of the label.

Moreover, Valo uses :after element to theme the look of the checkbox input. The native checkbox is hidden as Joacim said. You could use that with the :indeterminate selector to style your checkbox for indeterminate state. Like this:

.v-checkbox > input:indeterminate ~ label:after {
      color: $v-selection-color;
      content: "\f068";
}

Thanks for your help. Your proposed solutions work for me.