热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Angularuibdatepickerpopup分页导致溢出

如何解决《Angularuibdatepickerpopup分页导致溢出》经验,求大佬解答?

我正在使用Angular uib datepicker,使用nocsss导入它,当我分页时,它会在调整大小之前简要显示两个日历.我已经尝试添加overflow: hiddentable日期选择器中,但这会导致整个日期选择器不可见.绿色方块是一个临时按钮,用于显示和隐藏日期选择器.为什么它与它并排是一个单独的问题.

破碎的datepicker

我的scss:

.datepicker-container {
    :global {
      button:not(.uib-title) {
        cursor: pointer;
      }

      .uib-datepicker {
        //max-width: 238px;
        //overflow: hidden; -> this makes the entire datepicker invisible
        table {
          margin: 0 auto;
        }
      }

      .uib-right,
      .uib-left {
        height: 20px;
        background: $some-blue;
      }

      .uib-title {
        text-align: center;
        width: 100%;
      }

      .uib-day {
        padding: 0;
        transition: all 200ms linear;
        cursor: default;

        button {
          height: 24px;
          width: 100%;

          &:disabled {
            color: $some-grey;
            opacity: 0.75;
            cursor: not-allowed;
          }

          &.active {
            background: $some-blue;
            border-radius: 50%;
            color: white;
          }
        }

        &:hover {
          color: $white;
          background: $some-blue;
        }
      }

      .text-center {
        text-align: center;
      }

在调试时,我使用了chrome调试器来打破子树修改,当然,问题出现在日历的内部.它在下个月加载,然后删除前一个月的节点,这没有任何意义,但很好.这意味着,在短时间内,两个月都可见.所以,如果我这样做,它确实解决了一些问题:

          td {
            &:nth-of-type(8),
            &:nth-of-type(9),
            &:nth-of-type(10),
            &:nth-of-type(11),
            &:nth-of-type(12),
            &:nth-of-type(13),
            &:nth-of-type(14) {
              display: none;
            }
          }

基本上td的1-7是下个月,8-14是前一个月,角度显示在移除之前.我们可以像这样隐藏它们,但这个解决方案很脆弱.如果您快速单击日历,它会像示例中一样闪烁和展开.


推荐阅读
author-avatar
傻丫丫69_678
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有