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.
Related
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).
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
I'm trying to show only the button add and the uploaded picture below the button, but it doesn't matter what I do in my CSS, the table generated by richfaces is always the same:
This is my form using richfaces:
<ui:define name="content">
<h:form>
<h:panelGrid>
<rich:fileUpload fileUploadListener="#{fileUploadBean.listener}" id="upload" acceptedTypes="jpg, gif, png, bmp" ontyperejected="alert('Just JPG, GIF, PNG and BMP are allowed');" maxFilesQuantity="12" immediateUpload="true" >
<a4j:ajax event="uploadcomplete" execute="#none" render="info" />
</rich:fileUpload>
<h:panelGroup id="info">
<h:outputText value="Add picture" rendered="#{fileUploadBean.size==0}" />
<rich:dataGrid columns="4" value="#{fileUploadBean.files}" var="file" rowKeyVar="row">
<a4j:mediaOutput element="img" mimeType="image/jpeg" createContent="#{fileUploadBean.paint}" value="#{row}" style="width:100px; height:100px;" cacheable="false" />
</rich:dataGrid>
<br />
<a4j:commandButton action="#{fileUploadBean.clearUploadData}" render="info, upload" value="Clear Uploaded Data" rendered="#{fileUploadBean.size>0}" />
</h:panelGroup>
</h:panelGrid>
</h:form>
</ui:define>
And this is how is generated :
I want something more simple 'cause in another moment I will some jQuery slider plugin. But I can't disappear with this table generated by richfaces.
And yes skins are disable in my richfaces configuration:
update
Following the suggestion my CSS look like this now:
<style>
div div.rf-fu { border: 0px; width: 85px; }
div div.rf-fu-hdr { border: 0px; }
span span.rf-fu-btn-clr { border: 0px; }
span.rf-fu-btns-lft{ width: 85px; }
span.rf-fu-btns-rgh{ display: none; }
div div.rf-fu-lst { display:none; }
</style>
And now my add.. file button looks like:
These post was very useful too:
Should I use 'border: none' or 'border: 0'?
Inner div has borders - how to override with a class on an outer div?
You can use Adrian's answer to override richfaces css however you don't need to use !important to override richfaces css. Just use selector specificity to override the css applied by richfaces.
For Instance in case where you are using important, apply the css as:
div div.rf-fu-lst { display:none } and it will work for you.
I'm currently doing this for my project. You have to override the richfaces css in your stylesheet like this:
.rf-fu, .rf-fu-hdr {
float: left;
width: auto;
border: none;
background: none;
padding: 0;
margin: 0;
}
.rf-fu-btn-cnt-add {
paddin-left: 0;
cursor: pointer;
}
.rf-fu-btn-add {
margin: 0;
}
.rf-fu-btns-rgh, .rf-fu-lst {
display: none;
}
.rf-fu-btns-lft {
width: 100%;
}
Is there a feature that displayable tooltip for disabled commandButton in primefaces.
If you wont find a way to show tooltip on the disabled button you can always try wrap it with some
<h:panelGroup></h:panelGroup> which will turn into span
or with
<h:panelGroup layout="block"></h:panelGroup> which will turn into div
And try to apply the tooltip to the wrapper...
In this question explains #Kukeltje why tooltips do not work on a disabled commandButton: PrimeFaces 6.2 commandButton title not working when commandbutton is disabled
The class .ui-state.disabled is added to the button if its disabled attribute is set to true:
.ui-state-disabled {
cursor: default !important;
pointer-events: none;
}
In order to display the tooltip anyways you could create something like this:
<p:commandButton id="testButton" disabled="true"
action="yourAction" styleClass="showTooltip" value="Click me!" />
In your css file add the following rule:
.ui-state-disabled.showTooltip{
pointer-events: all;
}
If an element has both classes ui-state-disabled and showTooltip the tooltip will be displayed anyways.
I would like to extend Daniel's answer. You need to insert overlay block over disabled button and apply tooltip on it. Simple wrapping button in h:panelGroup won't be so helpful.
<h:panelGroup styleClass="display: inline-block; position: relative;">
<p:commandButton disabled="#{controller.isDisabled()}" ... />
<h:panelGroup styleClass="display: block; height: 100%; width: 100%; position: absolute; top: 0px; left: 0px;"
rendered="#{controller.isDisabled()}"
id="disabledBtnOverlay" />
</h:panelGroup>
<p:tooltip for="disabledBtnOverlay" rendered="#{controller.isDisabled()}" />
A way to make a disabled button or inputtext to show a tooltip is creating a global tooltip and in the inputtext or button a title, like this:
<p:tooltip />
<p:inputText id="inputTextID" disabled="true" value="Your value"
title="TooltipMessage" />
Though it won't show any styles, dunno why
How do I align the content in the columns created by panelGrid component to the top ?
I tried with no success, the following code
<h:panelGrid columns="2" style="vertical-align:top; " >
<p:tabView style="margin:0px 0px 50px 0px; width: 450px; padding-top: 0px;vertical-align:top" ></p:tabView>
<p:menubar autoSubmenuDisplay="true" style="width: 300px; vertical-align:top" ></p:menubar>
</h:panelGrid>
But the 2 columns created hereby still remain vertically middle aligned.
Based on this answer, you can do like this (I like this approach the most)
<h:panelGrid columnClasses="className">
.className {
vertical-align: top;
}
for me it works if you do it like that:
<h:panelGrid columns="6" cellspacing="4" cellpadding="4" styleClass="panelColumns">
</h:panelGrid>
and create a css file which contains:
.panelColumns td {
vertical-align: top;
}
just as additional hint .. so you do not have to search to long :)