How to add small separator between buttons in custom ribbon (Ribbon x : XML)?

Viewed 32

I wanted a small separator to appear between buttons in custom ribbon tab. But the <separator id="MySeparatorE1" /> always draws large vertical separator. How can we get small separator as circled in picture to appear between the buttons ?

Info

I want a small seperator between Sample1 and Sample2 of figure (In figure both are written sample though) !

</group>
            <group id="customgroupF" label="EDIT SECTION">
               <dropDown id="dropDownF1" label="Hello:" sizeString="B_300*300" getItemCount="GetItemCount1" getItemLabel="GetItemLabel1" onAction="onaction1" getSelectedItemIndex="ItemSelectedIndex1" />
               <dropDown id="dropDownF2" label="Hi:" sizeString="C_300*300" getItemCount="GetItemCount2" getItemLabel="GetItemLabel2" onAction="onaction2" getSelectedItemIndex="ItemSelectedIndex2" />
                   <box id="box1" boxStyle="horizontal">
                  <button id="custombuttonF3" label="Sample1" screentip="Increase" onAction="Macro4" imageMso="UpArrow2" />
                  <button id="custombuttonF4" label="Sample2" screentip="Decrease" onAction="Macro4" imageMso="DownArrow2" />
                  </box>
               <box id="box2" boxStyle="vertical">
                  <button id="custombuttonF1" label="Run1" showLabel="false" screentip="Edit1" onAction="Macro4" imageMso="MacroPlay" />
                  <button id="custombuttonF2" label="Run2" showLabel="false" screentip="Edit2" onAction="Macro4" imageMso="MacroPlay" />
               </box>
            </group>
1 Answers

By default, the Ribbon engine determines the positions of controls that you add to a group. If you want to define the layout of the controls with more precision, you can group the controls within one or more boxes. When you create a box, you specify its orientation (horizontal or vertical). A group can contain multiple boxes, and you can include vertical dividers between the boxes. The vertical dividers are created by using the separator control, which is used only for vertical boxes. For example:

<group id="CustomGroup2" label="Vertical Boxes" 
   insertBeforeMso="GroupClipboard">
  <box id="box3" boxStyle="vertical">
    <button id="buttonB1" label="Button1"/>
    <button id="buttonB2" label="Button2"/>
  </box>
  <separator id="separator2"/>
  <box id="box4" boxStyle="vertical">
    <button id="buttonBA" label="ButtonA"/>
    <button id="buttonBB" label="ButtonB"/>
    <button id="buttonBC" label="ButtonC"/>
  </box>
</group>
Related