Ограничить ширину SELECT шириной родительского TH

Question

Ограничить ширину SELECT шириной родительского TH

0

Я создаю фильтры SELECT и INPUTs для нижнего колонтитула TH моей таблицы данных. Я хочу, чтобы эти элементы ширины соответствовали ширине родительского TH (минус некоторый запас).

Мои элементы TH имеют классы.datainput или.dataselect, чтобы знать, должен ли быть создан SELECT или INPUT.

Я создал этот скрипт, который вызывается после загрузки данных AJAX и генерируются входы:

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); 
  });   
}

Я использую следующий CSS для TH:

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

И для выбора:

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

В хром он отлично работает:

Но в firefox SELECT имеют недопустимые размеры:

Я напечатал ширины TH и SELECT в хроме и firefox, и вот результаты для второй колонки в хроме:

И в firefox:

Не могли бы вы рассказать мне, что я делаю неправильно, или предложить лучшее решение?

Michal 16 фев. 2014, в 12:09

Источник

Теги:

javascript

jquery

html

css

firefox

2 ответа

1

Я нашел решение, необходимо установить внешнюю ширину выделения:

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

Решение находится здесь: http://jsfiddle.net/gZEc9/12/

Michal 16 фев. 2014, в 14:38

Ещё вопросы

Ankur Aggarwal · Accepted Answer · 2014-02-16T09-12-00.000Z

Проблема заключается в.width() JQuery API. У него есть проблема с FF. Вы можете использовать.css для установки ширины.

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

Решение Fiddle: jsfiddle.net/vfNRS/1

Все тот же результат, если Firefox :(. Но спасибо за ваш ответ.
Можете ли вы сделать JSFiddle. Было бы легко решить проблему
Спасибо, вот оно: jsfiddle.net/gZEc9/11 в chromium выбирает красиво и центрировано, однако в Firefox они перемещаются вправо
Вам нужно использовать CSS вместо .width (). Это имеет некоторую проблему в FF. Оформить заказ fiddle jsfiddle.net/vfNRS/1