This is a migrated thread and some comments may be shown as answers.

New tab only half displaying when it overflows

1 Answer 7 Views
TabControl
This is a migrated thread and some comments may be shown as answers.
Samara
Top achievements
Rank 1
Samara asked on 10 Aug 2017, 07:54 AM

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"/>

1 Answer, 1 is accepted

Sort by
0
Dinko
Telerik team
answered on 15 Aug 2017, 06:56 AM
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.
Tags
TabControl
Asked by
Samara
Top achievements
Rank 1
Answers by
Dinko
Telerik team
Share this question
or