search

pavikumbhar / jquery-datatables-column-filter

0 stars 1 forks source link

CSS bootstrap and number_range_filter #165

Open GoogleCodeExporter opened 8 years ago

GoogleCodeExporter commented 8 years ago 
What steps will reproduce the problem?
1. use default Twitter bootstrap 3 CSS with c# .Net MVC 5
2. create a table with column filters in a separate table
3. try to enter values in number range filter - they are not visible
4. comment out lines 300-306 of bootstrap.css:

 *,
 *:before,
 *:after {
   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
 }

5. numbers are visible in number range fields.

I guess this is a CSS question...

How do I override the bootstrap :before and :after styles for 
.number_range_filter?

I have this in a separate css file and it works:

.number_range_filter
{
    width:16px;
    height: 16px;
    display: inline-block;
}

I just can't override the other bits.

Original issue reported on code.google.com by cameron....@gmail.com on 19 Nov 2014 at 11:10

Attachments:

GoogleCodeExporter commented 8 years ago 
Mystery solved. I gave my column filters table a class of 'filters' then in my 
CSS:

.filters *,
.filters *:before,
.filters *:after {
    -webkit-box-sizing:content-box !important;
    -moz-box-sizing: content-box !important;
    box-sizing:  content-box !important; 
}

Original comment by cameron....@gmail.com on 19 Nov 2014 at 11:46