I am trying to apply a JSF rendered attribute to a span within an h:panelGroup but the span still renders - below is some sample code I am using.
<span id="myId" rendered="#{myBean.rendered}" class="groupBox" style="left: 1px; top: 8px; height: 38px; width: 339px;" />
Thanks
The rendered attribute is only recognized by JSF components, not by plain HTML elements.
The JSF equivalent of the desired code can be represented by <h:panelGroup> or <h:outputText>. Both generate a HTML <span> element. If you need a <span> without text content, exactly like as in your question, just use <h:panelGroup>.
<h:panelGroup id="myId" rendered="#{myBean.rendered}" styleClass="groupBox" style="left: 1px; top: 8px; height: 38px; width: 339px;" />
If you need a <span> with text content, use <h:outputText>. You can specify the text content in its value attribute.
Alternatively, if you really, really need to write down a plain HTML <span> element yourself for some reason, then you can always move the rendered attribute to an <ui:fragment> which wraps the entire HTML content.
<ui:fragment rendered="#{myBean.rendered}">
<span id="myId" class="groupBox" style="left: 1px; top: 8px; height: 38px; width: 339px;" />
</ui:fragment>
You can use this as well:
<p:outputPanel style="display:block">
</p:outputPanel>
Ref: https://forum.primefaces.org/viewtopic.php?t=723
Related
I want to make resizeable inputTextarea in dataTable. Written next xhtml by the Primefaces-Users-Guide and ShowCase
<p:dataTable id="valueSelection" var="value"
value="#{dtBasicView.cars}">
<p:column headerText="Test" >
<h:inputTextarea value="#{car.brand}" autoResize="true" cols="38"
style="overflow: hidden; overflow-wrap: break-word; resize: none;"/>
</p:column>
</p:dataTable>
But when the text in inputTextarea is only one row, the height is for two row.
In FireFox the element row is (without class):
<textarea id="mainform:tabPanel:valueSelection:1:j_idt132" name="mainform:tabPanel:valueSelection:1:j_idt132" cols="38" style="overflow: hidden; overflow-wrap: break-word; resize: none;" disabled="disabled">STEVE6666</textarea>
And the generated css is (without height):
element {
overflow: hidden;
overflow-wrap: break-word;
resize: none;
}
Why primefaces does not generate height in css and class attribute in html tag?
In your example you used h:inputTextarea, which is the default implementation of the component in JSF, and thus, does not support auto resize.
Try to use p:inputTextarea, which is the PrimeFaces one, and check if the desired behavior will happen.
I have a <h:commandLink id="link1" ..> within a <div id="div1">. I want to get the id of this div( the parent element of <h:commandLink id="link1" ..> in the backing bean, I don't want to get it directly but I want get it going through its child( ).
Please How could I achieve this.
Here you can find a sample of my code.
<div style="text-align:center; height: 50px; width: 100%; background: wheat;
border: 1px #6e5d40 solid; margin-top: 5px;">
<h:form>
<ui:repeat var="label1" value="#{backingBean.listOfSearchValue}">
<span class="filterLabel">#{label1} <h:commandLink class="glyphicon glyphicon-remove"></h:commandLink>
</span>
</ui:repeat>
</h:form>
</div>
Don't just use a plain HTML div, but use a h:panelGroup layout="block". Then it is just a matter of getting the parent of the UIComponent (the button in your case).
See also OmniFaces Components for help with finding components from within your bean, especially getClosestParent(UIComponent component, Class<C> parentType).
Click on the following link,
TextBox with search Image on Left
i want the text box exactly the sameway with watermark in it.
I tried multiple ways,but nothing worked
Content from my .xhtml file
<h:inputText id="bundelId" styleClass="icon2" value="">
<p:watermark value="Enter Bundel Id" for="bundelId" styleClass="icon2"></p:watermark>
</h:inputText>
My css contains following classes
.icon2 {
background: url(search.gif) no-repeat 4px 4px;
padding:4px 4px 2px 20px;
height:10px;
margin: 0;
}
.icon3 {
float: right;
background: url(search.gif) no-repeat left bottom;
border: 0;
cursor: pointer;
margin: 0;
}
I have tried with both jsf and primefaces tags together with css classes mentioned above.
Can someone help?
if you are using FontAwesome you could try:
<p:watermark value=" Enter Bundel Id" for="bundelId" />
<h:inputText id="bundelId" value="" style="font-family:Arial, FontAwesome">
being the unicode for icon-search.
https://fortawesome.github.io/Font-Awesome/cheatsheet/
(How) is it possible to dynamically resize primefaces galleria depending on the size of the sourrounding div-container? The galleria should allways fill the entire surrounding div-container.
Would be jscript/jquery the right approach?
http://www.primefaces.org/showcase-labs/ui/galleria.jsf
Try make the .ui-galleria width attribute to 100%. Make sure that css class is relative.
In order to make both the gallery and the images inside fill the container, add in the css:
.ui-panel-images {
width: 100%;
height: 100%;
}
.ui-galleria-panel {
width: 100%;
height: 100%;
}
Also, add the following to the p-galleria element:
panelWidth="auto"
I'm trying something similar, and I also came to a problem.
I am using the p:galleria element like these:
<h:form id="galleriaForm" style="border: 2px solid blueviolet; min-height: 800px">
<p:panelGrid columns="1" layout="grid" style="border: 2px solid aqua; min-height: 100%">
<p:row style="display: inline-block; min-height: 800px;border: 2px solid green; min-width: 100%">
<p:column style="display: inline-block; min-height: 100%; min-width: 100%;border: 2px solid red">
<p:outputLabel value="Überschrift" style="display: block;"/>
<p:galleria value="#{ImageManager.layoutBauenBilderlsite}"
id="galleriaID"
var="image"
showCaption="false"
transitionInterval="9000"
effectSpeed="1500"
style="display: inline-block; min-width: 100%"
effect="drop"
panelHeight="">
<p:graphicImage url="resources/images/#{image}"
style="height: 1040px; border:1px dotted lightgray; margin-left: 30%"/>
</p:galleria>
</p:column>
</p:row>
</p:panelGrid>
</h:form>
To change the panelHeight attribute the h:body uses onload to call a js function:
function setGalleriaHeight(){
var h = window.innerHeight;
document.getElementById("galleriaForm:galleriaID").setAttribute("panelHeight", String(h));
}
The panelHeight attribute is set correctly, as I can see with my Browser, but the Element does not change.
To make sure that the attribute is correct I added it in my source code and it worked fine.
I also tried to set the the size as style="height: h" but then only the loaded image "p:graphicImage does not resize with.
Maybe there is someone to know why it does not change.
I'm trying to achieve the layout shown here
Each of the panels should be linked to a backing bean from which I will later add differrent components according to context.
I tried using panelgrid but could not achieve this look.
I would prefer to use just JSF for this but if impossible or too complicated RichFaces is ok too.
Thanks!!
It's not only matter of JSF/HTML, but it's also a matter of CSS. The above layout can basically already be achieved as follows:
<h:panelGroup id="header" layout="block"></h:panelGroup>
<h:panelGroup id="leftcol" layout="block"></h:panelGroup>
<h:panelGroup id="rightcol" layout="block"></h:panelGroup>
(which generates the following HTML)
<div id="header"></div>
<div id="leftcol"></div>
<div id="rightcol"></div>
You can style/position it using CSS like as:
#header {
width: 100%;
height: 100px;
}
#leftcol {
width: 200px;
float: left;
}
#rightcol {
float: left;
}
That's all.
You can use the HTML code with which you have achieved the above layout. I.e.
<table>
<tr>..</tr>
<tr>..</tr>
</table>
However, the table-less layouts are preferred - i.e. using <div> tags. (see here)