This is working:
<h:panelGroup layout="block" id="map-wrapper">
<p:gmap center="#{locationService.getLatLngAsString(userSession.location)}"
zoom="15"
type="HYBRID"
model="#{addOfferController.emptyModel}"
onPointClick="handlePointClick(event);"
style="width:600px;height:400px"/>
</h:panelGroup>
This is not:
<h:panelGroup layout="block" id="map-wrapper" style="display: none">
<p:gmap center="#{locationService.getLatLngAsString(userSession.location)}"
zoom="15"
type="HYBRID"
model="#{addOfferController.emptyModel}"
onPointClick="handlePointClick(event);"
style="width:600px;height:400px"/>
</h:panelGroup>
In the second code there is only div with specified height and width inside map-wrapper.
What could be the reason?
Thanks!
The reason is that some PF components need dimension information to render themselves on client side. When they are in a container that has display: none;, problems often occur.
I've just found a workaround:
Add a widgetVar property to your g:map component widgetVar="gmap"
In the same page, add this javascript <script type="text/javascript">gmap._render();</script>
Related
How to align icon field to top with - Primefaces 3.2 with JSF2.
I'm dealing with a combobox that represents a complex concept to the business logic, by user side. So the field will have a icon (link with graphic image) that summon a explanation to user understand better the concept. The problem is that the icon dont stay align in the top, taking as reference the heigth of field(combobox). bellow has the code and a image of the current representation.
Code:
<h:outputLink id="stockBlockedProductsWithAllStockBlockedInfo" value="#">
<p:graphicImage library="images" name="information.png" width="16px"/>
</h:outputLink>
<p:tooltip for="stockBlockedProductsWithAllStockBlockedInfo"
showEffect="slide" hideEffect="slide" >
<span style="white-space: nowrap">
<h:outputText escape="false" value="#webcore_view['Informação']}"/>
</span>
</p:tooltip>
Observe that the info icon (i) is align to bottom of the field
Thanks to All!
I'll Explain how i solved this task:
I setted a style vertical alignment directly by the component.
And was quite simple just add the correct style alignment:
style="vertical-align: top;"
The correct code looks like:
<h:outputLink id="stockBlockedProductsWithAllStockBlockedInfo" value="#">
<p:graphicImage library="images" name="information.png" width="16px"
style="vertical-align: top;"/>
</h:outputLink>
<p:tooltip for="stockBlockedProductsWithAllStockBlockedInfo"
showEffect="slide" hideEffect="slide" >
<span style="white-space: nowrap">
<h:outputText escape="false" value="#webcore_view['Informação']}"/>
</span>
</p:tooltip>
And the correct position is like that:
The link contains an example of richfaces 4 popuppanel:
richfaces popuppanel example
Here is the code:
<rich:toolbar height="26px" id="tb">
<rich:toolbarGroup location="right">
<h:outputLink value="#">
<rich:componentControl event="click" operation="show" target="ls">
<a4j:param name="event" value="event" noEscape="true" />
<rich:hashParam>
<a4j:param noEscape="true" name="top"
value="jQuery(#{rich:element('tb')}).offset().top + jQuery(#{rich:element('tb')}).height()" />
<a4j:param noEscape="true" name="left"
value="jQuery(#{rich:element('tb')}).offset().left + jQuery(#{rich:element('tb')}).width() - p_width" />
</rich:hashParam>
</rich:componentControl>
Search
</h:outputLink>
</rich:toolbarGroup>
</rich:toolbar>
<rich:popupPanel header="Enter Search Terms" id="ls" autosized="true" modal="false" moveable="false" resizeable="false" followByScroll="false" >
<h:panelGrid columns="3">
<h:outputText value="Search:" />
<h:inputText />
<h:outputLink onclick="#{rich:component('ls')}.hide(event); return false;" value="#">Search
</h:outputLink>
</h:panelGrid>
</rich:popupPanel>
<h:outputScript type="text/javascript" target="body">
p_width = #{rich:component('ls')}.width();
</h:outputScript>
But the popup is appearing in random places, i.e. sometimes under the bar, and then have to scroll and sometimes above. Is it possible to make sure it always appears right above the bar while being attached to it?
The top and left parameters set the position of the panel, change them to where you want the panel to be, or call the method directly:
RichFaces.component('panelId').show(null, {top: "800px", left: "500px"})
You're using the part of the example that specifically sets the panel under the bar so it shouldn't be surprising when the panel appears there.
I need display a primefaces commandButton when mouse pointer is over another commandButton, but I can use div only if is extremely necesary. If is posible do this whith the onmuseover event much better, like:
<p:commandButton id="button1" value="Display" onmouseover="displayButton2" update="button2"/>
<p:commandButton id="button2" value="Valid Option" rendered="false"/>
If you don't want to use a div you can use a span:
<p:commandButton id="button1" value="Display" />
<span id="buttonSpan">
<p:commandButton id="button2" value="Valid Option"/>
</span>
And your css:
#buttonSpan{
display:none;
...
}
#form\:button1:hover #buttonSpan{
display:block;
}
In css \ is the escape literal. So actually you're setting a "hover" CSS setting on the component with the id form:button1. So if you don't have a form, then its #button1:hover... If your form is called formTest then its #formTest\:button1. You need to check your generated id for that component.
I want to replace all kind of buttons on my page with div as bellow:
<div class="button">
<div class="button_left"></div>
<div class="button_center">save</div>
<div class="button_right"></div>
</div>
I replace components onto h:commandLink and it work with most of them,
except those like this:
<h:form>
<h:commandButton value="do it" action="#{myBean.myFirstAction()}" />
<h:commandButton value="do that" action="#{myBean.mySecondAction()}" />
</h:form>
How to deal with it?
[edit]: a4j:commandButton is an example of component that work fine. The difference between those component is that h:commandButton ganerate input type="submit" and the rest generate input type="button".
I'm using PrimeFaces 3.0-M3 and I have a <p:dataTable> with two columns in it. I want the first column to be fixed at a width of 20px. The other column can use whatever space is left over.
Here are screenshots of what I'm currently getting:
The first <p:column> seems to be ignoring the style setting that should have limited the width. It is sized way too big for the tiny coloured square that is the only content inside it and then the other column is pushed too far to the right.
Here is more of my Facelet code:
<p:dataTable
id="dataTableExpressions"
value="#{catconBean.userDefinedExpressionDataModel}"
var="currentRow"
emptyMessage="!! EMPTY TABLE MESSAGE !!"
selection="#{catconBean.userDefinedExpressionToEdit}"
selectionMode="single">
<p:ajax
event="rowSelect"
listener="#{catconBean.onUserDefinedExpressionRowSelect}"
update=":toolbarForm:catconToolbar" />
<p:ajax
event="rowUnselect"
listener="#{catconBean.onUserDefinedExpressionRowUnselect}"
update=":toolbarForm:catconToolbar" />
<p:column id="paletteColor" style="width:20px;">
<h:panelGroup
layout="block"
rendered="#{not empty currentRow.paletteColor}"
style="width:16px;height:16px;border:thin;border-style:solid;border-color:black;background-color:##{currentRow.paletteColor.RGB};" />
<h:panelGroup
layout="block"
rendered="#{empty currentRow.paletteColor}"
style="width:16px;height:16px;border:thin;border-style:dashed;border-color:red;background-color:white;text-align:center;">
<h:outputText value="?" style="color:red;font-weight:bold;" />
</h:panelGroup>
</p:column>
<p:column id="name">
<f:facet name="header">
<h:outputText value="#{bundle.catcon_label_CategoryName}" />
</f:facet>
<h:outputText
value="#{currentRow.name}"
style="#{not currentRow.definitionComplete ? 'color:red;' : ''}" />
</p:column>
</p:dataTable>
Can anyone tell me how to modify my Facelet code to make the first column have a fixed width of 20px?
In PrimeFaces 3.0, that style get applied on the generated inner <div> of the table cell, not on the <td> as you (and I) would expect. The following example should work out for you:
<p:dataTable styleClass="myTable">
with
.myTable td:nth-child(1) {
width: 20px;
}
In PrimeFaces 3.5 and above, it should work exactly the way you coded and expected.
This worked for me
<p:column headerText="name" style="width:20px;"/>
For some reason, this was not working
<p:column headerText="" width="25px" sortBy="#{row.key}">
But this worked:
<p:column headerText="" width="25" sortBy="#{row.key}">
I don't know what browser you're using, but according to w3schools.com, nth-child and nth-last-child do now work on MSIE 8. I don't know about 9. http://www.w3schools.com/cssref/pr_border-style.asp will give you more info.
can you try
<p:column width="20">
Inline styling would work in any case
<p-column field="Quantity" header="Qté" [style]="{'width':'48px'}">
I just did the following (in V 3.5) and it worked like a charm:
<p:column headerText="name" width="20px"/>
Addition to #BalusC 's answer. You also need to set width of headers. In my case, below css can only apply to my table's column width.
.myTable td:nth-child(1),.myTable th:nth-child(1) {
width: 20px;
}