MinDropDownWidth doesn't work as expected

4 posts, 0 answers
  1. Patrick
    Patrick avatar
    418 posts
    Member since:
    Aug 2012

    Posted 29 Aug 2018 Link to this post

    Hello,

    I have drop down box defined as:

    <tk:RadAutoCompleteBox Name="Members"
                           AutoCompleteMode="Suggest"
                           MaxDropDownHeight="500"
                           MinDropDownWidth="400"
                           SelectionMode="Single"
                           TextSearchMode="Contains"
                           TextSearchPath="NoLastNameFirstName"
                           Width="300">
      <tk:RadAutoCompleteBox.DropDownItemTemplate>
        <DataTemplate>
          <StackPanel Orientation="Horizontal">
            <TextBlock Text="{Binding Section.Code}"
                       Width="50" />
            <TextBlock Text="{Binding NoText}"
                       Width="70" />
            <TextBlock Text="{Binding LastNameFirstName}" />
          </StackPanel>
        </DataTemplate>
      </tk:RadAutoCompleteBox.DropDownItemTemplate>
     
      <tk:RadAutoCompleteBox.FilteringBehavior>
        <tk:AsyncFilteringBehavior />
      </tk:RadAutoCompleteBox.FilteringBehavior>
     
    </tk:RadAutoCompleteBox>

     

    As you can see, the Width is set to 300 and, as the drop down is not wide enough to display all the information, the MinDropDownWidth is set to 400.

    Unfortunately, the result is not what's expected: instead of making the drop down wider, it still has a width of 300, but is just moved to the right by 100!

  2. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    886 posts

    Posted 31 Aug 2018 Link to this post

    Hello Patrick,

    I tried to reproduce the issue you described in a sample project but was, unfortunately, unable to do so.

    I've attached the project I used in the process as well as the result I observed to my reply for your reference.

    As can be observed in the image, expectedly, the width of the dropdown is with 100 pixels more than that of the actual RadAutoCompleteBox control (400 in total).

    Could you please specify whether the result you observe at your end is different than this?

    If that is the case, please either modify the project I attached to replicate the issue or send over a project of your own so that I can further investigate and assist you.

    Thank you in advance for your cooperation on the matter. I look forward to your reply.

    Regards,
    Dilyan Traykov
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Patrick
    Patrick avatar
    418 posts
    Member since:
    Aug 2012

    Posted 31 Aug 2018 in reply to Dilyan Traykov Link to this post

    Hi Dilyan,

    Thank you for your answer.

    One information is missing from my original post: I'm using the Office 2013 theme.

    If you replace the Office Black theme with the Office 2013 one, you'll see the problem.

  4. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    886 posts

    Posted 05 Sep 2018 Link to this post

    Hello Patrick,

    Thank you for the clarification.

    This seems to be a bug in the Office2013 theme and I have logged the following bug report regarding it. As a thank you for your help in addressing this, I've awarded you with some Telerik points.

    The current workaround I can offer is to modify the control template of the RadAutoCompleteBox control and set the MinWidth property of the PART_ListBox element. I've updated the previous project with this fix.

    Please have a look and let me know if you find it applicable for the time being.

    Regards,
    Dilyan Traykov
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top