CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
swati
swati

Reputation: 1267

Reduce size of dropdown in Bootstrap 3

I want to reduce the height of input fields. So, I have created a css class

.input-field {
  height: 20px
}

This works fine for text fields and also reduces the height of drop downs. However, in drop down the selection text is cut. How can I ensure that the complete text inside the drop down is visible

Here is the fiddle - https://jsfiddle.net/zvn3wknj/

The selection text 'Approve' and 'Reject' is cut and not displayed correctly.

Upvotes: 0

Views: 1281

Answers (3)

Nitin Vaghani
Nitin Vaghani

Reputation: 307

Add this css

select.input-field{padding: 2px 12px;}

Upvotes: 1

Tien Nguyen Ngoc
Tien Nguyen Ngoc

Reputation: 1555

You can add padding-top and padding-bottom. I hope it will work for you.

.input-field {
  height: 20px;
  padding-top:0px;
  padding-bottom:0px;
}

Upvotes: 1

Mukesh Ram
Mukesh Ram

Reputation: 6328

Adjust padding in input tag:

.input-field {
  height: 20px;
  padding: 2px 10px;
}

https://jsfiddle.net/zvn3wknj/2/

Upvotes: 1

Related Questions