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

Posted 2023-02-16

技术标签:

【中文标题】如何防止 p:menubar 与 CSS 模板的内容重叠？【英文标题】：How to prevent a p:menubar from being overlapped by the contents of a CSS template? 【发布时间】：2014-08-18 13:45:23 【问题描述】：

我正在使用的模板的标题上有following 类型的布局。

此布局由<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的答案。

如上图所示，我在页面标题上使用了<p:menubar>。菜单与内容重叠 - 菜单位于内容后面。

发生这种情况是因为我使用以下 CSS 类来剪辑标题上 <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>被内容重叠？

【问题讨论】：

【参考方案1】：

我相信 z-index 将不起作用，除非您已声明元素的位置。如果您目前没有，我建议您放置 position: relative;以及每个受影响元素的 z-index。

【讨论】：

我已经将<p:menubar>的位置设置为相对-<p:menubar style="position: relative; height: 30px; visibility: visible; margin: 0 auto; word-break: break-all;">。【参考方案2】：

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

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

【讨论】：

并将位置添加到父级和子级，然后 z-index 将根据您的需要工作。【参考方案3】：

我找到了答案，但我也放弃了使用<p:menubar>，而是选择了一个普通/普通的HTML/CSS菜单，因为<p:menubar>官方不支持其中的可点击<p:submenu>，这也需要一些javascript/jQuery技巧使它们可点击，即使这样做也不能可靠地运行。

对于答案，我使用的是问题中提到的标题上的表格布局，该问题是通过使用<p:panelGrid> 生成的，而这又会呈现如下的 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_{（当然有拼写错误。像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;

【讨论】：

以上是关于如何防止 p:menubar 与 CSS 模板的内容重叠？的主要内容，如果未能解决你的问题，请参考以下文章

如何防止弹出窗口放大移动？

如何防止 Bootstrap 轮播图像堆叠？ HTML/CSS（使用 PHP 显示图像）

p：具有动态和非动态子菜单的菜单栏

如何防止特定模板的隐式模板实例化？

如何防止 Express 解析 Angular 模板？

如何调试 CSS 分页媒体模板？