This is a migrated thread and some comments may be shown as answers.

DropdownList Spacing

3 Answers 154 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
jim
Top achievements
Rank 1
jim asked on 06 Feb 2018, 08:13 PM
How do I control the spacing in between drop-down list items? 

3 Answers, 1 is accepted

Sort by
0
Magdalena
Telerik team
answered on 08 Feb 2018, 08:11 AM
Hi Jim,

Increasing the spacing can be achieved by applying one of the following CSS:
.k-list .k-item {
    margin: 10px 0;
}

.k-list .k-item {
    padding: 10px 0;
}

.k-list .k-item {
    line-height: 3em;
}

Do not hesitate to contact us if you have other questions.



Regards,
Magdalena
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
jim
Top achievements
Rank 1
answered on 08 Feb 2018, 05:04 PM

Is it possible to decrease the space in between the items in a list?   I tried each of the items listed above and decreased the sizes and it had no effect.

  <style>
    .k-list .k-item {
        line-height: 1em;
    }
</style>

 

0
Magdalena
Telerik team
answered on 12 Feb 2018, 07:55 AM
Hello Jim,

There is set a min-height to popup items. If you would like to decrease items height, apply the following CSS to reset the min-height property and use a stronger selector:
<style>
    .k-popup .k-list .k-item {
        line-height: 1em;
    }
     
    .k-popup .k-list .k-item {
      min-height: 0;
    }
</style>



Regards,
Magdalena
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
DropDownList
Asked by
jim
Top achievements
Rank 1
Answers by
Magdalena
Telerik team
jim
Top achievements
Rank 1
Share this question
or