none
Backstage TaskFormGroup Overlaps RRS feed

  • Question

  • Help...

    I'm having an issue with the backstage in office 2013. No matter what I try I can't get the backstage TaskFormGroup to display correctly in Office 2013.  No matter what I do the category is always overlapped by the group.

    Here is an example:

    And the code (it's an example from the msdn website)

    <customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui" onLoad="InitializeBackstage">
    	<backstage onShow="cbOnShow">
    <tab id="teamTasksTab" label="Team Tasks" >
       <firstColumn>
          <taskFormGroup id="teamTaskFormGroup">
                <category id="engineeringTeamCategory" label="Engineering Tasks">
                  <task id="engineeringTeamTasks" label="Manager: William Rodgers" description="Engineering Excellance" imageMso="TableDesign">
                    <group id="engineeringTeamTasksGroup" label="Engineering Group">
                         <topItems>
                            <button id="concept" label="Concept     " tag="Task One" imageMso="_1" />
                            <button id="design" label="Design       " tag="Task Two" imageMso="_2" />
                            <button id="prototype" label="Prototype  " tag="Task Three" imageMso="_3" />
                            <button id="production" label="Production" tag="Task Four" imageMso="_4" />
                         </topItems>
                    </group >
                  </task>
                </category>
                <category id="manufacturingTeamCategory" label="Manufacturing Tasks">
                  <task id="manufacturingTeamTasks" label="Manager: Alice Morton" description="Right the First Time" imageMso="ControlsGallery">
                    <group id="manufacturingTeamTasksGroup" label="Manufacturing Group">
                       <topItems>
                            <button id="flowDesign" label="Flow Design    " tag="Task One" imageMso="_1" />
                            <button id="tooling" label="Tooling            " tag="Task Two" imageMso="_2" />
                            <button id="staffing" label="Staffing           " tag="Task Three" imageMso="_3" />
                            <button id="manufacturing" label="Manufacturing" tag="Task Four" imageMso="_4" />
                       </topItems>
                    </group >
                  </task>
                </category>
             <category id="marketingTeamCategory" label="Marketing Tasks">
                <task id="marketingTeamTasks" label="Manager: Jane Burns" description="Bringing Quality to the Customer" imageMso="SignatureShow">
                   <group id="marketingTeamTasksGroup" label="Marketing Group">
                      <topItems>
                         <button id="concepts" label="Concepts              " tag="Task One" imageMso="_1" />
                         <button id="storyBoarding" label="Story Boarding     " tag="Task Two" imageMso="_2" />
                         <button id="finalization" label="Finalization           " tag="Task Three" imageMso="_3" />
                         <button id="channelSelection" label="Channel Selection " tag="Task Four" imageMso="_4" />
                         <button id="execution" label="Execution              " tag="Task Five" imageMso="_5" />
                      </topItems>
                   </group >
                </task>
              </category>
          </taskFormGroup >
       </firstColumn>
    </tab>
    
    
    	</backstage>
    </customUI>
    

    Any help and ideas are welcome..... 'cause I've run out :)

    Cheers,

    Thursday, September 25, 2014 1:10 PM

Answers

  •  Hi Bakkiethee,

    I tried to reproduce the issue with the Ribbon XML code you had provided. I was able to reproduce it. It looks like the First column is not automatically adjusted to fit in the contents within it. The "firstColumnMaxWidth" and "firstColumnMinWidth" attributes of the "tab" element can be used to set the maximum and minimum width of first column respectively. Using these attributes, you can adjust the width such that no overlapping occurs.These attributes take a positive integer ranging from 0 to 10000.Here is a small example:

    <tab id="teamTasksTab" label="Team Tasks" firstColumnMaxWidth="500"> 

    Regards,

    Anush.

    • Proposed as answer by AnushRudaa Monday, September 29, 2014 6:18 PM
    • Marked as answer by Bakkiethee Tuesday, September 30, 2014 8:50 AM
    Monday, September 29, 2014 6:14 PM

All replies

  • Hello Bekkiethee,

    It looks like this is a bug. I have reproduced the issue on my PC with Office 2013 installed:

    I'd suggest opening a support case.

    Thursday, September 25, 2014 1:50 PM
  • Hi Eugene,

    Thanks for taking the time to test this out. Glad to know I'm not the only one experiencing this issue. 

    Will see about contacting Microsoft about this tomorrow.

    Thursday, September 25, 2014 2:15 PM
  •  Hi Bakkiethee,

    I tried to reproduce the issue with the Ribbon XML code you had provided. I was able to reproduce it. It looks like the First column is not automatically adjusted to fit in the contents within it. The "firstColumnMaxWidth" and "firstColumnMinWidth" attributes of the "tab" element can be used to set the maximum and minimum width of first column respectively. Using these attributes, you can adjust the width such that no overlapping occurs.These attributes take a positive integer ranging from 0 to 10000.Here is a small example:

    <tab id="teamTasksTab" label="Team Tasks" firstColumnMaxWidth="500"> 

    Regards,

    Anush.

    • Proposed as answer by AnushRudaa Monday, September 29, 2014 6:18 PM
    • Marked as answer by Bakkiethee Tuesday, September 30, 2014 8:50 AM
    Monday, September 29, 2014 6:14 PM
  • Hi Bakkiethee,

    I agree with AnushRudaa, here is my working snippet for your reference. 

    <tab id="BackstageProblem" insertBeforeMso="TabHelp" title="BackstageProblem" 
                                   label="BackstageProblem" visible="true" 
                                    firstColumnMinWidth="100" firstColumnMaxWidth="300">
           <firstColumn>
                  <taskFormGroup id="myTaskFormGroup" allowedTaskSizes="medium">

    Note:
    allowedTaskSizes="medium" property is optional, but it is nice to have for better look, else rendering would be defaulted to ‘large’ which is looking odd for me :)

    Hope this helps. 

                                             
    Tuesday, September 30, 2014 6:40 AM
  • That fixed the problem for me. Thanks!
    Tuesday, September 30, 2014 8:51 AM