Responsive syncfusion component

[Kristina Ilic]

Hi,

When I resize screen width I get left and right arrows so ejs tab is responsive (img 1). That behaviour I want. 

But when I have side menu next to ejs tab, I don't get arrows (img 2) I get horizontal scroll. I want behaviour from first image also on second. 

The same problem I have with ejs spreadsheet component, he is responsive when there is no side menu next to him, but when there is side menu spreadsheet is not responsive. Also, the same problem is with grid pager.

Best regards,

Kristina

[Satheesh Kumar Balasubramanian]

Hi Kristina, 

  

But when I have side menu next to ejs tab, I don't get arrows. 

  

We have prepared sample to reproduce the reported issue. But, tab is rendered properly in UI. 

  

Sample: https://stackblitz.com/edit/responsive-sidebar-with-tab?file=app.component.html 

  

Could you please share the below details to reproduce the issue? This will help to validate the issue and provide prompt solution at earliest.  

• Replicate the issue in above sample (or) share issue replicating sample if possible

• Share all tab and sidebar related code snippets

  

when there is side menu spreadsheet is not responsive. 

We have forwarded this problem to the concern team and get back to you by tomorrow(25^th Jan 2022). 

Also, the same problem is with grid pager.

Before proceeding with your query, we need more information on your requirement. So, kindly share the below details. 

  

1. Share the video demo of the reported behavior. 

2. Share the actual image and expected image of Grid pager. 

3. Share the complete code you have used. 

4. By default, Grid will be rendered based on its width / if no width provided to the Grid component then Grid will be rendered with respect to its parent container. So, How much width is provided for Grid component/ its parent container? 

5. If possible, share the issue reproducible sample or try to make the issue in given sample. 

  

We have prepared a simple sample for your reference, in which the Grid pager is properly rendered in UI. 

  

Sample: https://stackblitz.com/edit/angular-txvw8a?file=app.component.html 

  

Regards, 

Satheesh Kumar B 

[Vengatesh Maniraj]

when there is side menu spreadsheet is not responsive. 

We have prepared a responsive Sidebar with Spreadsheet sample. We can make the spreadsheet responsive by using the refresh method. Please check the code snippet. 

 <ejs-sidebar 

          id="sidebar-menu" 

          class="dock-menu" 

          #sidebarMenuInstance 

          [enableDock]="enableDock" 

          [width]="width" 

          [dockSize]="dockSize" 

          [mediaQuery]="mediaQuery" 

          [target]="target" 

          (open)="opened($event)" 

          (change)="change($event)" 

        > 

<!-- main-content declaration --> 

        <div class="main-content" id="maintext"> 

          <div class="spreadsheet-content"> 

            <ejs-spreadsheet #spreadsheet id="spreadsheet"></ejs-spreadsheet> 

          </div> 

        </div> 

        <!-- end of main-content --> 

 

   opened() { 

    const ssObj: Spreadsheet = this.spreadsheetInstance; 

    setTimeout(function () { 

      ssObj.refresh(); 

    }, 200); 

  } 

  change() { 

    this.spreadsheetInstance.refresh(); 

  } 

.spreadsheet-content { 

  height: calc(100% - 50px); 

} 

 

Sample: https://stackblitz.com/edit/angular-vjlsve-doasae?file=app.component.html  

Please check and get back to us, if you need further assistance.