New tab only half displaying when it overflows

2 posts, 0 answers
  1. Samara
    Samara avatar
    1 posts
    Member since:
    Aug 2017

    Posted 10 Aug Link to this post

    When the amount of tabs exceeds my window, the next tab only half opens and there is no scroll button to scroll to see the full tab. If I click the left scroll button the right one magically appears, but not initially or automatically.

    1. Can I get the scroll button to display in this scenario?
    2. Can I just get it to display the full tab by automatically scrolling to the end?

    Here is my code and I have also attached an image of the half tab

    <telerik:RadTabControl x:Name="TabControl"
                                           Grid.Row="2"
                                           ItemsSource="{Binding Tabs}"
                                           SelectedItem="{Binding SelectedTabItem, Mode=TwoWay}"
                                           ItemTemplate="{StaticResource ItemTemplate}"
                                           ContentTemplate="{StaticResource ContentTemplate}" 
                                           Width="Auto" Height="Auto"
                                           HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"
                                           SupressSelectedContentTemplateReapplying="True" SelectedItemRemoveBehaviour="SelectNext"
                                           AllowDragReorder="True"
                                           Loaded="TabControl_Loaded"
                                           SelectionChanged="TabControl_OnSelectionChanged"
                                           TabStripPlacement="Right"/>
  2. Dinko
    Admin
    Dinko avatar
    462 posts

    Posted 15 Aug Link to this post

    Hello Samara,

    You can try setting the ScrollMode property of the RadTabControl to Item. This way when a tab is half visible and you press the scroll button the full length of the tab will be visible.
    <telerik:RadTabControl ScrollMode="Item" />

    Give this a try and let me know if it works in your case. 

    As for the behavior when clicking on the left scroll button the right one appears I wasn't able to reproduce this on my side. Can you send me an isolated project from your application, video of the behavior? This way I can further investigate this.

    Regards,
    Dinko
    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