我在项目中使用Angular UI Grid。 网格本身会调整大小,以便所有列在div中水平放置。

效果很好,直到一个屏幕上的行数超过了容纳的行数为止。 然后,出现一个垂直滚动条(好),该滚动条覆盖了最后一列的一部分(坏)。 可以启用水平滚动条以达到最后20像素左右,但水平滚动时,标题单元格不会滚动。 这会使所有内容失去对齐。

由于网格在滚动条之前已调整好大小,因此不需要水平滚动条。 但是滚动条覆盖内容的方式意味着没有它,您将看不到任何可能在20像素左右的像素。

我需要解决这个问题。 这是我尝试实施的一些解决方案,但均未成功:

  1. 找到某种方法来知道是否有垂直滚动条,并在某处添加填充或边距以压入标题单元格和数据单元格的内容,以使内容保持一致。 我还没有找到一种简单的方法来抓取可能有或没有滚动条的容器,然后我想问一下是否有滚动条的逻辑很脆弱。 另外,我只是在我认为应该去的地方添加填充而不能有效地推送内容。
  2. 找到一种方法,使具有滚动条的容器在具有滚动条时将其推到网格之外。 这个问题与#1基本相同,因为那个家伙很滑。
  3. 找到一种方法来用我自己的滚动条替换。 似乎有人做了一个分支,可以让您使用特定的库来执行此操作,但是我们与UI Grid的特定提交相关联,添加库会引起国会的注意。

有什么想法吗?

#1楼 票数:-1

如何知道是否存在垂直滚动条:如果尚未使用rowTemplate自定义行,则rowHeight可能为30px(如果没有请检查)。

var dataRowHeight = (numberOfRows * 30) + padding (if you have);
var gridElementHeight = angular.element("#my-ui-grid-div-id")[0].offsetHeight;

if (dataRowHeight > gridElementHeight) {
    // you have a verticalscrollbar
}
  • 安全面:按%指定所有列的宽度,并为滚动条保留1%的宽度。
  • 丑陋的一面:获取“视口”的宽度,遍历并根据提供的所有列的百分比计算实际像素,如果使用上述方法检测到垂直滚动条,则保留15px。

  ask by Amy Blankenship translate from so

未解决问题?本站智能推荐:

5回复

如何在angular-ui-grid中对特定值进行着色?

我试图根据它在新的angular-ui-grid 3.0 rc12中的值来着色,但我无法做到。 以下代码用于以前的版本(ngGrid): 和相应的CSS: 这里的问题是表达式: 不再像在ngGrid中那样工作了。 任何关于如何在angular-ui-grid中实现相同
1回复

如何更改Angular-UI-grid的字体?

如何更改Angular-UI-grid的字体? 我想更改nonPostedGridOption ui-grid的字体。 我已经尝试过了,但是没有成功。
1回复

工具提示在“ angular-ui-grid”中无法正常工作

我使用的angular-ui-grid v3.0.0-rc.22-e8fe073和bootstrap与网格内的工具提示ui.bootstrap 。 请在下面找到以下工具提示模板: 并将其在网格中用作cellTemplate: templateWithTooltip 。 并在CSS
1回复

ANGULAR-JS:更改角度UI-GRID宽度

我实现了如下所示的Angular ui-grid : Angular ui-grid 但是在某些情况下,它变得像: 缩小的网格 我需要解决方案,以使网格宽度保持不变,就像第一个图像一样。 当我按F12键时,它通常会缩小,然后导航至其他页面并返回。 我的网格选项是: 谢
1回复

滚动后,ui-grid单元格模板中的多选下拉列表无法正确显示

我正在使用有角度的ui-grid并使用multiselect下拉列表创建可编辑的单元格模板。 我已经尝试过本教程,但无法正常工作。 我使用的是简单的多选下拉菜单,但对其进行了自定义,因此单击按钮即可打开。 我按照此 plnkr设置了多选下拉列表的样式,使其在网格上方打开并在单元格下方重叠。
1回复

angular-ui-grid无法在嵌套的ui-views中正确渲染

我正在将AngularJS与ui-grid和ui-view一起使用,以尝试创建带有选项卡式容器的页面。 每个标签(通常是ui-grid)的内容都在ui视图中显示: 内容可能如下所示: 问题在于ui-grid不会垂直填充容器-它设置为最小高度。 与“面板”相关的所有css类仅声
1回复

Angular-ui-grid-文本装饰不适用于行模板子级

我可以通过将以下CSS应用于AngularJS UI网格中的行模板来设置行背景色: 它运作良好。 但是,当我添加 它不适用于该行内的文本。 我究竟做错了什么?
1回复

使用Angular和Bootstrap-UI构建的UI-Grid不会自行调整大小,直到以某种方式调整窗口大小

这里的第一部分是以部分和形式显示网格。 他们能够将此网格导出到Excel或Crystal Reports。 我包含了有助于构建网格的gridOptions和作为gridOptions很大一部分的columnDefs。 每个列都有一个定义,我使用了每个列中的最大数据来确定列的大小。 这决定