In Primefaces 3.5 vertical align of p:selectOneMenu and button is weird when you put them in one line. My use case is: user chooses option from menu and then click button to activate it. Issue is - both components have to be in the same line (table row).
XHTML is really easy:
<h:form>
<p:selectOneMenu>
<f:selectItem itemLabel="test" itemValue="test"/>
</p:selectOneMenu>
<p:commandButton value="GO"/>
</h:form>
Unfortunately result is not what I expect:
My expectation is rather something line this: or
I tried to research rendered HTML code with Firebug, but honestly, it's hard for me to found any CSS margin, padding, left, top, or anything like that could help me.
Anyone struggled with such issue (and - hopefully - solved it)?
Solution is:
<style type="text/css">
.selectMenu { display: inline-block; vertical-align: top; }
</style>
<h:form>
<p:selectOneMenu styleClass="selectMenu">
<f:selectItem itemLabel="test" itemValue="test"/>
</p:selectOneMenu>
<p:commandButton value="GO"/>
</h:form>
You can use a panelGrid for auto align easily both of them.
<h:form>
<h:panelGrid columns="2">
<p:selectOneMenu>
<f:selectItem itemLabel="test" itemValue="test"/>
</p:selectOneMenu>
<p:commandButton value="GO"/>
</h:panelGrid>
</h:form>
Related
I have two tabs in tabView and i need another one with as shown in attachment. It can also be any outputText, but it doesn work with . Also the part of text should be black and another red.
Does anybody know how to solve this problem. I've been trying a lot of examples, but nothing works.
Found the decision with this:
<p:tab disabled="true"
titleStyle="font-weight: bold; opacity: 0.9; background-color: #b2bcbe;" >
<f:facet name="title">
<h:outputText value="black text" style="color: black;"/>
<h:outputText value="red text" style="color: red;"/>
</f:facet>
</p:tab>
It's a simple question, is it possible to give style to the component p:fragment?
There aren't any style/styleClass/class attributes for p:fragment specified in the documents (5.0) (although my IDE suggests me to use class based on the library but it doesn't work).
Basically what I want to do is to change the display to:
display: inline;
Because by default the component is rendered as a div with display: block;
I know I could use the id attribute and give it some style, but I don't want this solution because I have multiple fragments and it would be quite ugly.
You can specific your css like my example
<style>
div[id$="-fragment"]{
background-color: red;
}
</style>
<h:form>
<h:panelGrid columns="2" cellpadding="5">
<p:outputLabel for="ignored" value="Required" />
<p:inputText id="ignored" required="true" />
</h:panelGrid>
<p:fragment autoUpdate="true" id="first-fragment">
<h:panelGrid columns="4" cellpadding="5">
<p:outputLabel for="txt" value="Text Value:" />
<p:inputText id="txt" value="#{basicView.text}" />
<p:commandButton value="Submit"/>
<h:outputText value="#{basicView.text}" />
</h:panelGrid>
</p:fragment>
<p:fragment autoUpdate="true" id="second-fragment">
<h:panelGrid columns="4" cellpadding="5">
<p:outputLabel for="txt2" value="Text Value:" />
<p:inputText id="txt2" value="#{basicView.text}" />
<p:commandButton value="Submit"/>
<h:outputText value="#{basicView.text}" />
</h:panelGrid>
</p:fragment>
</h:form>
Hope this help.
Primefaces' fragment component is used to define automatic partially process and update sections whenever ajax request is triggered by a descendant component, it is not a component to display/style content.
If you do not need the automatic processing functionality, use facelet's ui:fragment component for your rendering needs and place its content in a div, which you can style however you want.
Hello
<ui:fragment>
<div style="display: inline;">Hello</div>
</ui:fragment>
Hello
I'm using primefaces 5.0. Below is my page where I like to set the height fix to 200px of the layoutunit west and center. Is there any possibility to do this? The current height will be ignored.
<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui" template="/templates/template.xhtml">
<ui:define name="header_title">
<h:outputText value="Titel" align="center" />
</ui:define>
<ui:define name="content">
<h:form id="labelForm" style="height:100%">
<p:growl id="growl" showDetail="true" />
<p:layout style="height:100%" fullPage="false" >
<p:layoutUnit position="west" header="west" resizable="false" closable="false" collapsible="false" style="height:200px">
<p:tieredMenu id="type" model="#{dynamicLabelMenu.menu}" trigger="itemSelect" />
</p:layoutUnit>
<p:layoutUnit position="center" resizable="false" closable="false" collapsible="false" header="center" style="height:200px">
<!-- datatable -->
</p:layoutUnit>
<p:layoutUnit position="south" size="100" header="Bottom" resizable="false" closable="false" collapsible="false">
<br/>
<br/>
<!-- datatable -->
</p:layoutUnit>
</p:layout>
</h:form>
</ui:define>
</ui:composition>
The height should be consistent with the other units... meaning if you would like to fix the height of one unit the others have to be also fixed...
The reason behind this is that PrimeFaces embeds the css rules into the style attribute and totally ignores your style.
You have two options to solve this:
If you are okay keeping the consistent between the units, then this might help. Currently your layout has a height of 100% that means the units should fit into the content, but to fix it you might take this approach
<p:layout style="min-height:200px;">
This way you have a minimum height of 200px and it could expand with the content, or just use height:200px.
The other option is to define a CSS class with !important option, although using !important is ugly and not recommended, but in this particular case PrimeFaces is injecting the css into the style attribute making it hard to cascade the height option.
<style>
.westUnit {
height: 200px !important;
}
</style>
<p:layoutUnit position="west" styleClass="westUnit">
Have a look at the CSS priority rules:
http://www.standardista.com/css3/css-specificity/
You can simply overwrite the primefaces CSS rules by adding more specific CSS selectors.
Example :
Primefaces:
.ui-dialog .ui-dialog-title {
text-align : center;
}
Your CSS:
#content .ui-dialog .ui-dialog-title {
text-align : right;
}
You can use the browser debugging tools (F12 in most browsers) to find out witch primefaces css is used for your components. Overwrite them with more specific CSS selectors from your own css code.
I'm trying to apply a styleClass to a h:panelGrid without applying it to its children:
<h:panelGrid id="mainPanelGrid" columns="2" width="100%" styleClass="topAligned" >
<p:fieldset id="fs1" legend="fs1" style="width: max-content">
<h:panelGrid columns="3">
<p:outputLabel for="id1" value="#{messages.label_application}" />
<p:selectOneMenu id="id1" required="true" value="som">
<f:selectItem itemLabel="#{messages.label_select}" noSelectionOption="true" />
<f:selectItems value="#{bean.availableItems}" />
</p:selectOneMenu>
<p:message for="id1" />
</h:panelGrid>
</p:fieldset>
<p:fieldset id="fs2" legend="fs2" style="width: max-content">
<h:panelGrid columns="3">
<!--more fields-->
</h:panelGrid>
</p:fieldset>
</h:panelGrid>
My topAligned css:
.topAligned td{
vertical-align: top !important;
}
The problem is that I need to top align the two fieldset and that works well with the styleClass I apply, but it also applies this styleClass to all the children. Therefore, all the fields (outputLabel, selectOneMenu, etc...) of the two fieldset get top aligned too...
I tried all the different ways to specify the top alignment from this question but without success... I also tried to look at the html source but it gets a bit confusing with all the jsf and primefaces stuff...
If you know a trick that will work...
With
.topAligned td{
vertical-align: top !important;
}
and the JSF-generated HTML output
<table class="topAligned">
...
</table>
you're basically applying the style on every single <td> element of the <table>, also those of the nested <table>s.
If you want to apply the style on only the immediate <td> elements of the parent <table>, then you should be using columnClasses attribute instead:
<h:panelGrid ... columnClasses="topAligned,topAligned">
with
.topAligned {
vertical-align: top;
}
This will end up in the generated HTML output as follows:
<table>
<tbody>
<tr>
<td class="topAligned">...</td>
<td class="topAligned">...</td>
</tr>
</tbody>
</table>
and not be applied on the <td>s of the nested <table>s.
Note that I also removed the nonsensicial !important workaround. It's supposed to be used only when you want to override a hardcoded style by an external CSS style.
Also note that this problem is not specifically related to JSF. JSF is in the context of this question merely a HTML code generator. You'd have had exactly the same problem when dealing with "plain vanilla" HTML/CSS. The problem is more in the lack of familiarity with basic HTML and CSS. On http://htmldog.com you can find decent HTML/CSS tutorials.
I see there are some answers posted for this. tried almost all of them with several permutation-combination.. but nothing seems to be working.
components inside panelgris are always middle aligned, instead of top.
tried whatever they said in the below post.
How to control alignment of DataTable inside of a PanelGrid?
Please let me know if there is a remedy.
The <h:panelGrid> renders a HTML <table> element. The vertical alignment of a table cell <td> defaults indeed to middle. You want to make it to be top instead. This is easy with CSS.
<h:panelGrid styleClass="foo">
with
.foo td {
vertical-align: top;
}
If you have a table inside the panelgrid for which you'd like to keep the default table cell vertical alignment of middle, then you need to alter the CSS as follows:
.foo>tbody>tr>td {
vertical-align: top;
}
so that only the panelgrid's own table cells are top aligned.
To learn all about CSS, check http://www.csstutorial.net.
Use the panelGrid's columnClasses attribute to identify a CSS class that includes the vertical-align: top; style:
<h:panelGrid columns="2" columnClasses="topAligned">
...
</h:panelGrid>
and the CSS file:
.topAligned {
vertical-align: top;
}
The contents of the first column in the panelGrid will then be top-aligned within their cells.
Use the styleClass for the panelGrid as in the following example code:
<h:panelGrid columns="2" styleClass="top-aligned-columns" cellpadding="5" style="display:block" cellspacing="5">
<p:outputLabel value="#{resources['IDNumber']}" />
<p:inputText id="txtIDNumber" value="#{applicantBean.personal.idNumber}" />
</h:panelGrid>
Then in the css configure as follows:
.top-aligned-columns td{
vertical-align: top;
}
With this method you will be able to not only top-align the rows but you can also apply the same styleClass to other panelGrids within the encompassing panelGrid.
For example:
<h:panelGrid columns="3" styleClass="top-aligned-columns" cellpadding="5" style="display:block" cellspacing="5">
<p:panel id="pnlApplicant" header="#{resources['ApplicantHeader']}" styleClass="no-border">
<h:panelGrid columns="2" cellpadding="5" style="display:block" cellspacing="5" styleClass="top-aligned-columns">
<p:outputLabel value="#{resources['IDNumber']}" />
<p:inputText id="txtIDNumber" value="#{applicantBean.personal.idNumber}" >
<p:ajax event="change" process="#this" update="tvQuickScore"/>
</p:inputText>
<p:outputLabel value="#{resources['Name']}" />
<p:inputText id="txtFirstname" value="#{applicantBean.personal.firstName}" />
<p:outputLabel value="#{resources['Surname']}" />
<p:inputText id="txtSurname" value="#{applicantBean.personal.lastName}" />
</h:panelGrid>
</p:panel>
</h:panelGrid>
</p:panel>