Search code examples
twitter-bootstrapdatatableyadcf

yadcf select css style

I am using yadcf datatable plugin and its select css style looks like basic CSS style and not the boostrap one.

I am using datatables bootstrap features for css styling but for some reason yadcf still uses basic css style. Check the image attached.

I know you won't be easily able to figure out the problem, without a code link which I don't have.

If you have any pointers, I can get look into them.

enter image description here

Solution

  • Are you aware that the difference in the appearance of the <select> element is due to different internal browser element rendering / styling ?

    For example open the following link in Chrome and FireFox, and notice the difference... that's the same difference that you see on your plunker

    In addition you haven't included the bootstrap css file on that plunker at all

    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

    but even with that css you need to manually add form-control class to the selects that are being generated by yadcf, (I can add a feature to yadcf to allow adding custom classes to select element for that)

    Here is a plunker with bootstrap css file

    You can edit the issue that you opened on yadcf github, asking for the ability add custom classes to select(maybe other too) element