Auto-fit to bootstrap col width

[asimnzr]

Hi,

I am using this awesome multi-select in my project, but what I need is:

1. Multi-select should auto-fit itself to, suppose bootstrap col-2. I tried few things i.e. setting width to 100%, but no success.
2. Setting Background of dropdown button colour to some colour other than white.

Can anyone help me in working around above two points?

Thanks

[isteven]

@asimnzr ,

In ".multiSelect > button" (line 35), add width 100%

In ".multiSelect .checkboxLayer" (line 94), add width 100% and remove position absolute.

I hope it's good enough to get you started. You might need to do further fine tunings though.

[asimnzr]

I was able to do it at my own and saw your message late.. Thanks for help though!

[isteven]

Great to hear that.

I'll be closing the issue then.

[ameyarockers]

Hi,

I am planning to use multiselect in one of my projects inside ui-rid (angular grid, another popular anguar table) as editable template but some how i can't bind the array for input-model inside template. For now, I was trying to use hardcoded scope values inside the template.

I am currently using your base example to test things with arrays (modernbrowser) as you've used in your sample.

Any help would be greatly appreciated.

Here is the template i am using:
var cellMultiSelectTemplate = '<div isteven-multi-select input-model="modernBrowsers" output-model="outputBrowsers" button-label="icon name" item-label="icon name maker" tick-property="ticked">';

and here is the column definition:
{ name: 'Browsers', field: '', cellClass: 'editableCell', editableCellTemplate: cellMultiSelectTemplate, enableColumnMenu: false, minWidth: 250 },

That's how it looks in grid with no data:

Any help is highly appreciated.

[getcodenow]

Hi,

Thank you for this project. I think it is best multi-select after evaluating numerous.

Quick question - i have already changed ".multiSelect > button" (line 35), add width 100%, but I haven't been able to figure out how to right justify the caret.

Do you know how to get the caret to appear on the right side of the dropdown box instead of to the right of the text? Thank you for any ideas you can suggest.

[isteven]

Hi @getcodenow ,

Sorry for the late reply.

I'm aware on the difficulty of moving the caret to the far right. Unfortunately it's an unavoidable trade-off when you expand the button to fit 100% parent width.

I'm not sure I can help you with this, but you can try to play with the CSS.

[isteven]

@ameyarockers ,

Sorry for the late reply.

Have you managed to solve your probhlem?

[getcodenow]

Thank you for getting back to me. I couldn't figure it out. I ended up switching to https://github.com/dotansimha/angularjs-dropdown-multiselect.

[isteven]

@getcodenow ,

No worry, glad you can find a suitable solution :)

[dkhunt27]

This seems to fix the caret issue; moving it to the right side

.multiSelect .caret
margin: 5px 0px 1px 12px !important;
float: right

.multiSelect .buttonLabel
display: inline;