Change ribbon height in react

Change ribbon height in react

Posted by: alex.grant1 on 18 March 2024, 8:16 pm EST

• 

  alex.grant1

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 18 March 2024, 8:16 pm EST - Updated 18 March 2024, 8:26 pm EST

  Does anyone know how to change the ribbon height or how to render the ribbon using ToolbarModeConfig? I’m using react.js framework and below is my code passed to the Designer component config prop to render a custom ribbon.

  I’ve tried calling the ribbon height method as per the documentation like so config.ribbon.ribbonHeight = 80 but I get the following error:

  Property ‘ribbonHeight’ does not exist on type ‘IRibbonPanel[] | IRibbonPanelConfig’.
  
  Property ‘ribbonHeight’ does not exist on type ‘IRibbonPanel[]’.ts(2339)

  Any help would be much appreciated.

  const designerConfig = () => {
      const designer = GC.Spread.Sheets.Designer;
      const config = designer.ToolBarModeConfig;
  
      config.ribbon = [];
      config.ribbon.unshift(ribbonOptions());
  
      return config;
    };

  This is how I’m calling the function above

  <Designer
        styleInfo={styleInfo}
        config={designerConfig()}
        designerInitialized={(designer: any) => initDesigner(designer)}
      ></Designer>

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 19 March 2024, 5:32 pm EST

  Hi,

  I attempted to replicate the issue on my end but was unsuccessful. In my end, I was able to adjust the ribbon height without encountering any problems. Please refer to the attached sample for reference.

  If you encounter a type error, you can try using “as any” to avoid this error. Refer attached snippet.

  const designerConfig = () => {
      const designer = (GC as any).Spread.Sheets.Designer;
      const config = designer.ToolBarModeConfig;
  
      config.ribbon.ribbonHeight = 80;
  
      return config;
    };

  If the issue persists, To better assist you, could you share a sample along with the steps to replicate the behavior you have observed, or modify the existing sample to replicate the behavior? This will enable me to investigate the problem more thoroughly. And It would be helpful if you could provide a GIF or video illustrating the issue.

  Sample: spread.zip

  Regards,
  
  Priyam