gpt4 book ai didi

html - 更改 Primefaces 样式表

转载 作者:行者123 更新时间:2023-11-28 15:31:22 26 4
gpt4 key购买 nike

我使用 primefaces 创建子菜单,但子菜单的弹出面板不在浏览器的 Angular 落(不同的 x/左位置)。

我的输出: enter image description here

firebug控制台就是这个,如果改两个标签就解决了我的问题。

enter image description here

我的代码:

  <?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="rtl" xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core">

<head>
<title>IGNORED</title>
</head>

<body>

<ui:composition>
<h:outputScript name="header.js" library="js" target="head"/>
<p:menubar id="mnubr_main" style="font-size: 75% !important;">
<p:submenu styleClass="submenu" id="sbmnu_karkard" label="#{msg.karkard}" style="float: right;">
<p:menuitem value="#{msg.khodrohaye_sabok}" url="../../../pages/karkard/sabok" style="float: right;"/>
<p:menuitem value="#{msg.khodrohaye_sangin}" url="../../../pages/karkard/sangin" />
<p:menuitem value="تست۱" url="../../../pages/tarefe" />
</p:submenu>

<f:facet name="options" class="ui-float-left" id="haha">
<p:commandButton id="btn_exit" title="#{msg.exit}"
icon="ui-icon-exit" style="float: left; margin-right: 5px;"
actionListener="#{userController.logout}"
oncomplete="handleRedirectRequest(xhr, status, args)"/>
<p:outputLabel value="#{userController.selected.specification.name}" style="margin-top: 5px;"/>
</f:facet>
</p:menubar>
<p:spacer height="20px"/>
</ui:composition>
</body>

</html>

我尝试通过标签改变页面样式

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="rtl" xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core">

<head>
<title>IGNORED</title>
<style type="text/css">
submenu .ui-menu-child{
left: -60px !important;
width: 8.5em !important;
}

.submenu > ul{
left: -60px !important;
width: 8.5em !important;
}
.ui-widget-content.ui-menu-list.ui-corner-all.ui-helper-clearfix.ui-menu-child.ui-shadow{
left: -60px !important;
width: 8.5em !important;
}

.submenu .ui-menu-child{background: blue !important; }
</style>
</head>

<body>

<ui:composition>
<h:outputScript name="header.js" library="js" target="head"/>
<p:menubar id="mnubr_main" style="font-size: 75% !important;">
<p:submenu styleClass="submenu" id="sbmnu_karkard" label="#{msg.karkard}" style="float: right;">
<p:menuitem value="#{msg.khodrohaye_sabok}" url="../../../pages/karkard/sabok" style="float: right;"/>
<p:menuitem value="#{msg.khodrohaye_sangin}" url="../../../pages/karkard/sangin" />
<p:menuitem value="تست۱" url="../../../pages/tarefe" />
</p:submenu>

<f:facet name="options" class="ui-float-left" id="haha">
<p:commandButton id="btn_exit" title="#{msg.exit}"
icon="ui-icon-exit" style="float: left; margin-right: 5px;"
actionListener="#{userController.logout}"
oncomplete="handleRedirectRequest(xhr, status, args)"/>
<p:outputLabel value="#{userController.selected.specification.name}" style="margin-top: 5px;"/>
</f:facet>
</p:menubar>
<p:spacer height="20px"/>
</ui:composition>
</body>

</html>

但不起作用。并在显示弹出菜单面板时始终显示错误。

我的回答是如何通过更改页面样式或在 xhtml 页面中加载 css 来更改面板中的此位置。

最佳答案

只有样式必须写在标签中。更改代码后效果很好。

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="rtl" xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>IGNORED</title>
<f:facet name="">
<style type="text/css">
submenu .ui-menu-child{
left: -60px !important;
width: 8.5em !important;
}

.submenu > ul{
left: -60px !important;
width: 8.5em !important;
}
.ui-widget-content.ui-menu-list.ui-corner-all.ui-helper-clearfix.ui-menu-child.ui-shadow{
left: -60px !important;
width: 8.5em !important;
}

.submenu .ui-menu-child{background: blue !important; }
</style>
</f:facet>
</h:head>

<h:body>

<ui:composition>
<h:outputScript name="header.js" library="js" target="head"/>
<p:menubar id="mnubr_main" style="font-size: 75% !important;">
<p:submenu styleClass="submenu" id="sbmnu_karkard" label="#{msg.karkard}" style="float: right;">
<p:menuitem value="#{msg.khodrohaye_sabok}" url="../../../pages/karkard/sabok" style="float: right;"/>
<p:menuitem value="#{msg.khodrohaye_sangin}" url="../../../pages/karkard/sangin" />
<p:menuitem value="تست۱" url="../../../pages/tarefe" />
</p:submenu>

<f:facet name="options" class="ui-float-left" id="haha">
<p:commandButton id="btn_exit" title="#{msg.exit}"
icon="ui-icon-exit" style="float: left; margin-right: 5px;"
actionListener="#{userController.logout}"
oncomplete="handleRedirectRequest(xhr, status, args)"/>
<p:outputLabel value="#{userController.selected.specification.name}" style="margin-top: 5px;"/>
</f:facet>
</p:menubar>
<p:spacer height="20px"/>
</ui:composition>

关于html - 更改 Primefaces 样式表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20746255/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com