Modify CSS of <select> in Angular UI-grid

Question

I have an angular ui-grid that has a in the filter section built out like this:

, filter: {
           type: uiGridConstants.filter.SELECT,
           selectOptions: [
             { value: 'male', label: 'male' },
             { value: 'female', label: 'female' }
            ]
          }

That looks ike this:

I have tried every way I can think of to modify the CSS to make it look like this:

But no matter what I do, I cant seem to style any aspect of the dropdown... Has anyone had any success trying to style a ui-grid dropdown?

-----EDIT 1-----

Here is an ultra-simplified pen

Are you familiar with the concept of inspect-ing DOM elements? — tao
– tao, Commented Jan 23, 2017 at 16:46
Yes, and thanks for the snide remark. No matter what I change in the DOM, there is no corresponding effect on the options — IWI
– IWI, Commented Jan 23, 2017 at 16:52
It wasn't a remark. It was a question. I asked because, in its current form, your question indicates you are not familiar with it. I cannot inspect pictures of an issue. So please create a minimal reproducible example or, at the very least, provide a link where this issue can be experienced and inpected. I promise I'll help and provide a working solution. — tao
– tao, Commented Jan 23, 2017 at 16:57
I apologize if I mistook your comment. Here is a pen codepen.io/uxisnow/pen/NdgRrE — IWI
– IWI, Commented Jan 23, 2017 at 17:09

Community · Accepted Answer · 2017-05-23 11:52:53Z

It appears UI-Grid is not as customizable as one might think when looking at their front page.

Here is the list of customizable elements in UI-Grid and, for the moment, filters are not one of them.

I would have expected a component built on AngularJS to use a directive that would allow complete replacement of the filters template ~~but it either doesn't exist yet or I wasn't able to find it~~.

Edit: After some more digging I found headerCellTemplate buried deep into their docs. Not entirely sure how one would use it, but I think it holds the key to the treasure chest.

The worst part is that the filters they use are built using plain <select> and <option> tags, which are a real pain to style. A good starting point would be this awesome answer and the accepted one, from the same question.

As you might notice, copy/pasting the code from the answer I linked works, but it's a pain to implement and maintain.

I must admit I would consider alternatives to UI-Grid in your position, such as Smart table or ngTable. I'd also mention Swimlane's ngx-datatable for the incredible performances they have achieved (tables moving smoothly with 100k rows - that's something!).

Best of luck!

Collectives™ on Stack Overflow

Modify CSS of <select> in Angular UI-grid

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related