javascript - 如何让按钮漂浮在剑道小部件上

Question

我有一个带有 9 个图 block 的“仪表板”。每个图 block 都可以包含一个自定义 Kendo 小部件。我希望能够单独编辑每个小部件，所以我在右上角放置了一个编辑图标

.right-side
  .dashboard-button.alt
    .fa.fa-pencil

然后漂浮起来

.right-side{
  display: inline-block;
  float: right;
}

小部件 被插入其中一个图 block 。该小部件具有填充其父级高度(仪表板上的 9 个图 block 之一)的属性

.custom-widget{data: {'custom-chart-data' => widget.widget_data, 'url' => 'test', 'fill-parent-height' => 'true', 'widget-options' => widget.options_data }}

问题是，每当这个“编辑按钮”位于其中一个图 block 上时，小部件在计算父级高度时不包含它，并在图 block 上留下滚动条。 (只有12px左右)

我无法弄清楚如何呈现小部件并让它知道填充其父级但要考虑其图 block 内的按钮。

提前致谢

Answer 1

我在构建小部件时添加了更多配置。

if widget.data("fill-parent-height")
  summary_chart_options.chartArea = { height: widget.parent().height() - 40 }
widget.kendoChart( summary_chart_options )

- 40 之前是没有的。基本上我的按钮大约是 40px，这样就成功了。