How to size the width of the tab header

7 posts, 0 answers
  1. Willamette
    Willamette avatar
    2 posts
    Member since:
    Jun 2012

    Posted 26 Jun 2012 Link to this post

    Hi All,

    Is there a way to widen the tab header at runtime so that the text can be shown clear?

    Thanks

    Tab headers at design time
     


    Tab header at run time
     
  2. Lancelot
    Lancelot avatar
    251 posts
    Member since:
    Jul 2012

    Posted 28 Jun 2012 Link to this post

    Hi Willamette,

    You can change the width of the header by altering the style of the RadRibbonTab. This link will bring you to the documentation on how to change the style.

    Once you go to that link and follow the instructions on how to access the template, notice the root grid of the TabStyle. You can widen the size in there. I've attached an image to help you identify which element I'm speaking of.

    Good Luck,
    Lancelot
  3. DevCraft banner
  4. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 29 Jun 2012 Link to this post

    Hello,

    Yet another approach that you can use is to change the RadRibbonTab.Width property as it also controls the Width of the tabs.

    Greetings,
    Tina Stancheva
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  5. DQ
    DQ avatar
    11 posts
    Member since:
    Jul 2012

    Posted 19 Jul 2012 Link to this post

    No matter what I did, the width of the tab header is fixed.

    "Using a computer should be easier than not using a computer.  Using a add-on third party tool should be easier than not using a add-on third party tool."
  6. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 20 Jul 2012 Link to this post

    Hi DQ,

    Unfortunately we're not sure what might be causing the issue in your solution. However, if you can send us a sample project reproducing the case, we will gladly assist you in resolving it.

    Greetings,
    Tina Stancheva
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  7. John Cutler
    John Cutler avatar
    1 posts
    Member since:
    Feb 2010

    Posted 13 May 2013 Link to this post

    I have been having this same problem.  You can set the width just fine if you only have a few tabs and your browser window is wide enough, the problem is when you re-size the browser smaller. Instead of the tabs maintaining their width and showing the Left and Right Scroll Button Elements in the RibbonScrollViewerArea it re-sizes the Header Tabs eventually making them all a uniform width.   I would like to be able to fix the width of the some or all of the tabs and have it show the scroll bars rather than re-size the tabs but so far nothing has worked.   

    Here is the xaml from a sample application I put together to work on this problem.  Nothing I have tried has been able to fix the width of the tabs, any help with this would be greatly appreciated.  

    <UserControl x:Class="RadRibbonView.MainPage"
            mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
        <Grid x:Name="LayoutRoot">
                <Grid.RowDefinitions>
                <RowDefinition Height="151"/>
                <RowDefinition Height="329*"/>
            </Grid.RowDefinitions>
            <telerik:RadRibbonView VerticalAlignment="Top"  >
                <telerik:RadRibbonTab Header="Ribbon Tab 1" Width="130">
                    <telerik:RadRibbonGroup Header="RibbonGroup">
                        <telerik:RadRibbonGroup.Variants>
                            <telerik:GroupVariant Priority="0" Variant="Collapsed"/>
                            <telerik:GroupVariant Priority="0" Variant="Small"/>
                            <telerik:GroupVariant Priority="0" Variant="Medium"/>
                            <telerik:GroupVariant Priority="0" Variant="Large"/>
                        </telerik:RadRibbonGroup.Variants>
                    </telerik:RadRibbonGroup>
                </telerik:RadRibbonTab>
                <telerik:RadRibbonTab Header="Ribbon Tab 2"  >
                    <telerik:RadRibbonGroup Header="RibbonGroup">
                        <telerik:RadRibbonGroup.Variants>
                            <telerik:GroupVariant Priority="0" Variant="Collapsed"/>
                            <telerik:GroupVariant Priority="0" Variant="Small"/>
                            <telerik:GroupVariant Priority="0" Variant="Medium"/>
                            <telerik:GroupVariant Priority="0" Variant="Large"/>
                        </telerik:RadRibbonGroup.Variants>
                    </telerik:RadRibbonGroup>
                </telerik:RadRibbonTab>
                <telerik:RadRibbonTab Header="Ribbon Tab 3"   >
                    <telerik:RadRibbonGroup Header="RibbonGroup">
                        <telerik:RadRibbonGroup.Variants>
                            <telerik:GroupVariant Priority="0" Variant="Collapsed"/>
                            <telerik:GroupVariant Priority="0" Variant="Small"/>
                            <telerik:GroupVariant Priority="0" Variant="Medium"/>
                            <telerik:GroupVariant Priority="0" Variant="Large"/>
                        </telerik:RadRibbonGroup.Variants>
                    </telerik:RadRibbonGroup>
                </telerik:RadRibbonTab>
                <telerik:RadRibbonTab Header="Ribbon Tab 4"   >
                    <telerik:RadRibbonGroup Header="RibbonGroup">
                        <telerik:RadRibbonGroup.Variants>
                            <telerik:GroupVariant Priority="0" Variant="Collapsed"/>
                            <telerik:GroupVariant Priority="0" Variant="Small"/>
                            <telerik:GroupVariant Priority="0" Variant="Medium"/>
                            <telerik:GroupVariant Priority="0" Variant="Large"/>
                        </telerik:RadRibbonGroup.Variants>
                    </telerik:RadRibbonGroup>
                </telerik:RadRibbonTab>
                <telerik:RadRibbonTab Header="Ribbon Tab 5"   >
                    <telerik:RadRibbonGroup Header="RibbonGroup">
                        <telerik:RadRibbonGroup.Variants>
                            <telerik:GroupVariant Priority="0" Variant="Collapsed"/>
                            <telerik:GroupVariant Priority="0" Variant="Small"/>
                            <telerik:GroupVariant Priority="0" Variant="Medium"/>
                            <telerik:GroupVariant Priority="0" Variant="Large"/>
                        </telerik:RadRibbonGroup.Variants>
                    </telerik:RadRibbonGroup>
                </telerik:RadRibbonTab>
                <telerik:RadRibbonTab Header="Ribbon Tab 6" >
                    <telerik:RadRibbonGroup Header="RibbonGroup">
                        <telerik:RadRibbonGroup.Variants>
                            <telerik:GroupVariant Priority="0" Variant="Collapsed"/>
                            <telerik:GroupVariant Priority="0" Variant="Small"/>
                            <telerik:GroupVariant Priority="0" Variant="Medium"/>
                            <telerik:GroupVariant Priority="0" Variant="Large"/>
                        </telerik:RadRibbonGroup.Variants>
                    </telerik:RadRibbonGroup>
                </telerik:RadRibbonTab>
                <telerik:RadRibbonTab Header="Ribbon Tab 7"  >
                    <telerik:RadRibbonGroup Header="RibbonGroup">
                        <telerik:RadRibbonGroup.Variants>
                            <telerik:GroupVariant Priority="0" Variant="Collapsed"/>
                            <telerik:GroupVariant Priority="0" Variant="Small"/>
                            <telerik:GroupVariant Priority="0" Variant="Medium"/>
                            <telerik:GroupVariant Priority="0" Variant="Large"/>
                        </telerik:RadRibbonGroup.Variants>
                    </telerik:RadRibbonGroup>
                </telerik:RadRibbonTab>
                <telerik:RadRibbonTab Header="Ribbon Tab 8"  >
                    <telerik:RadRibbonGroup Header="RibbonGroup">
                        <telerik:RadRibbonGroup.Variants>
                            <telerik:GroupVariant Priority="0" Variant="Collapsed"/>
                            <telerik:GroupVariant Priority="0" Variant="Small"/>
                            <telerik:GroupVariant Priority="0" Variant="Medium"/>
                            <telerik:GroupVariant Priority="0" Variant="Large"/>
                        </telerik:RadRibbonGroup.Variants>
                    </telerik:RadRibbonGroup>
                </telerik:RadRibbonTab>
                <telerik:RadRibbonTab Header="Ribbon Tab 9"  >
                    <telerik:RadRibbonGroup Header="RibbonGroup">
                        <telerik:RadRibbonGroup.Variants>
                            <telerik:GroupVariant Priority="0" Variant="Collapsed"/>
                            <telerik:GroupVariant Priority="0" Variant="Small"/>
                            <telerik:GroupVariant Priority="0" Variant="Medium"/>
                            <telerik:GroupVariant Priority="0" Variant="Large"/>
                        </telerik:RadRibbonGroup.Variants>
                    </telerik:RadRibbonGroup>
                </telerik:RadRibbonTab>
                <telerik:RadRibbonTab Header="Ribbon Tab 10"  >
                    <telerik:RadRibbonGroup Header="RibbonGroup">
                        <telerik:RadRibbonGroup.Variants>
                            <telerik:GroupVariant Priority="0" Variant="Collapsed"/>
                            <telerik:GroupVariant Priority="0" Variant="Small"/>
                            <telerik:GroupVariant Priority="0" Variant="Medium"/>
                            <telerik:GroupVariant Priority="0" Variant="Large"/>
                        </telerik:RadRibbonGroup.Variants>
                    </telerik:RadRibbonGroup>
                </telerik:RadRibbonTab>
             </telerik:RadRibbonView>
     
        </Grid>
    </UserControl>
  8. Kiril Vandov
    Admin
    Kiril Vandov avatar
    324 posts

    Posted 15 May 2013 Link to this post

    Hello John,

    You could use the MinTabWidth property of the RibbonTabStripPanel and set the desired minimum width, like follows:
    xmlns:telerikRibbonViewPrimitives="clr-namespace:Telerik.Windows.Controls.RibbonView.Primitives;assembly=Telerik.Windows.Controls.RibbonView"
    ...
    <telerik:RadRibbonView>    
        <telerik:RadRibbonView.ItemsPanel>
            <ItemsPanelTemplate>
                <telerikRibbonViewPrimitives:RibbonTabStripPanel MinTabWidth="300"/>
            </ItemsPanelTemplate>
        </telerik:RadRibbonView.ItemsPanel>
    ...
    Keep in mind that the MinTabWidth property will prevent the tabs from getting smaller than the set value, but if the text requires less space, the tab width will be reduced. However If you want to make your tabs look uniform you could set the MinWidth property of the RadRibbonTabs to be equal to the MinTabWidth property of the TabStrilPanel.

    I hope this information helps. Please let us know if this works for you.

    Kind regards,
    Kiril Vandov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top
DevCraft banner