SelectBoxItText span Width Calculation issue

[dharapvj]

Hi,

I wanted to automatically resize the select box to the parent container div. autoWidth option did not work for me. So after using autoWidth:false, I tried around with the styles to realize that .selectboxit-container .selectboxit class defaults the width of the select to 220px.

I overrode it to width:100% via my CSS and the selectBoxIt container now fits my parent container.

But with that change, I got into another issue.. the text shown in the container was getting clipped. On debugging, I found that if we move line 710-715 after line 720 .. then the max-width calculation happens correctly and text does not get clipped.

On the surface, I feel that this movement should not have any issue on other usecases of the library. But, I am too new to your library to confidently say that this fix will not break anything else.. so not sending you a pull request. Hope you can move the block 4 lines down.

Thanks for lightweight library!

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/1474362-selectboxittext-span-width-calculation-issue?utm_campaign=plugin&utm_content=tracker%2F23157&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F23157&utm_medium=issues&utm_source=github).

[gfranko]

Could you try something out for me? In your SelectBoxIt CSS file, could you replace your .selectboxit-rendering styles with this:

.selectboxit-rendering {
  position: fixed !important;
  clip: rect(1px 1px 1px 1px) !important; /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px) !important;
}

Curious if this would fix it.

If this doesn't work, can you try setting the copyClasses option to container. Like this:

$('select').selectBoxIt({
  'copyClasses': 'container'
});

If those fixes don't work, I'll try to update this in the next release.

[dharapvj]

Ok.. Let me test this..

Cheers, VJ

On Fri, Feb 28, 2014 at 11:19 AM, Greg Franko notifications@github.comwrote:

Could you try something out for me? In your SelectBoxIt CSS file, could you replace your .selectboxit-rendering styles with this:

.selectboxit-rendering { position: fixed !important; clip: rect(1px 1px 1px 1px) !important; /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px) !important;}

Curious if this would fix it.

Reply to this email directly or view it on GitHubhttps://github.com/gfranko/jquery.selectBoxIt.js/issues/255#issuecomment-36323838 .

[gfranko]

Did you ever end up trying either of these solutions?

[dharapvj]

Hey, my apologies for not responding earlier.

I tried both the changes that you provided.. but none helped :-(

So, I suppose you might want to try the change which I have suggested..

Thanks again.

[ghost]

Hi guys, I've just worked my way through the exact same issue and come to exactly the same conclusion, of moving the dynamic width assignment lines below the lines that add the object to the page and remove the rendering class. Seems to work fine so far.

[gfranko]

Would either of guys be able to make a pull request to the dev branch with this fix? I would appreciate it.

[ArturKwiatkowski]

Im messing with this lib from few hours and I think theres another issue when you change the default 220px to 100% or auto on mobile devices. When You run your website with the selectboxit that has 100% or auto defined as width in landscape mode first and then you rotate the mobile to the portrait orientation you will be able to scroll beyond the viewport, to the right. It's like selectboxit would translate this auto or 100% width to pixels and then it doesnt perform any recalculations on orientation change. This just breaks my heart.

[jdneto]

That will do the trick:

.selectboxit-container {
    width: 100%;
}

.selectboxit-container .selectboxit {
      width: 100% !important;
}