[Solved] ComboBox with hidden borders

[Kyler]

I would like to create a DropDownList that has nothing more than a down arrow next to the current Item, which is displayed only with a single word.  The effect I am trying to achieve is shown here...
http://weblog.morosystems.cz/ostatni/dropdown-xhtml-css-javascript-replacement-of-classic-selectbox

Would this be possible using RadComboBox and a custom skin?  Important tweaks to achieve the effect are:
1) hide borders completely.
2) set the width of the RadComboBox to the width of the currently selected word (the dropdown portion needs to be longer - to support non-selected long words).

Any pointers on how to achieve this?

[Alex Gyoshev]

Hello Kyler,

A rather interesting scenario!

And now, for the solutions:
1. a custom skin can control all of the appearance of the RadComboBox. I guess you won't need more than the following CSS snippet to hide all the borders:

.RadComboBox .rcbInput
{
    border: 0;
}

2. now this is where it gets tricky. This is an behavior, that isn't available with the RadComboBox out-of-the-box. Nevertheless, it can be achieved with some custom javascript and css, namely:

/*   this is the width of the combo box with no text     (the sum of rounded corners, paddings and toggle image width) */ var emptyComboWidth = 30;

function getComboWidth (text)

{

var textCalculatorField = $get('RadComboBox_TextCalculator');

textCalculatorField.firstChild.nodeValue = text;

return textCalculatorField.offsetWidth;

}

function pageLoad ()

{

var textCalculatorField = document.createElement ('span');

textCalculatorField.id = 'RadComboBox_TextCalculator';

document.forms[0].appendChild (textCalculatorField);

textCalculatorField.appendChild (document.createTextNode (''));

var textWidth = getComboWidth ('<%= RadComboBox1.Text %>');

var combo = $find('<%= RadComboBox1.ClientID %>');

combo.get_inputDomElement().style.width = textWidth + "px";

combo.get_element().style.width = textWidth + emptyComboWidth + "px";

};

function onTextChange(sender, args)

{

var textWidth = getComboWidth (args.get_item().get_text());

sender.get_inputDomElement().style.width = textWidth + "px";

sender.get_element().style.width = textWidth + emptyComboWidth + "px";

}

the css...

#RadComboBox_TextCalculator
{
    visibility: hidden;
    position: absolute;
    left: -400px;
    top: 0;
    font:12px "segoe ui",arial,verdana,sans-serif; /* this should be the same as the input font from the custom skin */
}

.RadComboBox table
{
    table-layout: auto;
}

.RadComboBox table,
.RadComboBox .rcbInputCell
{
    width: auto !important;
}

and the markup from the aspx:

<telerik:RadComboBox ID="RadComboBox1" Skin="Vista" OnClientSelectedIndexChanged="onTextChange">
    <Items>
        <telerik:RadComboBoxItem Value="1" Text="Theta" />
        <telerik:RadComboBoxItem Value="2" Text="Epsilon" />
        <telerik:RadComboBoxItem Value="3" Text="Lambda" />
        <telerik:RadComboBoxItem Value="4" Text="Epsilon" />
        <telerik:RadComboBoxItem Value="5" Text="Rho" />
        <telerik:RadComboBoxItem Value="6" Text="Iota" />
        <telerik:RadComboBoxItem Value="7" Text="Kappa" />
    </Items>
</telerik:RadComboBox>

It looks like quite a lot code, yet the concept is simple - the width of the RadComboBox is adjusted when a new item is selected. The width of the text is determined using a helper html element that is positioned outside the page (the #RadComboBox_TextCalculator).

Best wishes,
Alex
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Kyler]

Hey Telerik Team,
Thanks for the fantastic support.  I'll give it a try.