Selectize.js: Input height jumps.

[notflip]

In my example the height of the element jumps open. Is this because the input is to long and i'm limiting the width?

[davidpanzarella]

I had this issue too. What i did for a fix was adding this to my CSS:
.selectize-input div.item + input { display: none; }

HTH

[i5okie]

that doesn't fix it.. it hides the input field, so ... can't add more tags.

[i5okie]

I use Foundation, and with default css set, here is the fix that worked for me:

.selectize-input div.item + input { display: inline-block; }

[jclusso]

I'm using foundation and whenever there is nothing selected field becomes very tall. (54px). Once something is selected the field height goes to normal. Anyone figure this out? Pretty certain it's something related to foundation. The above fixed the issue when the input had stuff selected.

[kevincobain2000]

:+1: @davidpanzarella Fixed it

.selectize-input div.item + input { display: none; }

[davidtheclark]

Looks like this may be a duplicate of https://github.com/brianreavis/selectize.js/issues/235 ?

[jclusso]

I believe I resolved it with that actually.

On Tuesday, March 25, 2014, David Clark [email protected] wrote:

Looks like this may be a duplicate of #235https://github.com/brianreavis/selectize.js/issues/235?

Reply to this email directly or view it on GitHubhttps://github.com/brianreavis/selectize.js/issues/255#issuecomment-38588375
.

_Jarrett Lusso_
[email protected]
516.828.1627 - direct
855.876.5533 x700 - toll-free
http://www.graphicflash.com/
100 Crossways Park Dr. West
Suite 217
Woodbury, New York 11797
http://www.graphicflash.com

[robertd]

@i5okie I also had to set .selectize-input input { height: 20px; } in addtion to .selectize-input div.item + input { display: inline-block; }

[nrw]

the code last posted by @robertd solved this problem for me.

[robertd]

:+1:

[wolfgang-demeter]

Thanks for the tips :+1:. I went a little further and now use the following code to adjust selectize.css for the use with the SCSS-Version of Foundation (v5.3.x):

/* selectize.js | customization and fixes */

.selectize-input, .selectize-input.dropdown-active, .selectize-dropdown {
    border-radius: 0;
}

.selectize-dropdown, .selectize-input, .selectize-input input {
    color: $input-font-color;
    font-size: $input-font-size;
}

.selectize-input {
    height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
}

.selectize-input > input {
    @include form-element();
    top: 1px;
    height: auto;
    display: inline-block;
}

.selectize-input > div.item {
    margin-top: 1px;
}

.selectize-dropdown [data-selectable] .highlight {
    background: scale-color($f-dropdown-list-hover-bg, $lightness: -10%);
}

.selectize-dropdown .active {
    background: $f-dropdown-list-hover-bg;
    color: scale-color($input-font-color, $lightness: -20%);
}

One thing i wan't able to solve yet is Foundations glowing effect around the current :focus form-field.

[jayswain]

I went down the route @wolfgang-demeter did and used foundations variables to style the selectize element similarly to the rest of the form elements. as well as fixing the jumping issue.

.selectize-control.single .selectize-input {
 height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
 line-height: ($form-spacing * 1.3);
 background: $input-bg-color;
 border-color: $input-border-color;
 @include box-shadow($input-box-shadow);
}
.selectize-input > input {
@include form-element();
 top: 1px;
 height: auto;
 display: inline-block;
}

[dmastylo]

Just for anyone else coming through. If you're using Rails and the Foundation gem, throw the code @jayswain posted in your foundations_and_overrides.css file at the very bottom and comment out

@include box-shadow($input-box-shadow);

Quick fix and I'm not overly concerned with the box shadow so I didn't try to locate it.

[wolfgang-demeter]

Just a small update and maybe a little help for somebody. The last days i tinkered a lot of hours with selectize.js to work flawless with Foundation (v5.5.1). It works basically - my SCSS-code above is still fine - but it has it's kinks. Sometimes the font-sizes don't match. Sometimes the positions are a little misaligned. Sometimes it works on "desktops" but is unuseable on "mobile".

After a bit of frustration i ditched selectize.js and tried to incorporate jQuery-UI. Look at http://jsfiddle.net/vgarcias/WdncE/ for a basic example (not from me). You have to work a little more if you want to use it with Foundation v.5.5.1. And jQuery-UI is "heavy" just for a basic autocomplete-Feature. And as i really only need it for a basic autocomplete - none of the additional fancy features selectize.js (or jQuery UI) offers - i ditched that to. I now use an HTML5 datalist! Look at http://jsfiddle.net/r6evd9s1/9/ for a simple example. You can also use AJAX to fill the datalist: http://codepen.io/matt-west/pen/jKnzG

[risadams]

closing stale issues older than one year.
If this issue was closed in error please message the maintainers.
All issues must include a proper title, description, and examples.