bootstrap compatible theme #684

Closed
thorst opened this Issue Jun 19, 2012 · 8 comments

Projects

None yet

5 participants

@thorst
thorst commented Jun 19, 2012

Would be nice to have an optional theme that just makes it blend in with bootstrap.

@andriijas

Hi @thorst

I have some bootstrap compatible less at https://github.com/andriijas/chosen-bootstrap-fontawesome

Feel free to use it as it suits you.

@thorst
thorst commented Jun 19, 2012

In the time since I posted that I had hacked the css to get it to blend in. However I only changed the multiple select and not the single select. So your code will definitely help. And while I do use chirpy, it would be nice of you to shipped the plain css file, cuz we're all lazy.

My issue now is that I'm using the responsive layout. So of course it doesn't resize nicely when the other text fields do. To do that I've done a nasty js hack.

var resizeChosen = function () {
  $(".chzn-container,.chzn-drop").css('width', $("#BootstrapTextField").outerWidth() - 3);
};

$(window).resize(function () {
  resizeChosen();
});

resizeChosen();
@andriijas

I cant put the css in the repo because it will depend on the variables you put in variables.less, otherwise its difficult to make it adaptable to bootstrap.

@thorst
thorst commented Jun 21, 2012

Id just include the default settings. But that's fine. I may tackle the responsive, if i get time.

@alxlit
alxlit commented Aug 29, 2012

I put together an alternate stylesheet here: https://github.com/alxlit/bootstrap-chosen

@pfiller
Contributor
pfiller commented Jul 26, 2013

For what it's worth, I think the current version of Chosen works pretty well with Bootstrap. It's not a perfect match, but I think you could make it work pretty nicely with a small snippet of CSS: http://jsfiddle.net/qNT8t/

As for "responsive", you can now set Chosen up with a percentage width:

$("select").chosen({ width: '50%' });
@pfiller pfiller closed this Jul 26, 2013
@morgar
morgar commented Aug 26, 2013

Problem is, responsive must adapt to page resizing. If you set the width in %, it's converted to pixels on load and it doesn't change on further page resizing.

@andriijas

How many non developers actually change page size during a website visit.

Though rotation change is pretty used i guess.

On Mon, Aug 26, 2013 at 7:04 PM, morgar notifications@github.com wrote:

Problem is, responsive must adapt to page resizing. If you set the width
in %, it's converted to pixels on load and it doesn't change on further
page resizing.


Reply to this email directly or view it on GitHubhttps://github.com/harvesthq/chosen/issues/684#issuecomment-23278199
.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment