Ribbonbar - Difficult with width of RibbonBarGroup

[Evelyne MARTIN]

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>

[Princy]

Hello,

Try the following CSS.
CSS:

div.RadRibbonBar div.rrbButtonGroup
 {
   width: 100px !important;
 }

Thanks,
Princy.

[Kate]

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

[Evelyne MARTIN]

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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="ctl00_Head1">
<meta HTTP-EQUIV="Expires" content="-1" />
<meta HTTP-EQUIV="Pragma" content="no-cache" />
<title>
...

If you have any idea...
Thanks.

[Kate]

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