CODEWITHSUNDEEP
csstwitter-bootstrap-3datatables
leddy
leddy

Reputation: 553

Dropdown within datatables won't vertically align

I have a dropdown within a datatables table that is created dynamically - i have amended the bootstrap css so that the vertical alignment of the table is set to middle but the dropdown is still showing as top

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td
{
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: middle;
  border-top: 1px solid #ddd;
}

see my jsbin here

(if you enter any text then Add Instruction then click on the Load Copied Data button)

Many thanks in advance

Update: it was the form-group class on a parent div that had the setting: margin-bottom: 15px

I created a new class to override that setting margin-bottom to 0px

Upvotes: 1

Views: 181

Answers (3)

Dmitriy Borisov
Dmitriy Borisov

Reputation: 598

Your select parent div has a .form-group class, which has style margin-bottom:15px;

You can add margin-top:15px; to .form-group in your css or set margin:0px;

Upvotes: 1

Surendra Singh Rana
Surendra Singh Rana

Reputation: 67

in your css select.input-xs just add margin-top: 15px; it will properly align your dropdown.

Upvotes: 0

SD.
SD.

Reputation: 9549

It doesn't actually align top. The parent div simply has a Bootstrap CSS:

.form-group {
    margin-bottom: 15px;
}

Upvotes: 1

Related Questions