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

Ribbonbar - Difficult with width of RibbonBarGroup

4 Answers 92 Views
RibbonBar
This is a migrated thread and some comments may be shown as answers.
Evelyne MARTIN
Top achievements
Rank 2
Evelyne MARTIN asked on 03 Jan 2012, 01:36 PM
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>

4 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 03 Jan 2012, 02:31 PM
Hello,

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

Thanks,
Princy.
0
Kate
Telerik team
answered on 03 Jan 2012, 05:27 PM
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
0
Evelyne MARTIN
Top achievements
Rank 2
answered on 04 Jan 2012, 08:25 AM
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.
0
Accepted
Kate
Telerik team
answered on 06 Jan 2012, 03:17 PM
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
Tags
RibbonBar
Asked by
Evelyne MARTIN
Top achievements
Rank 2
Answers by
Princy
Top achievements
Rank 2
Kate
Telerik team
Evelyne MARTIN
Top achievements
Rank 2
Share this question
or