首页 文章

如何防止p：menubar与CSS模板的内容重叠？

提问于
浏览 次
1

我在我正在使用的模板的 Headers 上有following类型的布局 .

enter image description here

此布局由<p:panelGrid>组成，后者呈现HTML表格 .

我正在使用以下模板 .

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="#{localeBean.language}"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core">

    <f:view locale="#{localeBean.locale}" encoding="UTF-8" contentType="text/html">

        <f:loadBundle basename="messages.ResourceBundle" var="messages"/>
        <ui:param name="contextPath" value="#{request.contextPath}"/>
        <ui:insert name="metaData"></ui:insert>

        <h:head>
            <title><ui:insert name="title">Default Title</ui:insert></title>
            <h:outputStylesheet library="default" name="css/block-ui.css"/>
            <h:outputStylesheet library="default" name="css/template.css"/>
        </h:head>

        <h:body id="body">
            <div id="container" class="clearfix">
                <div id="north"><ui:include src="/WEB-INF/client_template/content_bars/NorthMain.xhtml"/></div>
                <div id="west"></div>
                <div id="east"></div>
                <div id="content">
                    <ui:insert name="content">Put default content here, if any.</ui:insert>
                </div>
            </div>
            <div id="south"></div>
        </h:body>
    </f:view>
</html>

使用的CSS如下（template.css） .

html, body {
    height: 100%;
    min-width: 800px;
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
    background: #fff;
    font-size: 12px;
}

#container {
    min-height: 100%;
    margin: 0 auto -90px;
}

#north {
    height: 165px;
    background: #fff;
}

#west {
    float: left;
    width: 120px;
    background: #fff;
}

#content {
    margin-left: 120px;
    margin-right: 120px;
    background: #fff;
}

#east {
    float: right;
    width: 120px;
    background: #fff;
}

#south, #container:after {
    height: 90px;
}

.clearfix:after {
    display: block;
    content: " ";
    clear: both;
}

#south {
    height: 300px;
    color: #444;
    background: #777;
    border-top: 7px solid #000;
    clear: both;padding: 15px;
}

这是this答案 .

我正在页面的 Headers 上使用<p:menubar>，如上图所示 . 菜单与内容重叠 - 菜单位于内容后面 .

发生这种情况是因为我使用以下CSS类来剪切 Headers 上 <p:panelGrid> 的内容，当它显示的文本不适合其单元格时 text-overflow: ellipsis .

.headerElipses {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

.headerElipses td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

如果此类被删除，那么它工作正常 - 菜单不与内容重叠 . 我无法避免 text-overflow: ellipsis 因为应用程序是多语言的，并且在 <p:panelGrid> 列中显示可变数量的字符，具体取决于用户选择的语言以及显示某些动态文本 .

我已经尝试将 z-index 设置为更高的值

z-index: 20 !important;
overflow: visible !important;

到上面的 #north CSS类，但它没有用 .

如何防止 <p:menubar> 与内容重叠？

html css jsf primefaces menubar

3 回答

  • 1

    我相信z-index将不起作用，除非你已经为元素声明了一个位置 . 如果你目前没有，我建议把位置：相对;以及每个受影响元素的z-index .

    回复于
  • 0

    您需要设置单元格的宽度才能使用省略号 .

    （并将位置添加到父级和子级，然后z-index将根据您的需要工作）

    回复于
  • 1

    我找到了一个答案，但我也放弃了使用<p:menubar>，而是选择了普通/香草HTML / CSS菜单，因为 <p:menubar> 正式不支持可点击的 <p:submenu> ，这也需要一些JavaScript / jQuery技巧来使它们可点击甚至这样做功能不可靠 .

    在答案中，我正在使用 <p:panelGrid> 生成的问题中提到的 Headers 上的表格布局，后者又呈现HTML表格如下 .

    <p:panelGrid styleClass="headerElipses">
    <p:row>
        <p:column rowspan="3">1</p:column>
        <p:column rowspan="3">2</p:column>
        <p:column>3</p:column>
        <p:column>4</p:column>
        <p:column>5</p:column>
        <p:column>6</p:column>
        <p:column>7</p:column>
        <p:column>8</p:column>
        <p:column>9</p:column>
        <p:column>10</p:column>
        <p:column>11</p:column>
        <p:column rowspan="3">12</p:column>
    </p:row>

    <p:row>
        <p:column colspan="5" rowspan="2">13</p:column>
        <p:column rowspan="2">14</p:column>
        <p:column>15</p:column>
        <p:column>16</p:column>
        <p:column>17</p:column>
    </p:row>

    <p:row>
        <p:column>18</p:column>
        <p:column>19</p:column>
        <p:column>20</p:column>
    </p:row>

    <p:row>
        <p:column>21</p:column>
        <!-- Only the following column is associated with the question -->
        <p:column colspan="10">22 The header menu goes here.</p:column>
        <p:column>23</p:column>
    </p:row>
</p:panelGrid>

    列具有固定宽度 . 我从这个 <p:panelGrid> 删除了整个CSS乱七八糟的东西 .

    CSS类 headerElipses （当然有一个拼写错误 . 浏览器无法识别类 Headers ，例如header-ellipsis . 我不知道原因） .

    .headerElipses {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

.headerElipses td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    在此CSS类中， overflow: hidden; 负责阻止菜单显示在中心容器上 .

    我只是在仅保存 <p:menubar> 的表格单元格中覆盖此样式，如下所示 .

    <p:column colspan="10" style="overflow: visible !important; white-space: normal !important;">
    22 The header menu goes here.
</p:column>

    在此单元格中，根本不需要 overflow: hidden; 和 white-space: nowrap; （包括其他） .

    注意：我不使用<p:layout>（或pe:layout）这个仅支持现在使用整页布局的东西，其中需要在相应的类中覆盖以下CSS属性，以防止北单元上的 <p:menubar> 被隐藏在中心单位内容 .

    .ui-layout-north {
    z-index: 20 !important;
    overflow: visible !important;
}

.ui-layout-unit-content {
    overflow:visible !important;
}
    回复于

相关问题