Any chance to have two columns in dropdown?

[q2apro]

Instead of one long div that displays a scrollbar, I would like to have 7 elements down plus to the right 7 more elements.

Can this be achieved with the recent version v1.6.7 of selectric?

[lcdsantos]

It's possible...

$('select').selectric({
  maxHeight: 1000, // if you dont want scrollbars...
  optionsItemBuilder: '<span>{text}</span>' // append a span inside each LI for padding later, or use box-sizing
});

.selectricItems li {
  display: block;
  border-top: 1px solid #FFF;
  border-bottom: 1px solid #EEE;
  color: #666;
  cursor: pointer;
  width: 50%;
  float: left;
  padding: 0; /* remove padding, unless you're using box-sizing */
}

.selectricItems li span {
  display: block;
  padding: 5px;
}

[q2apro]

Thanks for your fast reply. I tested your CSS, it works if i do it like so:

.selectricItems li {
    display: block;
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #EEE;
    color: #666;
    cursor: pointer;
    width: 45%;
    float: left;
    padding: 0;
}

Setting a width of 50% did not work. 45 % works.

Plus I had to make the wrapper bigger:

.selectricWrapper {
    width: 245px;
}

But it makes the entire dropdown bar big. I tried to set this width to the <ul> element, but then a vertical scroll bar appears.

Thanks again! Kai

[sudhir1216]

onload can we give selected to n-th child option