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

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 日历，下拉菜单溢出全角

Semantic UI calendar, drop down menu overflow full width

css

semantic-ui

编辑