Problem with SelectBoxIt width of hidden selectbox

[groodt]

If I have a hidden selectboxit and then unhide it, the width of the text is narrow and ellipses are shown. This has an added problem on Android, where the actual selectboxit click area is also reduced so most of the selectbox becomes unclickable.

jsbin showing the issue:
http://jsbin.com/AjocuBi/17/edit

Is there a way around this issue?

[gfranko]

This issue should be fixed in the dev branch. Could you try out this code and let me know if it is fixed?

[groodt]

Thanks Greg.

This fixes the problem of the ellipses appearing, but the underlying
selectbox (and the click area) is not still 100% width, even though the
rendered selectboxit is 100% width. If that makes sense?

On 1 October 2013 21:43, Greg Franko [email protected] wrote:

This issue should be fixed in the dev branch. Could you try out this codehttps://raw.github.com/gfranko/jquery.selectBoxIt.js/dev/src/javascripts/jquery.selectBoxIt.min.jsand let me know if it is fixed?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/209#issuecomment-25455439
.

[gfranko]

@groodt Are you using auto width? Also, could you try to duplicate this issue on jsbin or jsfiddle?

[groodt]

No. The code I'm using is:

    this.$reasonSelect.selectBoxIt({

        autoWidth: false,
        downArrowIcon: "ah-icon-select",
        copyClasses: "container"

    });

Unfortunately, I've not been able to reproduce this in JS Bin yet. It only
gives me trouble on mobile devices right now. Long shot, but do you have an
Android device? If so, would you like to see the issue? I appreciate this
is a pain, so don't worry if not.

I'll keep trying to figure out what would be different on mobile devices.

On 2 October 2013 19:23, Greg Franko [email protected] wrote:

@groodt https://github.com/groodt Are you using auto width? Also, could
you try to duplicate this issue on jsbin or jsfiddle?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/209#issuecomment-25534019
.

[gfranko]

Yea, I have a Galaxy S4. I would be happy to see the issue.

[groodt]

Amazing, thanks Greg. I've added you to a Google+ community where you can
download the app.

On 2 October 2013 19:34, Greg Franko [email protected] wrote:

Yea, I have a Galaxy S4. I would be happy to see the issue.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/209#issuecomment-25534574
.

[gfranko]

So behind the scenes, SelectBoxIt tries to position the original select box directly over the new SelectBoxIt drop down by setting CSS attributes. For some reason, it does not seem to be calculating some of those dynamic CSS values correctly.

Could you try adding a CSS attribute (using an id selector) for your original select box, to set the width of your select box. Like this:

select#mySelectBox {
  width: 300px;
}

[groodt]

Ok.

If I do that, will it break my "fluid" layout. Right now, the selectbox
will scale to different device widths. Or is this just to give it a hint?

On 2 October 2013 19:54, Greg Franko [email protected] wrote:

So behind the scenes, SelectBoxIt tries to position the original select
box directly over the new SelectBoxIt drop down by setting CSS attributeshttps://github.com/gfranko/jquery.selectBoxIt.js/blob/master/src/javascripts/jquery.selectBoxIt.mobile.js#L22.
For some reason, it does not seem to be calculating some of those dynamic
CSS values correctly.

Could you try adding a CSS attribute (using an id selector) for your
original select box, to set the width of your select box. Like this:

select#mySelectBox {
width: 300px;}

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/209#issuecomment-25535729
.

[gfranko]

I think I can duplicate the issue now. I'll continue looking at it today, and will hopefully have a fix.

[groodt]

Thanks Greg. How are you reproducing it? Visiting jsbin on mobile?

On 2 October 2013 20:21, Greg Franko [email protected] wrote:

I think I can duplicate the issue now. I'll continue looking at it today,
and will hopefully have a fix.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/209#issuecomment-25537480
.

[gfranko]

I just released v.3.8.0, which should fix this issue.

[groodt]

Thanks Greg.

Unfortunately, still doesn't appear to have fixed the issue for me. If I visit this bin on Android: http://jsbin.com/AjocuBi/19
The bin is using the master version of the code which is 3.8.0.
The hidden selectbox still has some select issues if clicked on the right hand side of the control.

[gfranko]

How about if you override the select box width set by SelectBoxIt. Like this: http://jsbin.com/EqilEJe/3/edit

[groodt]

That works a treat. Thanks again.