JQueryUI/SelectMenu - Неожиданное заполнение внизу

Question

У меня есть следующий код HTML, который использует JQuery/JQueryUI.

Мне нужно избавиться от bottom padding (красная область), которую вы можете увидеть на прилагаемом изображении.

Здесь вы соответствующий JSFiddle:

https://jsfiddle.net/s8jmq2zh/

$(function() { 
 
    $("select").selectmenu(); 
 
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script> 
 

 
<table> 
 
    <tr> 
 
    <td style="background-color:#f00;"> 
 
     <select style="width:200px;"> 
 
     <option value="1">Option 1</option> 
 
     <option value="2">Option 2</option> 
 
     </select> 
 
    </td> 
 
    </tr> 
 
</table>

Результат:

Любая идея о том, как это решить?

Answer 1

Дополнительное заполнение - это то, что таблица стилей jQueryUI делает элемент .ui-selectmenu-button как display: inline-block, который добавляет некоторые пробелы под стилизованное меню выбора. Чтобы это исправить, переопределить этот стиль и установить display: block;:

$(function() { 
 
    $("select").selectmenu(); 
 
});

table .ui-selectmenu-button { display: block; }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script> 
 

 
<table> 
 
    <tr> 
 
    <td style="background-color: #f00;"> 
 
     <select style="width: 200px;"> 
 
     <option value="1">Option 1</option> 
 
     <option value="2">Option 2</option> 
 
     </select> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

Ваш поддельный выбор aka dropdown - это inline-block элемент, поэтому ваше пространство просто пробельно. Если вы установили display: block для этого поддельного ввода ui-selectmenu-button ui-widget ui-state-default ui-corner-all, он удалит ненужное пространство.

Вы можете применить его по назначению, как:

.td > .ui-selectmenu-button { 
    display: block; 
} 

Если это не будет перезаписывать существующий стиль, добавить !important.