Ribbonbar - Difficult with width of RibbonBarGroup

5 posts, 1 answers
  1. Evelyne MARTIN
    Evelyne MARTIN avatar
    4 posts
    Member since:
    Apr 2010

    Posted 03 Jan 2012 Link to this post

    hello,

    I have difficulter with the dimensionning of a RibbonBarGroup  with 4  RibbonBarToggleButton.

    I want the 4 buttons to have the same width. But when i put a width attribute , it does not work well.
    Without width attribute, the 4 buttons are visible, but with different width.

    But when i put mouse on them, the fourth button go above (see picture).
    To fix that, i add a Font-Bold="True" , so the button don't disappear.!

    Another problem, is that the RibbonBarGroup  withText="Nbre Breaks" is not displayed completly, the s is not shown.

    My question is : 
        How can we fixed the width of the RibbonBarGroup  ?

    The best configuration i found :
    <telerik:RadRibbonBar ID="ribbon_Creation" runat="server" Skin="Outlook">
           <telerik:RibbonBarTab Text="Demande de cotation - Prix Standard">
               <telerik:RibbonBarGroup Text="Demande" Value="Etape"  >
                   <Items>
                       <telerik:RibbonBarToggleButton Text=" Démarrer " Value="e1" Toggled="true" 
                           Size="Large"  BorderColor="Silver" BorderStyle="Outset" BorderWidth="1px"
                           ToolTip="Saisir l'entête de la demande" ImageUrl="~/Gen_Images/1Entete.png" 
                           ImageUrlLarge="~/Gen_Images/1Entete.png"  Font-Bold="True"  />
                       <telerik:RibbonBarToggleButton Text="Saisir Ligne" Value="e2" Size="Large"
                           BorderColor="Silver" BorderStyle="Outset" BorderWidth="1px"   ToolTip="Saisir les lignes"
                           ImageUrlLarge="~/Gen_Images/2Lignes.png" Font-Bold="True"  />
                       <telerik:RibbonBarToggleButton Text="  Analyser  " Value="e3" Size="Large"
                            BorderColor="Silver" BorderStyle="Outset" BorderWidth="1px" DisabledImageUrl="~/Gen_Images/3analyse_disable.png"
                           DisabledImageUrlLarge="~/Gen_Images/3analyse_disable.png" ToolTip="Analyser les lignes"
                           ImageUrlLarge="~/Gen_Images/3analyse.png"  Font-Bold="True"  />
                       <telerik:RibbonBarToggleButton Text="  Envoyer  " Value="e4"  
                           Size="Large" BorderColor="Silver" BorderStyle="Outset" BorderWidth="1px" ToolTip="Lancer la demande de cotation"
                           DisabledImageUrl="~/Gen_Images/4lancer_disable.png" DisabledImageUrlLarge="~/Gen_Images/4lancer_disable.png"
                           ImageUrlLarge="~/Gen_Images/4lancer.png"  Font-Bold="True"  />
                            
                   </Items>
               </telerik:RibbonBarGroup>
               <telerik:RibbonBarGroup Text="Nbre Breaks" Value="Break">
                   <Items>
                       <telerik:RibbonBarToggleButton Size="Small" Value="b1" ToolTip="Nombre de break=1"
                           ImageUrl="~/Gen_Images/numero_1.png" />
                       <telerik:RibbonBarToggleButton Size="Small" Value="b4" ToolTip="Nombre de break=4"
                           ImageUrl="~/Gen_Images/numero_4.png" />
                       <telerik:RibbonBarToggleButton Size="Small" Value="b7" ToolTip="Nombre de break=7"
                           ImageUrl="~/Gen_Images/numero_7.png" />
                       <telerik:RibbonBarToggleButton Size="Small" Value="b2" ToolTip="Nombre de break=2"
                           ImageUrl="~/Gen_Images/numero_2.png" />
                       <telerik:RibbonBarToggleButton Size="Small" Value="b5" ToolTip="Nombre de break=5"
                           ImageUrl="~/Gen_Images/numero_5.png" />
                       <telerik:RibbonBarToggleButton Size="Small" Value="b8" ToolTip="Nombre de break=8"
                           ImageUrl="~/Gen_Images/numero_8.png" />
                       <telerik:RibbonBarToggleButton Size="Small" Value="b3" ToolTip="Nombre de break=3"
                           ImageUrl="~/Gen_Images/numero_3.png" Toggled="True" />
                       <telerik:RibbonBarToggleButton Size="Small" Value="b6" ToolTip="Nombre de break=6"
                           ImageUrl="~/Gen_Images/numero_6.png" />
                   </Items>
               </telerik:RibbonBarGroup>
               <telerik:RibbonBarGroup Text="Lignes" Value="Ligne">
                   <Items>
                       <telerik:RibbonBarButton Text="1" Value="a1" ImageUrlLarge="~/Gen_Images/add_lignes.png"
                           ToolTip="Ajouter une ligne" ImageUrl="~/Gen_Images/add_lignes.png" Size="Medium" />
                       <telerik:RibbonBarButton Text="5" Value="a5" ToolTip="Ajouter 5 lignes" ImageUrl="~/Gen_Images/add_lignes.png"
                           Size="Medium" />
                       <telerik:RibbonBarButton Text="10" Value="a10" ToolTip="Ajouter 10 lignes" ImageUrl="~/Gen_Images/add_lignes.png"
                           Size="Medium" />
                       <telerik:RibbonBarButton Text="20" Value="a20" ToolTip="Ajouter 20 lignes" ImageUrl="~/Gen_Images/add_lignes.png"
                           Size="Medium" />
                       <telerik:RibbonBarButton Text="50" Value="a50" ToolTip="Ajouter 50 lignes" ImageUrl="~/Gen_Images/add_lignes.png"
                           Size="Medium" />
                       <telerik:RibbonBarButton Size="Medium" Text=" " Value="s1" ToolTip="Supprimer les lignes vides"
                           ImageUrl="~/Gen_Images/del_lignes.png" />
                   </Items>
               </telerik:RibbonBarGroup>
               <telerik:RibbonBarGroup Text="Colonnes" Value="Colonne">
                   <Items>
                       <telerik:RibbonBarToggleButton Text="Description" Value="c1" ImageUrlLarge="~/Gen_Images/add_colonne.png"
                           ToolTip="Ajouter la description de l'article" ImageUrl="~/Gen_Images/add_colonne.png"
                           Size="Medium" />
                       <telerik:RibbonBarToggleButton Text="Devise" Value="c2" ImageUrlLarge="~/Gen_Images/add_colonne.png"
                           ToolTip="Ajouter la devise de cotation" ImageUrl="~/Gen_Images/add_colonne.png"
                           Size="Medium" />
                       <telerik:RibbonBarToggleButton Text="Norme" Value="c3" ImageUrlLarge="~/Gen_Images/add_colonne.png"
                           ToolTip="Ajouter Article Norme (ou client)" ImageUrl="~/Gen_Images/add_colonne.png"
                           Size="Medium" />
                   </Items>
               </telerik:RibbonBarGroup>
               <telerik:RibbonBarGroup Text="Outils" Value="Autre">
                   <Items>
                       <telerik:RibbonBarTemplateItem>
                           <asp:HyperLink runat="server" NavigateUrl="~/Consultation/Print_Cotation_CSR.aspx?IdDoc="
                               Target="_blank" ID="Report_Offre" Text="Imprimer" ImageUrl="~/Gen_Images/Print.png"
                               ToolTip="Affichage d'une page pour permettre l'impression."
                           </asp:HyperLink>
                           <asp:Label ID="Label1" runat="server" Text=" Print<br>"></asp:Label>
                           <asp:HyperLink runat="server" NavigateUrl="~/Consultation/Creation_CC.aspx.aspx?IdDoc="
                               Target="_blank" ID="SaisieColler" Text="Coller" ImageUrl="~/Gen_Images/ico_modifier_16.png"
                               ToolTip="Saisie par copier coller"
                           </asp:HyperLink>
                           <asp:Label ID="Label2" runat="server" Text=" Coller"></asp:Label>
                       </telerik:RibbonBarTemplateItem>
                   </Items>
               </telerik:RibbonBarGroup>
               <telerik:RibbonBarGroup Text="Langue" Value="Langue">
                   <Items>
                       <telerik:RibbonBarToggleButton Text="Français" Value="FR" ToolTip="Français" ImageUrl="~/Gen_Images/fr.png"
                           Size="Medium" />
                       <telerik:RibbonBarToggleButton Text="English" Value="EN" ToolTip="English" ImageUrl="~/Gen_Images/usa.png"
                           Size="Medium" />
                   </Items>
               </telerik:RibbonBarGroup>
           </telerik:RibbonBarTab>
       </telerik:RadRibbonBar>
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 03 Jan 2012 Link to this post

    Hello,

    Try the following CSS.
    CSS:
    div.RadRibbonBar div.rrbButtonGroup
     {  
       width: 100px !important;
     }

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 03 Jan 2012 Link to this post

    Hi Martin,

    I tested your code and I can not get the last button to fall behind the group text as demonstrated in the image that you attached. The width of the RibbonBarToggleButton buttons indeed is not the same for all of the buttons due to the different text length that is applied. You can however, alter their width by applying the following css class selector:
    div.RadRibbonBar .rrbLargeButton .rrbButtonMid,
    div.RadRibbonBar .rrbCollapsedGroup .rrbButtonMid {
        width: 60px;
    }

    Also the css class selectors that Shinu suggested assigns the same width for all groups so that the text of the group is visible.  

    All the best,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  5. Evelyne MARTIN
    Evelyne MARTIN avatar
    4 posts
    Member since:
    Apr 2010

    Posted 04 Jan 2012 Link to this post

    Thanks for your response.

    But it is not working.
    When running from Visual Studio, local host , all is OK, with your style or without your style.
    But when the application is deployed and run (IIS 6) it is not OK, button do not have the good width, button disappear.
    (has an evidence, i deployed all the application, and start and stop IIS )

    Perhaps, the cause is on the server IIS ? Framework Version ? Page Header ?

       
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <head id="ctl00_Head1">
    <meta HTTP-EQUIV="Expires" content="-1" />
    <meta HTTP-EQUIV="Pragma" content="no-cache" />
    <title>
    ...

    If you have any idea...
    Thanks.
  6. Answer
    Kate
    Admin
    Kate avatar
    1898 posts

    Posted 06 Jan 2012 Link to this post

    Hello Evelyne,

    I get the appearance that you describe when running the page under compatibility mode in IE. However, currently we do not provide support for RadRibbonBar control under compatibility view in IE. I will though forward your request to our development team for further investigation.   

    All the best,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017