Horizontal scroll shifts to the end of grid

Horizontal scroll shifts to the end of grid

Posted by: kipawar on 7 October 2020, 12:29 am EST

• 

  kipawar

  • Post Options:
  • Link
    Copy

  Posted 7 October 2020, 12:29 am EST - Updated 3 October 2022, 6:24 am EST

  Hi Team,

  We have created a grid in a wrapper and we are not using default wijmo grid scrollbars and we have set overflow auto to wrapper div. But in this case when click on row horizontal scroll shift to the end of the grid.
  
  We are setting height auto to .wj-content.
  
  

  

  1920×1080 237 KB

  Thanks,
  
  Kiran Pawar

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 7 October 2020, 7:10 pm EST

  Hi Kiran,

  Sorry but we were unable to understand your use case and issue properly. Can you please elaborate a little more? If possible, can you modify the sample below so that it replicates your issue? It would easier for us to investigate the issue if we have a sample.

  https://stackblitz.com/edit/js-sjk5lt

  Regards,
  
  Ashwin

• 

  kipawar

  • Post Options:
  • Link
    Copy

  Posted 13 October 2020, 10:35 pm EST

  Hi Team,

  I have attached a zip file. In this case we have a re-sizable widget and inside it we are rendering wijmo grid. Aso we are not using wijmo default scrolls as we have container and its overflow is auto. When we click on first row of first column, the focus shift(horizontal scroll moving towards the last row.)

  Thanks,
  
  Kiran Pawar

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 14 October 2020, 3:20 pm EST

  Hi Kiran,

  It seems that you have not attached the zip file. Can you upload the file again? If the file is larger than 5Mb, then it will not be uploaded here. So you may need to upload it on a cloud service and provide the link.

  ~regards

• 

  kipawar

  • Post Options:
  • Link
    Copy

  Posted 18 October 2020, 6:13 pm EST

  Hi Team,
  
  Here is the HTML code.

  <div class="container">
  <div class="content">
  	<div id="pivotPanelGrid" class="right"></div>
  </div>
  </div>
  

  Here is the css code.

  
  .container {
    overflow: auto;
    padding: 5px;
    width: 500px;
    height:300px;
  }
  
  .wj-content {
    height: auto;
  }
  
  .content {
    height: 100%;
  }
  
  

  Thanks,
  
  Kiran Pawar

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 19 October 2020, 8:17 pm EST

  Hi,

  Thank you for the update. I was able to re-create the grid with the same layout as yours but still was not able to replicate the issue. The row only scrolls horizontally if I scroll it using the scrollbar or mouse wheel. Can you please check with the updated sample:

  https://stackblitz.com/edit/js-sjk5lt

  ~regards