Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Problem with SelectBoxIt width of hidden selectbox #209

Closed
groodt opened this issue Oct 1, 2013 · 14 comments
Closed

Problem with SelectBoxIt width of hidden selectbox #209

groodt opened this issue Oct 1, 2013 · 14 comments
Assignees
Labels

Comments

@groodt
Copy link

groodt commented Oct 1, 2013

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?

@ghost ghost assigned gfranko Oct 1, 2013
@gfranko
Copy link
Owner

gfranko commented Oct 1, 2013

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

@groodt
Copy link
Author

groodt commented Oct 2, 2013

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
Copy link
Owner

gfranko commented Oct 2, 2013

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

@groodt
Copy link
Author

groodt commented Oct 2, 2013

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
Copy link
Owner

gfranko commented Oct 2, 2013

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

@groodt
Copy link
Author

groodt commented Oct 2, 2013

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
Copy link
Owner

gfranko commented Oct 2, 2013

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
Copy link
Author

groodt commented Oct 2, 2013

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
Copy link
Owner

gfranko commented Oct 2, 2013

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

@groodt
Copy link
Author

groodt commented Oct 3, 2013

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
Copy link
Owner

gfranko commented Oct 4, 2013

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

@gfranko gfranko closed this as completed Oct 4, 2013
@groodt
Copy link
Author

groodt commented Oct 4, 2013

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
Copy link
Owner

gfranko commented Oct 4, 2013

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

@groodt
Copy link
Author

groodt commented Oct 4, 2013

That works a treat. Thanks again.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants