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
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).
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%;
}
I want to have a component that looks like a button, but instead of text it should contain an image.
Because the standard button does not offer this functionality, I tried to use a <h:commandLink>:
<h:commandLink action="#{some_action}">
<p:panel styleClass="some_style">
<h:graphicImage value="#{some_image}">
</p:panel>
</h:commandLink>
This doesn't work. The <h:commandLink> is translated into an <a> tag, and the <p:panel> into a <div>. <a>-tags may not contain <div>-tags, so the <div>-tag is automatically placed outside the <a>-tag.
The result is that only the image is clickable, not the surrounding panel which is styled to look like a button. Is there a way to make the surrounding panel part of the link, or to put an image inside a button?
My project uses JSF and the Primefaces library:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:composite="http://java.sun.com/jsf/composite"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.prime.com.tr/ui">
There are a couple ways you can add an image to a commandButton:
Using the image attribute
<h:commandButton action="#{some_action}" image="button.gif" />
Absolute or relative URL of the image
to be displayed for this button. If
specified, this "input" element will
be of type "image". Otherwise, it will
be of the type specified by the "type"
property with a label specified by the
"value" property.
Use CSS
<h:commandButton action="#{some_action}" styleClass="button" />
.button {
background: white url('button.gif') no-repeat top;
}
You could just move the div outside e.g.
<div class="myButton">
<h:commandLink action="#{some_action}" styleClass="clickAll">
<h:graphicImage value="#{some_image}">
</h:commandLink>
</div>
And style the div that way. Just make the anchor (a tag) display as a block and it should fill the whole div so it's all clickable. For example in your CSS go:
.clickAll{
display:block;
}
If you can use an icon from PrimeFaces/JSF, then there is a simple and sound solution is
<p:column>
<p:commandButton icon="ui-icon-wrench"
style="border-width:0;background:none;"/>
</p:column>
It may help to avoid JavaScript code in JSF.
If the image does not fit then add properties to a сss class:
.button {
background: white url('button.gif') no-repeat top;
width: 32px; // button width
height: 32px; // button height
background-size: contain;
border: none; // hide border of button
}