how to change the background image heights?

[Arv]

I am trying to build a custom skin for dropdowns.
I have edited the ComboSprites.gif.
but the skin that I want use is greater in height then the original.
As a result the positioning for the background image doesnt look correct.

So I thought there should be a background positioning setting somewhere in the css files but coudnt find it.

Can you please tell me how to change a dropdowns height please.

Thank You,
Arvin

[Bozhidar]

Hello,

The styles that you are trying to change are placed in base RadFormDecorator css  - FormDecorator.css. The dropdown select is styled be the following:

Copy Code

/* skinned selectbox */
.rfdSelect
{
    display: inline-block;
    text-decoration: none;
    font-size: 12px;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    cursor: default;
    outline: none;
    -moz-user-select: none;
    max-width: 1024px;
    background-position: 0 0;
    padding-left: 2px;
    zoom: 1;
    z-index: 3000;
    vertical-align: middle;
    margin-right: 5px;
}

*html .rfdSelect
{
    background-position: right -22px;
    padding-right: 19px;
    padding-left: 0;
    vertical-align: top;
    margin-right: 0;
}

*+html .rfdSelect
{
    vertical-align: top;
    margin-right: 0;
}

.rfdSelect:hover
{
    background-position: 0 -44px;
}

*html .rfdSelect:hover
{
    background-position: right -66px;
}

.rfdSelect .rfdSelectOuter,
.rfdSelect.rfdSelectDisabled:hover .rfdSelectOuter
{
    background-position: right -22px;
    display: block;
    line-height: 22px;
    height: 22px;
    white-space: nowrap;
    width: inherit;
    margin-left: 2px;
}

.rfdSelect.rfdSelectDisabled:hover
{
    background-position: 0 0;
}

*html .rfdSelect .rfdSelectOuter,
*html .rfdSelect.rfdSelectDisabled:hover .rfdSelectOuter
{
    background-position: 0 0;
    margin-right: 0;
    margin-left: 0;
    padding-left: 2px;
}

.rfdSelect .rfdSelectOuter,
.rfdSelect.rfdSelectDisabled:hover .rfdSelectOuter
{
    margin-right: -1px\9;
}

.rfdSelect:hover .rfdSelectOuter
{
    background-position: right -66px;
}

*html .rfdSelect:hover .rfdSelectOuter
{
    background-position: 0 -44px;
}

.rfdSelect .rfdSelectOuter span
{
    margin-right: 22px;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/*NEW - TEKI - Support for SELECT dropdowns using the new rendering */
.rfdSelect .rfdSelectBox
{
    position: absolute;
    overflow-y: auto;
    float: left;
    width: inherit;
}

.rfdSelect li
{
    padding: 0 0 0 3px;
    line-height: 16px;
    height: 16px;
    background-image: none !important;
}

.rfdSelectDisabled
{
    opacity: .4; /* Gecko, Opera */
}

.rfdSelectDisabled .rfdSelectText
{
    filter: alpha(opacity=40); /* IE */
}


/* dropdown settings */
.rfdSelectBox
{
    font-size: 12px;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    display: inline-block;
    overflow-x: hidden;
    z-index: 2900;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

.rfdSelectBox.rfdSelectDisabled:hover
{
    background-position: 0 0;
}

.rfdSelectBox ul
{
    width: inherit;
}

.rfdSelectBox ul,
.rfdSelectBox li
{
    padding: 0;
    margin: 0;
    list-style: none;
}

.rfdSelectBox li
{
    cursor: default;
    padding-left:3px;/* In AJAX CSS-es are registered skin-specific first, base second, which creates problems*/
    line-height: 16px;
    height: 16px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.rfdSelectBox_optgroup li
{
    padding-left: 20px !important;
    height: 18px !important;
    line-height: 18px !important;
}

.rfdSelectBox_optgroup .rfdSelectBox_optgroup_label
{
    font-style: italic;
    font-weight: bold;
    padding-left: 0 !important;
}

.rfdSelectBox_Default .rfdSelectBox_optgroup_label:hover
{
    background: none;
    color: #000;
}

.rfdSelectBox.rfdSelectDisabled li:hover
{
    background: none !important;
}

.rfdSelectBox .rfdSelectBox_optgroup li
{
    padding-left: 12px !important;
}

.rfdSelectBox li.rfdSelectBox_optgroup_label
{
    padding-left: 0 !important;
}

For your case you should change the background positions by making the selectors heavier using !important or adding an additional element in the CSS cascade. The Default height of the combo is 22px and in the sprite you have 8 rows - dropdown background normal state, dropdown arrow normal state, dropdown background hover state, dropdown arrow hover state, dropdown background normal state left to right, dropdown arrow normal state left to right, dropdown background hover state left to right, dropdown arrow hover state left to right - all these elements has a height of 22px and the background positions are set respectively to this height and the positions of the elements in the sprite. If you want your custom background to have a height of 30px, you should change firstly your sprite and make all elements with 30px height and then to change the background positions according to the new positions in the custom sprite.

For example, the default position for select background hover state is:

Copy Code

.rfdSelect:hover
{
    background-position: 0 -44px;
}

This is because the position of the element is 44px from the top of the sprite - we have the normal state on position 0 0 and normal state arrow on position 0 -22px, so it is oblivious that the next position will be 22px down - 0 -44px. If we assume that the new custom height is 30px, we will have the nromal background again at position 0 0, the normal dropdown arrow at 0 -30px and the select background hover position at 0 -60px.

Using FireBug with FireFox will make easier for you to find the correct positions for the background images and the correct element that you need to apply padding, margin etc.

Note that Telerik does not support custom solutions, and even if we try to give you the right direction of how to do something it is a developer`s responsibility to make the controls work properly after the customization.

Regards,
Bozhidar
the Telerik team