Scrolling issues in TabView and scrolling

[Alexis]

Hi,

I have an issue and I can't sort it out.

I am using a grid where I have 5 rows.

My 4 first rows have Labels or SfAvatarView.

My 5th row has a SfTabView.

I try to have a scrolling on the full page but also inside the SfTabView.

I have then setup a first scroll view on top of my page: 

My code starts like this:

<ContentView.Content>

<Grid VerticalOptions="Start">

          

           

            <ScrollView VerticalOptions="Start" Grid.Row="0" IsVisible="{Binding ShowBusyLoading, Converter={StaticResource nbc}}">

                <Grid RowSpacing="0" >

                    <Grid.RowDefinitions>

                        <RowDefinition Height="Auto" />

                        <RowDefinition Height="Auto" />

                        <RowDefinition Height="Auto" />

                        <RowDefinition Height="Auto" />

                        <RowDefinition Height="Auto" />

                        <RowDefinition Height="Auto" />

                    </Grid.RowDefinitions>

And then for my tabview:

 <tabview:SfTabView

                x:Name="tabView"

                Grid.Row="5" VerticalOptions="Start"

                Margin="0" TabHeaderBackgroundColor="Transparent"

                BackgroundColor="Transparent"

                DisplayMode="Text" 

                EnableSwiping="False"

                SelectedIndex="0"

                VisibleHeaderCount="3">

 <tabview:SfTabView.Items>

 <tabview:SfTabItem 

                        Title="{extensions:Translate Step}"

                        SelectionColor="White"

                        TitleFontColor="White"

                        TitleFontSize="18">

                                    <tabview:SfTabItem.Content>

                                       

                                        <ScrollView VerticalOptions="Start" BackgroundColor="Black">

                                            <StackLayout  Margin="0,1,0,0" 

                                                    Padding="10,10,10,40"  VerticalOptions="Start"

                                                    Spacing="5"

                                                    >

I can't sort it out because I have extra space.

If I remove the scroll on the page it works well but I don't have the scroll on the full page.

How can I sort it out?

[Sakthivel Palaniyappan]

Hi Alexis,

Greetings from Syncfusion.

We have analyzed your query and we can resolve the reported issue by setting TabView vertical option as FillAndExpand. We have created sample based on this and please find the sample from below.

Sample:
https://www.syncfusion.com/downloads/support/directtrac/general/ze/TabViewSample_(1)1535350173.zip

Since we are not aware of your exact requirement, we suggest to try our solution and if you are still facing the same issue, please revert us by modifying the sample based on your application along with replication procedure or provide the sample. This will be helpful for us to investigate further and provide you a better solution at the earliest.

Regards,
Sakthivel P.

[Alexis]

Hi,

Thanks a lot for the response but it doesn't fill my request.

I modified your sample.

As you can see the heightrequest is not respected in the tabview.

Jsut change the height request. The highest height is applied on all the tabs.

Thanks,

Attachment: TabViewSample_f35363bf.zip

[Sakthivel Palaniyappan]

Hi Alexis,

Thanks for the update.

We have analyzed your query and we can resolve the reported issue by adding StackLayout as parent to content as like below code snippet.

XAML:

 

<tabview:SfTabItem.Content> 

    <StackLayout> 

        <ScrollView VerticalOptions="Start" BackgroundColor="Black"> 

            <StackLayout HeightRequest="200" Margin="0,1,0,0" Padding="10,10,10,40"  VerticalOptions="Start" 

                                     Spacing="5" /> 

        </ScrollView> 

    </StackLayout> 

</tabview:SfTabItem.Content> 

 

We have modified the attached sample and please find the sample from below.

Sample:
https://www.syncfusion.com/downloads/support/directtrac/general/ze/TabViewSampleLayout-927268922.zip

Please let us know if you have any other queries.

Regards,
Sakthivel P.

[Alexis]

Hi,

Sorry but for the translate step and contacts it should not scroll beacuse the content in the tabitem is not filling the full height page.

But favorites should beacuase the height is bigger than the height of the page.

So how can I do that?

[Sakthivel Palaniyappan]

Hi Alexis,

Sorry for the inconvenience.

We have analyzed your query, and for each tab item, SfTabView does not support a different height. Only HeightRequest can be configured for SfTabView.

Please let us know if you have any other queries.

Regards,
Sakthivel P.

[Alexis]

Thank you so I have no workarround to fix this?

Is it a bug or do you think you could improve this?

Thanks,

[Sakthivel Palaniyappan]

Hi Alexis,

Thanks for the update.

We have analyzed your query and we would like to know that we don’t have support for set height for each tab item this is our current behavior. We have logged the feature request for “HeightRequest support for each SfTabItem” and you can track the status of the feature from below link

Feedback portal:
https://www.syncfusion.com/feedback/20492/implement-height-support-for-sftabitem-content

Please cast your vote to make it count. We will prioritize the features every release based on the demands and we do not have an immediate plan to implement this feature since we have committed with already planned work. So, this feature will be available in any of our upcoming releases.

If you have any more specifications/suggestions to the feature request, you can add it as a comment in the portal.

Regards,
Sakthivel P.