[Solved] Adjusting width for RadComboBox if additional image is present

[Sunil]

Hi , 

I’m working on aligning the loading dropdown that renders under rcbSlide with the width of the RadComboBox, even when an additional icon is present. Since rcbSlide resides outside the RadComboBox container, I need guidance on how to ensure the dropdown inherits or matches the RadComboBox width consistently.

[Vasko]

Hello Sunil,

Thank you for the provided screenshot. 

For this particular scenario I suggest you take a look at our DropDown Configurator demo where you can try to configure the DropDown to your liking. If it is not helpful to you, could you please share a sample markup for the ComboBox so I can examine it and give a more precise answer.

Regards,
Vasko
Progress Telerik

[Sunil]

Hi Vasko , 

Please find the markup below. 

<div class="rcbSlide">
  <div id="dropdown_container" class="combo-dropdown radcombo_outlook" style="width: 170px; height: 420px;">
    <div class="combo-scroll">
      <ul class="combo-list" style="width: 170px;"></ul>
    </div>
  </div>
</div>

<table style="width: 100%;">
  <tbody>
    <tr class="custom-padding">
      <td style="padding-right: 0; width: 100%;">
        <div id="auto_complete_d" class="auto-complete-control" data-member="DisplayText">
          <table class="auto-complete" border="0">
            <tbody>
              <tr>
                <td style="padding: 0;">
                  <div id="d_combo" class="combo-box outlook" style="width: 100%; white-space: normal;">
                    <table class="combo-input" style="width: 100%; border-collapse: collapse;">
                      <tbody>
                        <tr>
                          <td class="combo-input-cell" style="width: 100%;">
                            <input
                              id="d_combo_input"
                              class="combo-input prevent-decorate empty-message"
                              type="text"
                              value="No selection"
                              autocomplete="off" />
                          </td>
                          <td class="combo-arrow-cell combo-arrow-hidden"></td>
                        </tr>
                      </tbody>
                    </table>
                    <input id="d_combo_state" type="hidden" value="{&quot;items&quot;:[],&quot;value&quot;:&quot;&quot;}" />
                  </div>
                </td>
                <td style="width: 21px; padding: 0;">
                  <button id="d_search_button" class="auto-complete-search-icon" type="button"></button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </td>
      <td style="width: 2px; padding: 0;"></td>
    </tr>
  </tbody>
</table>

Best Regards,

Sunil Shankar S R

[Vasko]

Hello Sunil,

Thank you for the provided HTML render markup, however, what I meant was markup was the ASPX page (ComboBox markup), not what is rendered in the end.

<telerik:RadComboBox ID="RadComboBox1" runat="server" RenderMode="Lightweight">
    <Items>
        <telerik:RadComboBoxItem Text="Item 1" />
        <telerik:RadComboBoxItem Text="Item 2" />
        <telerik:RadComboBoxItem Text="Item 3" />
        <telerik:RadComboBoxItem Text="Item 4" />
    </Items>
</telerik:RadComboBox>

Please share with me the ComboBox markup so I can assist you further.

Regards,
Vasko
Progress Telerik