Dropdown view position is at wrong position when combobox is not a direct child of scroll view

[closetoyou293]

Please fill out either the bug or feature request section and remove whatever section you are not using.

Bug

• Version Number of Control: latest
• Device Tested On: iOS simulator
• Simulator Tested On: iOS simulator

Expected Behavior

Dropdown view should be shown below combobox

Actual Behavior

Dropdown view is shown at the top of scrollview

Steps to reproduce the Behavior

place combobox in stacklayout/grid then place them in scrollview

[ChaseFlorell]

I do recall fighting with this when I built it, however I thought I had it licked. Can you please comment back with your layout for a repro?

Is this it?

<ContentPage>
    <ScrollView>
        <StackLayout>
            <xfx:XfxComboBox />
        </StackLayout>
    <ScrollView>
</ContentPage>

[closetoyou293]

It happened in 3 case

1. Place Combobox in second layer <ContentPage> <ScrollView> <StackLayout> <StackLayout> <xfx:XfxComboBox /> </StackLayout> </StackLayout> <ScrollView> </ContentPage>

2. Place combobox in custom control then place that control in scrollview <ContentView> <Grid> <xfx:XfxComboBox /> </Grid> </ContentView>

3. Combobox is out of view at first time because content of scrollview is too long. => Fixed by forcing re-draw when it focused.

protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e) { base.OnElementPropertyChanged(sender, e);

        if (e.PropertyName == Entry.IsPasswordProperty.PropertyName)
            KillPassword();
        if (e.PropertyName == XfxComboBox.ItemsSourceProperty.PropertyName)
            SetItemsSource();
        else if (e.PropertyName == XfxComboBox.ThresholdProperty.PropertyName)
            SetThreshold();
        else if (e.PropertyName == "IsFocused")
            SetNeedsDisplay();
    }

[ChaseFlorell]

I've got views with exactly that, and "it works on my machine", however point 3 intrigues me. I'll have to test that one.

[ChaseFlorell]

@closetoyou293 what I really need here is what your markup looks like. Can you just copy/paste the relevant XAML?

[closetoyou293]

<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:forms="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
             xmlns:xfx="clr-namespace:Xfx;assembly=HomeCreditMock"
             x:Class="Test.Controls.CustomCombobox">
  
        <Grid x:Name="Root" Padding="0" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
        
           <xfx:XfxComboBox x:Name="ComboBox" Grid.Column="0" Grid.ColumnSpan="2" />
        <forms:CachedImage Grid.Column="1" 
                           Source="arrorDropdown" 
                           HorizontalOptions="Center"
                           VerticalOptions="Center"
                           HeightRequest="10"
                           WidthRequest="20">
            <forms:CachedImage.GestureRecognizers>
                <TapGestureRecognizer Tapped="OnTapped"></TapGestureRecognizer>
            </forms:CachedImage.GestureRecognizers>
        </forms:CachedImage>
       </Grid>       
</ContentView>

[closetoyou293]

<ScrollView>
         <StackLayout HorizontalOptions="FillAndExpand"
                      Padding="10"
                      VerticalOptions="FillAndExpand">
                 <controls:CustomCombobox HorizontalOptions="FillAndExpand"
                                      PlaceHolder="{Binding [RelativeInfo_Relationship]}"
                                      ItemsSource="{Binding RelatedTypes}"
                                      ItemDisplay="Description"
                                      SelectedItem="{Binding FirstRelativeRelationship}"
                                      Margin="20,1,20,1" />
  </StackLayout>
</ScrollView> 

[closetoyou293]

That scroll view is placed in ContentView. Please put some control so that combobox is only shown when you scroll down, then you will see the bug I mentioned. Sorry for bad format in my comment :)

[e455a81e-d3ba-41a2-bc6d-7aafb1d9a5cd]

Hi, I was experiencing the same issue and was able to fix it, at least for my specific use-case, by adding the following code to the Draw(...) Method of MbAutoCompleteTextField:

_drawnFrame = Superview.ConvertRectToView(_drawnFrame, UIApplication.SharedApplication.KeyWindow);
view = _parentViewController.View;
frame = new CGRect(_drawnFrame.X, _drawnFrame.Bottom, _drawnFrame.Width, AutocompleteTableViewHeight);

[ChaseFlorell]

@LariscusObscurus are you interested in submitting a PR?

[jessejiang0214]

I met the same issue, only on iOS

Here's code which can reproduce this

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xfx="clr-namespace:Xfx;assembly=Xfx.Controls"
             xmlns:app="clr-namespace:Xfx.Controls.Example.Features.Controls;assembly=Xfx.Controls.Example"
             x:Class="Xfx.Controls.Example.Features.Controls.ControlsPage"
             ControlTemplate="{StaticResource TestTemplate}"
             Title="Custom Controls Example">
    <ContentPage.BindingContext>
        <app:MainPageModel />
    </ContentPage.BindingContext>
    <ContentPage.Resources>
        <ResourceDictionary>
            <Style TargetType="Label">
                <Setter Property="VerticalTextAlignment" Value="Center" />
            </Style>
            <ControlTemplate x:Key="TestTemplate">
                <ScrollView>
                    <Grid Padding="20">   
                         <ContentPresenter Margin="0,10,0,0" />
                    </Grid>
                </ScrollView>
            </ControlTemplate>
        </ResourceDictionary>
    </ContentPage.Resources>
        <Grid RowSpacing="0" ColumnSpacing="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="2*" />
            </Grid.ColumnDefinitions>

            <Label Grid.Row="0" Grid.Column="0" Text="ComboBox" />
            <xfx:XfxComboBox Grid.Row="0"
                             Grid.Column="1"
                             Placeholder="Enter your email address"
                             ActivePlaceholderColor="BlueViolet"
                             ItemSelected="Email_ItemSelected"
                             Focused="Email_OnFocused" 
                             Unfocused="Email_OnUnfocused"
                             SelectedItem="{Binding SelectedItem}"
                             Text="{Binding EmailAddress}"
                             ItemsSource="{Binding EmailSuggestions}"
                             SortingAlgorithm="{Binding SortingAlgorithm}" />

            <Label Grid.Row="1" Grid.Column="0" Text="Material Entry" />
            <xfx:XfxEntry Grid.Row="1"
                          Grid.Column="1"
                          Placeholder="Enter your name"
                          Text="{Binding Name}"
                          ErrorText="{Binding NameErrorText}" />

            <Label Grid.Row="2" Grid.Column="0" Text="No Error Message" />
            <xfx:XfxEntry Grid.Row="2"
                          Grid.Column="1"
                          Placeholder="Enter your name (error message won't show)"
                          ErrorDisplay="None"
                          Text="{Binding Name}"
                          ErrorText="{Binding NameErrorText}" />

            <Label Grid.Row="3" Grid.Column="0" Text="No Floating Label" />
            <xfx:XfxEntry Grid.Row="3"
                          Grid.Column="1"
                          Placeholder="This hint won't float, and it's a password entry"
                          Text="{Binding Foo}"
                          ErrorText="{Binding FooErrorText}"
                          IsPassword="True"
                          FloatingHintEnabled="False" />

            <Label Grid.Row="4" Grid.Column="0" Text="Change Colors" />
            <xfx:XfxEntry Grid.Row="4"
                          Grid.Column="1"
                          Placeholder="Change Colors"
                          PlaceholderColor="DodgerBlue"
                          ActivePlaceholderColor="BlueViolet"
                          TextColor="Crimson"
                          Text="{Binding Foo}" />

            <Label Grid.Row="5" Grid.Column="0" Text="Font Sizes" />
            <xfx:XfxEntry Grid.Row="5"
                          Grid.Column="1"
                          FontSize="10"
                          Placeholder="Enter something "/>
        </Grid>
</ContentPage>

And @LariscusObscurus 's solution cannot work in this case.

[SagarPanwala]

Anyone is working on this ?

[ChaseFlorell]

I haven't fixed this yet, but I do have a question. Are you wrapping your layout in a ScrollView?

[SagarPanwala]

Yes it's wrap in scrollview, like below Scrollview - Stack - Grid - combo -

On Sun, 23 Jun 2019, 6:26 a.m. Chase Florell, [email protected] wrote:

I haven't fixed this yet, but I do have a question. Are you wrapping your layout in a ScrollView?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/XamFormsExtended/Xfx.Controls/issues/19?email_source=notifications&email_token=ACDWB3C5NMPPXEEUDXRLYILP33C43A5CNFSM4DQIENEKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYKUFVA#issuecomment-504709844, or mute the thread https://github.com/notifications/unsubscribe-auth/ACDWB3AE6A4D5OTKQSSRFBTP33C43ANCNFSM4DQIENEA .

[ChaseFlorell]

if it's not too much trouble, could you copy/paste your XAML?

[SagarPanwala]

I'm able to reproduce this with your sample as well. Just replace this Control.xaml file will be enough to reproduce the issue and don't forgot to change extension from txt to xaml.

ControlsPage.txt

[BeranekCZ]

I have same problem. When ComboBox is inside ContentPage.Content->ScrollView->StackLayout everything is ok. But when I put ComboBox inside ContentPage.Content->ScrollView->StackLayout->StackLayout or AbsoluteLayout I get same error. List of choices is over entry