【问题标题】:Make header text vertical align bottom使标题文本垂直对齐底部
【发布时间】:2017-11-16 14:03:10
【问题描述】:

从标题文本中删除 nowrap 后,我想将其置于底部 我正在尝试将 vertical-align: bottom 放在任何地方,但没有成功。 这是第一列与顶部对齐的示例。

.ui-grid-cell-contents {
 ....

  vertical-align: bottom;
}

http://plnkr.co/edit/JzJVRgjz2VLELcqcdR4I?p=preview

如何使angular-ui-grid中的标题文本位于底部?

【问题讨论】:

    标签: angular-ui-grid


    【解决方案1】:

    我认为问题在于您的 ui-grid-cell-contents 中的高度

    试试下面...

    .ui-grid-header-cell-label
    {
      line-height:48px;
      vertical-align:bottom;
    }
    

    【讨论】:

    【解决方案2】:

    旧帖子,但在 v4.0.6 中,这将包装标题文本并底部对齐:

    /* To make the header cell text wrap */
    .ui-grid-header-cell .ui-grid-cell-contents {
         height: 48px;
         white-space: normal;
         -ms-text-overflow: clip;
         -o-text-overflow: clip;
         text-overflow: clip;
         overflow: visible;
    }
    
    /* To bottom align the header text */
    .ui-grid-cell-contents .ui-grid-header-cell-primary-focus {
        position: relative;
    }
    .ui-grid-header-cell-label {
        display: block;
        position: absolute;
        bottom: 3px;
    }
    

    【讨论】:

      【解决方案3】:

      首先让父标签css属性显示到表格中。然后子标签(标题内容标签)使css属性显示到表格单元格,然后垂直对齐到底部。喜欢..

      div[role="columnheader"] {
          display: table;
          width: 100%;
      }
      
      .ui-grid-header-cell .ui-grid-cell-contents {
          height: 58px;
          /* white-space: normal !important; */
          /* -ms-text-overflow: clip; */
          /* -o-text-overflow: clip; */
          /* text-overflow: clip; */
          /* overflow: visible; */
          /* text-align: center; */
          display: table-cell;
          vertical-align: bottom;
      }
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2021-11-03
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2016-07-13
        相关资源
        最近更新 更多