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>
Related
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.
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>
How would I set the default properties of server controls that I'll always use?
For example I have combos all over my pages which almost always look the same in the mark up text (e.g. CSS CLasses for PopUp, TextBox, Button, etc.)
I thought of putting the control inside an user control and set the properties there.
But then I would have to access the control itself with a property of the UC.
I want to get rid of these repeating tags:
<Appearance>
<AnyRecordFieldCell CssClass="SFGridAnyRecord"></AnyRecordFieldCell>
<AlternateRecordFieldCell CssClass="SFGridAlternateRecord"></AlternateRecordFieldCell>
<RecordPreviewCell CssClass="SFGridRecordPreview" />
<GroupIndentCell CssClass="SFGridGroupIndentCell" />
<GroupCaptionCell CssClass="SFGridGroupCaption" />
<AnySummaryCell CssClass="SFGridAnySummary" />
<GroupCaptionPlusMinusCell CssClass="SFGridPlusMinus" />
<TopLeftHeaderCell CssClass="SFGridTopLeftHeaderCell" />
<RowHeaderCell CssClass="SFGridRowHeaders" />
<ColumnHeaderCell CssClass="SFGridColumnHeaders" />
<GroupHeaderRowHeaderCell CssClass="SFGridGroupedColumnHeaders" />
<FilterBarCell CssClass="SFGridFilterBarCell" />
</Appearance>
Any ideas?
Consider using ASP.NET Themes, you can use them to set mark-up for controls.
You could go with a purely CSS solution if these elements are almost always the same - i.e. have styles for input and button elements.
Where styles differ the enclosing div, for example, can be referenced to change the style.
how can i set the header style of the p:panel component? i want to set the height of the panel_header div.
<p:panel id="panel"
toggleSpeed="500" toggleable="true">
<f:facet name="header" >
<p:outputPanel style="float:left;">
<p:commandButton process="#this" id="new"
oncomplete="dialog.show();" icon="ui-icon-plus" />
<p:spacer width="15px;" />
</p:outputPanel>
<h:outputLabel value="Title" />
</f:facet>
</p:panel>
You normally use CSS for styling. Use the .ui-panel .ui-panel-titlebar selector. You can find the CSS selectors and all its properties in every bit decent webbrowser developer toolset. In Chrome, IE9 and Firebug, rightclick the titlebar and choose Inspect Element or press F12.
Here's an example how it look like in Chrome:
To start, you could set the padding to 0.
.ui-panel .ui-panel-titlebar {
padding: 0;
}
Put this in a .css file which you load by <h:outputStylesheet> inside <h:body>, so that it get loaded after PrimeFaces default CSS.
See also:
How do I override default PrimeFaces CSS with custom styles?
Enclose the p:panel in <h:form prependId="false">.
Then you can use the ID selector (as mentioned in the other reply), as the id will not change.
.ui-panel-titlebar {
//Your style-sheet code
}
Adding a header facet to the panel is a good solution if you just need to change one panel. Inside the facet add any styling you require.
<p:panel>
<f:facet name="header" style="font-size: medium">
</f:facet>
</p:panel>
I avoid messing with the primefaces styling as much as possible if I just want to change individual components.
From my understanding at the Richfaces demo page and docs, I should be able to skin standard HTML elements.
This feature provides styling for standard HTML form elements in order to be highly compilant with RichFaces common look'n'feel.
I may be a little burnt out with RF today, but I don't see how to get skinning on regular elements. For example if I wanted a hand made table to match the fancy Richfaces tables I would have thought something like this would work:
<table class="rich-table">
<tr class="rich-tr">
<a4j:repeat value="#{myBean.elements}" var="e">
<th class="rich-th" >
<h:outputText value="#{e.text}" />
</th>
</a4j:repeat>
</tr>
</table>
Other elements I've tried to skin haven't been working either, so I feel I am going at this the wrong way. The ultimate goal is to have standard HTML elements blend in and still allow the skins to be swapped from say blueSky to emeraldGreen w/o changing specific elements.
There problem is - richFaces doesn't come with a "static table" tag, and does not provide automatic skinning of tables, because of "blablabla" (some lame excuse ;) ). And manual skinning is awful.
The solution: use rich:dataTable, providing some dummy value (rich:dataTable value="DummyStaticValue") and use rich:columnGroup together with rich:column.
Your combination will only be rendered once (because of the dummyValue being just a string), and you can get any table structure you want.
<rich:dataTable width="100%" value="DummyStaticValue">
<f:facet name="header">
<h:outputText value="myHeader" />
</f:facet>
<rich:columnGroup>
<rich:column>
<h:outputText value="myValue1" />
</rich:column>
<rich:column>
<h:outputText value="myValue2" />
</rich:column>
</rich:columnGroup>
<rich:columnGroup>
<rich:column>
<h:outputText value="myValue3" />
</rich:column>
<rich:column>
<h:outputText value="myValue4" />
</rich:column>
</rich:columnGroup>
Try this. Add this context parameter: org.richfaces.CONTROL_SKINNING to web.xml and set it to 'enable'. I'm not 100% sure it will skin a table tag. If not, you can use #{richSkin.any_param_name} to skin the table manually.