I have read-only textboxes in a form that auto-populate data from a table.
<p:inputText value="#{ManagedBean.var}" styleClass="textbox" id="varDetails" maxlength="200"></p:inputText>
Some entries are not displayed completely because they exceed the textbox width.
How can i use the Onmouseover command to change the width of the textbox dynamically?
This seems to work:
<h:form>
<p:inputText ...
onmouseover="$(this).attr('size', this.value.length)"
onmouseout="$(this).attr('size', '')" />
</h:form>
You'd have to use min-width and not width in the styleclass.
But if the content is smaller than the current size, it will also become smaller. If you don't want that you can use something like
onmouseover="if (this.value.length > 10) $(this).attr('size', this.value.length)"
The value (10 above) should be chosen so it matches the min-width in the styleclass.
Otherwise you could give it a title:
<p:inputText ... value="#{ManagedBean.var}" title="#{ManagedBean.var}" />
That will be shown onmouseover.
You could also give it a p:tooltip:
<p:tooltip for="varDetails" value="#{ManagedBean.var}" />
That's more or less the same.
Related
I have the following tag of primefaces
<p:outputLabel readonly="true" value="${displayHelper.getValue('CONTEXT_1')} ${displayHelper.getDescription('CONTEXT_1')}" />
to display some information.
the result of ${displayHelper.getValue('CONTEXT_1')} ${displayHelper.getDescription('CONTEXT_1')}" is 100%.
Now I want to display the result of vlaue as 100 (also bold) with "%" (small) without bold. How can I manage that in this case?
Also result should look like 100 %
I have the following code:
<rich:dataScroller id="scrollerTest" for="userAdminTable"
fastControls="auto" renderIfSinglePage="false" render="userAdminTable" />
The data scroller works fine, but it looks weird, because the width of the table is much larger than the datascroller. It seems like there should be an easy way to control the width of the datascroller, but I am not able to find that info anywhere in the documentation. Do I need to just write custom CSS for this or did I miss something?
Move rich:dataScroller inside rich:dataTable:
<rich:dataTable ...>
...
<f:facet name="footer">
<rich:dataScroller renderIfSinglePage="false" fastControls="auto" />
</f:facet>
</rich:dataTable>
I am using Primefaces graphicImage inside a p:tooltip and would like to set the width and height for the images individually.
<p:remoteCommand....update="myImage" />
<p:tooltip beforeShow="remoteCommand()">
<p:graphicImage id="myImage"... style="#{myBean.myStyle}" />
....
Update:
Bean.myStyle is triggered correctly and the style parameter is updated in the page source, but not in the dom tree.
If I set style="width:100px" directly it works, but if the value comes from the bean, it is ignored.
It seems like the style-attribute of graphicImage gets updated but not the component itself.
What am I missing here?
I think style value is setted when the document is loaded and its never reloaded, when its visible just its display:none value is changing. So I would give an id to p:graphicImage then I would add a p:ajax using onShow or similar event (I dont know which one is available for tooltip) then I would use update attribute to render graphic image. If I remember right even it should work just with <p:ajax /> without any attribute but I am not sure
So it should look like that:
<p:graphicImage id="x" style="#{bean.value}">
<p:ajax event="show" update"x"/>
</p:graphicImage>
use this
<p:graphicImage width="#{bean.widthValue}" height="#{bean.heightValue}" >
</p:graphicImage>
Here is my acefaces datatable
<ace:dataTable id="tbl" value="#{mainSearch.searchResult}" var="srvc"
paginator="true" paginatorPosition="bottom" rows="10"
emptyMessage="No Record Present Yet" rowsPerPageTemplate="10,25,50,100"
rowIndexVar="row" rowStyleClass="#{row mod 2 eq 0?'none':'skyBlue'}">
<ace:column headerText="Category" sortBy="#{srvc.groupName}"
filterBy="#{srvc.groupName}" filterMatchMode="contains">
<h:outputText value="#{srvc.groupName}"/>
</ace:column>
<ace:column headerText="Service Number" sortBy="#{srvc.serviceNumber}"
filterBy="#{srvc.serviceNumber}"filterMatchMode="contains">
<h:outputText value="#{srvc.serviceNumber}"/>
</ace:column>
<ace:column headerText="Shift" sortBy="#{srvc.shift}"
filterBy="#{srvc.shift}" filterMatchMode="contains">
<h:outputText value="#{srvc.shift}"/>
</ace:column>
</ace:dataTable>
Now this datatable is showing on my whole page.I can fix its height by <ace:datatable height=.. but I didn't find any width attribute.I also tried to set its width using CSS (using style attribute on both header, datatable) but it didn't work. Now I am stuck here and unable to find that How can I minimize its width.
Note: The only way that worked for me was to small the header text.For instance, As my first row header is Category.Now If I repalced it with just CAT then whole row gets shrink.It mean first of all I need to squeez the text(as it is my guess).Is there anyway that without poking this text? If not, then how can I resize this text and shortened this datatable?
I've tried altering CSS width property in Firefox of the ICEfaces showcase, achieving the result you want. Note that there may be some potential problems when you make the table too small and the data won't fit in the table anymore, so my advice will be to inspect the resultant table in the browser to get the right CSS fixture.
Regarding the documentation of <ace:dataTable>, there are the typical styleClass and style property for setting CSS style classes and inline style respectively, so the following will do the work:
<ace:dataTable style="width:80%"> ... </ace:dataTable>
or
<ace:dataTable styleClass="my-width"> ... </ace:dataTable>
with CSS class:
.my-width {
width:80%
}
As a side note, when you are ready to try out the latest Primefaces <p:dataTable>, you will find many attributes designed for setting up proper CSS styles.
I have a JSF 1.2 dataTable using ICEfaces 1.8. In one column, I would like to display the text from a backing bean, and then to the right of it, display a small image on the same line without it wrapping to a new line.
The image is actually a ice:commandButton component with the image attribute set. The action of clicking on the image is to display a ice:panelPopup panel.
Here is the relevant code of the column within the dataTable:
<ice:column id="col1">
<ice:outputText escape="false" value="#{document.column1Value}" />
<ice:form>
<ice:commandButton actionListener="#{bean1.open}" image="images/popup.gif">
<f:attribute name="docParam" value="#{document.parameter}" />
</ice:commandButton>
...
</ice:form>
</ice:column>
I have tried all sorts of adding CSS style information to various tags, including white-space:nowrap and float but have been unable to get the desired effect.
The <ice:form> generates a HTML <form>, which is by default a block level element, so it always starts at a new line. You need to set the style of the <form> to display: inline.
<ice:form style="display: inline;">
Alternatively, you can also just move that text into the form.
<ice:form>
<ice:outputText escape="false" value="#{document.column1Value}"/>
<ice:commandButton actionListener="#{bean1.open}" image="images/popup.gif">
<f:attribute name="docParam" value="#{document.parameter}" />
</ice:commandButton>
...
</ice:form>
Either way, you only still need to prevent the cell's content from being whitespace-wrapped when there's little room left in the cell's width. You could achieve that by setting white-space: nowrap on the common parent element of the both elements. In case of the first approach (setting the form to display: inline), that would be the <td> element and in case of the second approach (putting the text inside the same form), that would be the <form> element. E.g.
<ice:form style="white-space: nowrap;">
<ice:outputText escape="false" value="#{document.column1Value}"/>
<ice:commandButton actionListener="#{bean1.open}" image="images/popup.gif">
<f:attribute name="docParam" value="#{document.parameter}" />
</ice:commandButton>
...
</ice:form>
(note, the style attribute is in the above examples exemplary, in real you should be using CSS files instead with style classes)