I want to create a table using primefaces but my table column's width isn't equal for the header and body. I tried to add style="width: inherit" or style="width: 30%" for each column but the width still uneven between the table header and table body. The table will nicely uniform if it's not scroll-able but I want a scroll-able table.
Here is my code:
<h:panelGrid columns="1" class="plan-panel" columnClasses="label, value">
<h:outputText class="deploy-label" value="Table 1"/>
<p:dataTable var="service" value="aaaa"
id="service-table" scrollable="true" scrollHeight="250">
<p:column headerText="Col1" width="20">
<h:outputText value="test122222222222"/>
</p:column>
<p:column headerText="Col2" width="20">
<h:outputText value="test255567y774"/>
</p:column>
<p:column headerText="Col3" width="20">
<h:outputText value="test3433666"/>
</p:column>
<p:column headerText="Col4" width="20">
<h:outputText value="test43364667"/>
</p:column>
</p:dataTable>
</h:panelGrid>
This is how the table looks like:
I wonder if anyone knows how to apply style on this table so the table's header and body width are equal.
Thanks
Try to make a Simple width in your Column example
<p:column headerText="Col2" width="20"><h:outputText value="test122222222222"/></p:column>
I tried to changed it like that and it worked for me , it's true that the column spice is very small but that worked for me hope that help.
The only 'good' answer in this case is to either stop using scrollable or to use a newer version since 3.5 is rather old (6.0 is already out). There have been lots of changes/improvements in this area.
You could try patching the CSS or most likely the js of the datatable but calculating and aligning the dynamic widths is rather cumbersome. I doubt someone is going to do that for you.
One thing you could try is to see what table-layout: fixed does when applied to both tables (look at the source) and then maybe give each column a fixed width like you do or maybe via css
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 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 using a simple h:panelGrid for displaying the table how could i specify styles for the table to make it better. i am a bit confused with all the stuff i looked online
This is what the code that i have been using
<h:panelGrid id="panel" columns="2" cellpadding="10"
cellspacing="1" style="align:center;">
<f:facet name="header">
<h:outputText value="Registration" />
</f:facet>
<h:outputText value="User Name:" escape="false" />
<h:inputText value="Hello World" />
<h:outputText value="Password:" escape="false" />
<h:inputSecret value="" />
</h:panelGrid>
Could you please specify the list of opssible optons for specifying the css or inline styles for elements in jsf
Thanks in advance
Don't try to use inline styles. Since jsf is a html code generator in this regard, inline styles ofthen do not apply to the html element you want them applied to. Use the styleClass attribute,and create css with the right selectors for the html elements you want to style. Use the apllied class in those selectors
See also
How to align items in a <h:panelGrid> to the right
I have a rich data table and i will make this data table more higher and plan to format text of this data table.
I have written the following css (styleclass "title"):
{width: 100%; font-size: 12px;padding: 4px;}
Now is the question how i can redesign the height of the data table in that way, that a don´t create any browser errors by showing the data table. The feature "width" is solved.
Also i will adjust text in the table, but the css feature "vertical-align:top;" doesn´t work.
Here is my current JSF Code:
<rich:dataTable value="#{model.templates}" var="text" styleClass="title">
<rich:column>
<f:facet name="header">
<h:outputText value="Dummyvalue" style="vertical-align:top;"/>
</f:facet>
</rich:column>
// some other columns
</rich:dataTable>
Thanks for helping me !
Greetz
Marwief
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.