RibbonBarToggleList breaks the design.

4 posts, 1 answers
  1. Barbaros Saglamtimur
    Barbaros Saglamtimur avatar
    110 posts
    Member since:
    Jul 2012

    Posted 05 Aug 2011 Link to this post

    Hi,

    My RibbonBarGroup code is:
    <telerik:RibbonBarGroup Text="Sayfa düzenleme">
        <Items>
            <telerik:RibbonBarButtonStrip>
                <Buttons>
                    <telerik:RibbonBarButton Size="Small" Text="Sola çevir" ImageUrl="images/rotate_left.png" />
                    <telerik:RibbonBarButton Size="Small" Text="Sağa çevir" ImageUrl="images/rotate_right.png" />
                    <telerik:RibbonBarButton Size="Small" Text="Aynala" ImageUrl="images/mirror.png" />
                    <telerik:RibbonBarButton Size="Small" Text="Yatır" ImageUrl="images/flip.png" />
                </Buttons>
            </telerik:RibbonBarButtonStrip>
            <telerik:RibbonBarButtonStrip>
                <Buttons>
                    <telerik:RibbonBarButton Size="Small" Text="Yakınlaş" ImageUrl="images/zoom_in.png" />
                    <telerik:RibbonBarButton Size="Small" Text="Uzaklaş" ImageUrl="images/zoom_out.png" />
                    <telerik:RibbonBarButton Size="Small" Text="Alanı doldur" ImageUrl="images/fit.png" />
                    <telerik:RibbonBarButton Size="Small" Text="1:1 görünüm" ImageUrl="images/view_1_1.png" />
                </Buttons>
            </telerik:RibbonBarButtonStrip>
            <telerik:RibbonBarToggleList>
                <ToggleButtons>
                    <telerik:RibbonBarToggleButton Size="Small" Text="El" ImageUrl="images/cursor_hand.png" Toggled="true"/>
                    <telerik:RibbonBarToggleButton Size="Small" Text="İşaret" ImageUrl="images/cursor_plus.png" />
                </ToggleButtons>
            </telerik:RibbonBarToggleList>
            <telerik:RibbonBarButton Size="Small" Text="Seçili alanı ayır" ImageUrl="images/cut.png" />
        </Items>
    </telerik:RibbonBarGroup>

    RibbonBarToggleList breaks the design as seen at the attachment.

    Any thoughts?
    TIA
  2. Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts

    Posted 10 Aug 2011 Link to this post

    Hello Barbaros Saglamtimur,

    By default the items in RibbonBar have 3 sizes - Small, Medium and Large. With small exceptions, the basic difference is:
     - Small items are getting 1 of the 3 available in single column lines in the RibbonBarGroup;
     - Medium items also get 1 line, but has their text displayed;
     - Large items are getting all 3 lines.

    The ButtonStrip is always taking one line of the column. Having 2 strips there is still one line available in the column.

    Finally, the ToggleList does not necessarily render in one column. That is why you have an item in first column and another in the second.

    Regards,
    Nikolay Tsenkov
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Barbaros Saglamtimur
    Barbaros Saglamtimur avatar
    110 posts
    Member since:
    Jul 2012

    Posted 22 Aug 2011 Link to this post

    Thanks for your reply.
    Can you guide me to show those buttons in a single line?

    <telerik:RibbonBarToggleList>
        <ToggleButtons>
            <telerik:RibbonBarToggleButton Size="Small" Text="El" ImageUrl="images/cursor_hand.png" Toggled="true"/>
            <telerik:RibbonBarToggleButton Size="Small" Text="İşaret" ImageUrl="images/cursor_plus.png" />
        </ToggleButtons>
    </telerik:RibbonBarToggleList>
    <telerik:RibbonBarButton Size="Small" Text="Seçili alanı ayır" ImageUrl="images/cut.png" />

    Thanks in advance.
  5. Answer
    Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 25 Aug 2011 Link to this post

    Hello Barbaros Saglamtimur,

    To make the long story short, use the following snippet for those three buttons (and adjust the URL for the images)

    <telerik:RibbonBarButtonStrip>
        <Buttons>
            <telerik:RibbonBarToggleButton Size="Small" Text="El" ImageUrl="icons/cursor.png" Toggled="true"/>
            <telerik:RibbonBarToggleButton Size="Small" Text="İşaret" ImageUrl="icons/cross.png" />
            <telerik:RibbonBarButton Size="Small" Text="Seçili alanı ayır" ImageUrl="icons/cut.png" />
        </Buttons>
    </telerik:RibbonBarButtonStrip>

    The regular button strip allows toggle buttons to be included as well.

    I hope this solves your problem, if not, do not hesitate to write back.

    Kind regards,
    Ivan Zhekov
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

Back to Top