JCF Select dropdown not the same width as the select about jcf HOT 7 CLOSED

Hi, @NigelOToole !

JCF library tries to avoid inline styles on the fake select element so you don't have to worry about priority of your CSS rules vs inline html styles.

Responsive behavior can be achieved with CSS. For example you have:

<select class="foo">...</select>

Now you can control styles of custom select like this:

select.foo,
select.foo + .jcf-select {
    width: 50%;
}

Or you can use the class of your select element which is automatically copied and prefixed with "jcf-select-" by JCF library:

.jcf-select-foo {
    width: 50%;
}

Will this work for your case?

from jcf.

Hi

Thanks for the reply and I can understand trying to avoid inline styles but
this is the only way I could always get them to line up.

I have already tried using styles as suggested but this didnt work. The
strange thing is that my developer tools in firefox are saying all the
element, the native select, the jcf-select and the jcf-select-drop have the
same pixel width but the edges dont line up untill I added the inline
styles.

Regards,
Nigel

On 23 June 2015 at 17:11, Sergey [email protected] wrote:

Hi, @NigelOToole https://github.com/NigelOToole !

JCF library tries to avoid inline styles on the fake select element so you
don't have to worry about priority of your CSS rules vs inline html styles.

Responsive behavior can be achieved with CSS. For example you have:

...

Now you can control styles of custom select like this:

select.foo,select.foo + .jcf-select {
width: 50%;
}

Or you can use the class of your select element which is automatically
copied and prefixed with "jcf-select-" by JCF library:

.jcf-select-foo {
width: 50%;
}

Will this work for your case?

—
Reply to this email directly or view it on GitHub
#6 (comment).

from jcf.

Ok. Are you testing on the retina display?
Maybe you could provide a jsfiddle, so I can reproduce the issue?

BTW, you can try fakeDropInBody: false option which will put the drop inside the fake select element and it will have the same width as the container without any inline styles.

from jcf.

Need more information to reproduce the issue.

from jcf.

Having the same issue in Bootstrap 3. It is caused by jQuery outerWidth() behavior, it rounds the actual width. I managed to solve it in jcf.select.js, function repositionDropdown (line 309):

selectWidth = this.fakeElement.outerWidth(),

replace it with

selectWidth = this.fakeElement[0].getBoundingClientRect().width,

(see stackoverflow to take care about browser support)

from jcf.

If you wish, I could make a pull request (browser-safe version of this comment).

from jcf.

Ok, so .offset() already returns floating point value and only width is calculated with rounded values. I think this is the only place that needs to be updated in jcf.select module.

@nikolai-katkov will be waiting for your PR ;)

from jcf.