chosen with bootstrap responsive

[eqnet]

I am using chosen with bootstrap responsive. when the browser window gets resized the chosen select elements remain the same size. has anybody implemented a solution for this?

[benblodgett]

I did a quick css hack on it for one of my projects - https://gist.github.com/4627725

[eqnet]

Thanks very much.

Tested on Android, iPhone, iPad, IE, Firefox, Chrome and Safari. All work a treat.

Cheers

[hocu]

@benblodgett your fix worked great with a little modifications. thanks, brilliant.

[datnguyen293]

As CSS with Bootstrap 3, you should add following lines to chosen.css file:

[class*="col-"] .chosen-container {
    width:98%!important;
}
[class*="col-"] .chosen-container .chosen-search input[type="text"] {
    padding:2px 4%!important;
    width:90%!important;
    margin:5px 2%;
}
[class*="col-"] .chosen-container .chosen-drop {
    width: 100%!important;
}

---

UPDATED:
I recently worked with Foundation 5 and here is my update to make Chosen works with Foundation 5 (it is more simpler):

.columns .chosen-container, .column .chosen-container {
    width: 100% !important;
    margin-bottom: 1rem;
}

[youradds]

@datnguyen293 - could we maybe get that added to the original code? Cos that was a bugger for me - and now I found this, it REALLY helped! :+1:

[AnshuDahiya]

Yes we can do bootstrap with chosen plugin. For tht u need to update ur css only.. if u want updated css for bootstrap purpose let me know..

---

On Wed 18 Jun, 2014 1:39 PM IST Andy wrote:

@datnguyen293 - could we maybe get that added to the original code? Cos that was a bugger for me - and now I found this, it REALLY helped! :+1:

---

Reply to this email directly or view it on GitHub:
https://github.com/harvesthq/chosen/issues/1004#issuecomment-46406958

[youradds]

Thanks @AnshuDahiya - I've already got it going myself - but I was just saying it would be a good idea to update the original BS hack for Chosen, so that it uses the latest code :) (I was using some code, that didn't respond when you resized the window - whereas with this code, it now does it perfectly =))

[datnguyen293]

Yes, I think @youradds was right. If we can add these stuffs into Chosen's CSS that would be good. Other guys should not need to search for the solution and read through to this issue anymore.

[AnshuDahiya]

Ok great.. 

Sent from Samsung Mobile

-------- Original message --------

From: Andy [email protected]

Date:18/06/2014 2:17 PM (GMT+05:30)

To: harvesthq/chosen [email protected]

Cc: AnshuDahiya [email protected]

Subject: Re: [chosen] chosen with bootstrap responsive (#1004)

Thanks @AnshuDahiya - I've already got it going myself - but I was just saying it would be a good idea to update the original BS hack for Chosen, so that it uses the latest code :) (I was using some code, that didn't respond when you resized the window - whereas with this code, it now does it perfectly =))

—
Reply to this email directly or view it on GitHub.

[jdcarvalho]

Works fu..ing loving great! Thanks @datnguyen293