css - 语义 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

编辑

在计算所有菜单项之前，溢出视口(viewport):

$('.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