CODEWITHSUNDEEP
javascriptjqueryhtmlcssfirefox
Michal
Michal

Reputation: 2039

Restrict SELECT width to width of parent TH

I generate filter SELECTs and INPUTs to the footer TH of my data table. I want these items widths to match width of parent TH (minus some margin).

My TH elements have classes .datainput or .dataselect to know, whether SELECT or INPUT should be generated.

I've created this script, which is called after AJAX data are loaded and inputs are generated:

function fnFixElementsTH() {

  // Fix data inputs
  $('.datainput').each(function(i) {
    var thWidth = $(this).width(); 
    $(this).children().width(thWidth); 
  }); 

  // Fix data selects
  $('.dataselect').each(function(i) {
    var thWidth = $(this).width() - 10; 
    $(this).children().width(thWidth); 
  });   
}

I use following CSS for TH:

padding: 3px 0px 3px 10px;
font-weight: bold;
font-weight: normal;

And for select:

word-wrap: normal;
margin-right: 10px;

In chromium it is working perfectly: chromium

But in firefox, SELECTs have invalid sizes: firefox

I printed widths of THs and SELECTs in chromium and firefox and here are the results for second column in chromium:

chromium2

And in firefox:

firefox2

Could you tell me what I am doing wrong, or suggest a better solution?

Upvotes: 0

Views: 71

Answers (2)

Ankur Aggarwal
Ankur Aggarwal

Reputation: 3101

Problem is in .width() Jquery API. It has some issue with FF. You can use .css to set the width.

  $(".dataselect").each(function(i) {
    var thWidth = $(this).width() - 10; 
    $(this).children().css('width',thWidth); 
  });

Solution Fiddle: jsfiddle.net/vfNRS/1

Upvotes: 1

Michal
Michal

Reputation: 2039

I've found a solution, outer width of select has to be set:

// Fix data selects
$('.dataselect').each(function(i) {
  var thWidth = $(this).width() - 10; 
  //$(this).children().width(thWidth);     THIS WAS WRONG
  $(this).children().outerWidth(thWidth);
});

Solution is here: http://jsfiddle.net/gZEc9/12/

Upvotes: 1

Related Questions