Question

我制作了一个日历，每天都可以点击。当我将鼠标放在最后一列div上时，它会溢出屏幕宽度。

<div class="menu"><a href="#" class="item">EEEEEEE</a></div>

https://jsfiddle.net/c0oh7kby/

Answer 1

您可以在上一个<td>上应用转换，将工具提示拉到左侧：

td.ui:last-child .ui.simple.dropdown:hover > .menu {
    transform: translate(calc(-100% + 16px), 0);
}

或者把它放在右边：

td.ui:last-child .ui.simple.dropdown:hover > .menu {
    left: auto;
    right: 0;
}

updated fiddle

修改

在计算所有菜单项之前，会溢出视口：

$('.ui .menu').each(function(){
  var $this = $(this);
  if ($this.width() + $this.parent().position().left > $(window).width()) {
    $this.addClass('transformed');
  }
});

然后申请所需的css：

.ui.simple.dropdown:hover > .menu.transformed {
    left: auto;
    right: 0;
}

fiddle

但是，如果工具提示在两侧溢出，则无法补偿。你可以检查两次：

$('.ui .menu').each(function(){
  var $this = $(this);
  if ($this.width() + $this.parent().position().left > $(window).width()) {
    $this.addClass('transformed');
    if ($this.parent().position().left - $this.width() < 0) {
      $this.addClass('center');
    }
  }
});

并应用转型：

.ui.simple.dropdown:hover > .menu.transformed.center {
    transform: translate(50%, 0);
}

fiddle

语义UI日历，下拉菜单溢出全宽

1 个答案:

修改