Adjusting ComboBox Height & Disabling Expand Button

Vaadin 6 / 7 / 8 Framework UI
1

[size=5]
Hello,

Is there a way to increase the height of the combobox. I tried setHeight and it doesnt work. I have been looking around for a way to do this but have not found anything useful. Also is there a way to disable the button on the combobox. I want my combobox to look like a text field that provides suggestions as the user types something and need the field to be fairly large.
[/size]

2

I want the same thing; a component that looks like a text field that provides suggestions as the user types something. Typically I need a TextField with ComboBox-like behaviour or a ComboBox that looks like a TextField. And I like this component to be small so that it can be used as a generated column component without changing the table’s row height.

Is there sunch a thing?

/Anders

3

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!

4

Jouni Koivuviita, thanks for this perfect css code, it works perfectly and hides the button in combobox. But I have difficulties with changing the height of this component. Can you help me.
My css code is like this:

.v-filterselect-no-button {
background: transparent;
padding: 0;
height: 32px;
}

.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;        
    height: 32px;
}

but the actual height is not changing. I attached the snapshots.
14008.png
14009.png

5

Try changing the height of the .v-filterselect-input element instead of the root element:

   .v-filterselect-no-button {
        background: transparent;
        padding: 0;
        [s]
height: 32px;
[/s]
    }

    .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;
        [b]
height: 25px;
[/b]
        line-height: normal;
        padding: 3px 3px 4px !important;
    }
6

I have changed css as you said for example to 50px in .v-filterselect-input but it does not help
I have results which I attached
.v-filterselect-no-button {
background: #fff;
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: 50px;
    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;   
    height: 50px;
}

14010.png
14011.png