Question

我在角度应用中使用了ag-grid ng。当列数超过未获取水平滚动条时。

Answer 1

你确定是因为列数吗？我有同样的问题，解决方案是取消每列的固定选项。

例如，如果你有这个：

{headerName: "Athlete", field: "athlete", width: 150, pinned: 'left'}

必须是：

{headerName: "Athlete", field: "athlete", width: 150}

Answer 2

您确定 gridOptions 对象上的 suppressHorizontalScroll 属性设置为true吗？

zip

Answer 3

你可以说

<div class="circ">       
            <div class="sect">
               <div class="content">
                   <img alt="img" class="img" src="https://images.vexels.com/media/users/3/143437/isolated/preview/390e394e1ea17f2b8361c8a16d88364e-magnifying-glass-simple-icon-by-vexels.png"/>
                                  The Pension Challenge
               </div>
            </div>  
                   <div class="sect">
               <div class="content">
                   <img alt="img" class="img" src="https://images.vexels.com/media/users/3/143437/isolated/preview/390e394e1ea17f2b8361c8a16d88364e-magnifying-glass-simple-icon-by-vexels.png"/>
                                  The Pension Challenge
               </div>
            </div>
                   <div class="sect">
               <div class="content">
                   <img alt="img" class="img" src="https://images.vexels.com/media/users/3/143437/isolated/preview/390e394e1ea17f2b8361c8a16d88364e-magnifying-glass-simple-icon-by-vexels.png"/>
                                  The Pension Challenge
               </div>
            </div>
                   <div class="sect">
               <div class="content">
                   <img alt="img" class="img" src="https://images.vexels.com/media/users/3/143437/isolated/preview/390e394e1ea17f2b8361c8a16d88364e-magnifying-glass-simple-icon-by-vexels.png"/>
                                  The Pension Challenge
               </div>
            </div>
                   <div class="sect">
               <div class="content">
                   <img alt="img" class="img" src="https://images.vexels.com/media/users/3/143437/isolated/preview/390e394e1ea17f2b8361c8a16d88364e-magnifying-glass-simple-icon-by-vexels.png"/>
                                  The Pension Challenge
               </div>
            </div>
                   <div class="sect">
               <div class="content">
                   <img alt="img" class="img" src="https://images.vexels.com/media/users/3/143437/isolated/preview/390e394e1ea17f2b8361c8a16d88364e-magnifying-glass-simple-icon-by-vexels.png"/>
                                  The Pension Challenge
               </div>
            </div>
                   <div class="sect">
               <div class="content">
                   <img alt="img" class="img" src="https://images.vexels.com/media/users/3/143437/isolated/preview/390e394e1ea17f2b8361c8a16d88364e-magnifying-glass-simple-icon-by-vexels.png"/>
                                  The Pension Challenge
               </div>
            </div>
                   <div class="sect">
               <div class="content">
                   <img alt="img" class="img" src="https://images.vexels.com/media/users/3/143437/isolated/preview/390e394e1ea17f2b8361c8a16d88364e-magnifying-glass-simple-icon-by-vexels.png"/>
                                  The Pension Challenge
               </div>
            </div>
            <div class="inner-circle"></div>
     </div>

这将设置列的宽度，从而消除水平滚动。

Answer 4

如果您使用，您可能会发现：

expressApp.use(express.static(path.join(__dirname, '/node_modules/bootstrap/dist/js')));

<script src="bootstrap.bundle.js"></script>

是不是有些页面需要很长时间才能显示出来。我发现api上有一个标志来显示宽度是否脏。因此我实现了一种检查方法：

gridOptions.api.sizeColumnsToFit();

我把它放在一个带有初始化程序的服务类中，刷新尝试也被传递到那个服务类中。我建议绕两圈，您可能还想玩超时延迟，因为您可能不希望有这么大的延迟。

这似乎发生在一些更复杂的网格上的原因是一次洗牌会导致一些工作，但宽度仍然很脏。下一个，也许下一个会有所帮助。

Answer 5

尝试在 ag-grid 中的每个 columnDefs 中放入 minWidth，这确保每个都有一个与之关联的宽度属性，因此如果它溢出，下面会出现一个水平滚动条

columnDefs = [

{minWidth : 100, field: 'a', headerName: 'test1'},

{minWidth: 120, field: 'b', headerName: 'test2'},

{minWidth: 80, field: 'c', headerName: 'test2'}

]

ag网格水平滚动

5 个答案: