Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Adjusting ComboBox Height & Disabling Expand Button

k ganes
1 decade ago Mar 18, 2010 5:54pm
Anders Peterson
9 years ago May 04, 2012 7:49am
Jouni Koivuviita
9 years ago May 04, 2012 9:07am

Hi,

Currently you will need to adjust the CSS for the component directly. Not a fun thing to do, if you're using the Reindeer theme, since it consists of multiple images. Here's some CSS to get you started (not tested):

// Java
combobox.addStyleName("no-button");

// CSS
.v-filterselect-no-button {
  background: transparent;
  padding: 0;
}

.v-filterselect-no-button .v-filterselect-input {
  background: #fff;
  border: 1px solid #bcbdbe;
  border-top-color: #a2a3a4;
  border-bottom-color: #d2d3d4;
  background: #fff;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin: 0;
  height: 15px;
  line-height: normal;
  padding: 3px 3px 4px !important;
}

.v-filterselect-no-button .v-filterselect-button {
  display: none;
}

.v-filterselect-no-button.v-filterselect-focus .v-filterselect-input,
.v-filterselect-no-button .v-filterselect-input:focus {
  border-color: #5b97d0;
  border-top-color: #4f83b4;
  border-bottom-color: #5ca0df;
}

You could tweak the height of the component there as well by adjusting the height and padding.

Hope this helps!

Last updated on May, 4th 2012
Alex Bond
7 years ago May 20, 2014 5:59am
Jouni Koivuviita
7 years ago May 20, 2014 6:42am
Alex Bond
7 years ago May 20, 2014 7:18am