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
Related
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
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>
This question already has answers here:
How do I override default PrimeFaces CSS with custom styles?
(5 answers)
Closed 7 years ago.
can any one advice on adding a space between a radio button and its label.
do we have any attributes in f:selectItem for doing this
I have to align the radios to the other components of the page. My Labels are aligned but to align the radio, I need to put some space between it and the labels.
I am unable to find any attribute to help me in this.
Please help.
Here is how I recently did this, using primefaces:
<p:column headerText="Is your hair naturally blonde?" width="140">
<p:selectOneRadio value="#{mybean.haircolor}" id="haircolor" layout="custom">
<f:selectItem itemValue="true" />
<f:selectItem itemValue="false" />
</p:selectOneRadio>
<p:panelGrid columns="2">
<h:panelGroup>
<p:radioButton id="hairColorYes" for="haircolor" itemIndex="0"/>
<h:outputLabel for="hairColorYes" value="Yes" styleClass="radiolabelPF"/>
</h:panelGroup>
<h:panelGroup>
<p:radioButton id="hairColorNo" for="haircolor" itemIndex="1"/>
<h:outputLabel for="hairColorNo" value="No" styleClass="radiolabelPF"/>
</h:panelGroup>
</p:panelGrid>
</p:column>
and then my one CSS style:
.radiolabelPF {
margin-left: 5px;
}
The trick was to use layout="custom" in <p:selectOneRadio>. My actual radio buttons and labels are within the <h:panelGroup> tags.
This was the only way I could control the space between the radio label and button in Primefaces. It's also documented in the "custom layout" section of the documentation on selectOneRadio.
http://www.primefaces.org/showcase/ui/input/oneRadio.xhtml
Please use CSS styles for this task - please see this tutorial for examples
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.