How to align JSF components to center - css

In my JSF 2 - Primefaces 3 web application, I am using <p:panelGrid> and <p:panel>. I have multiple components inside them which are left justified. I need to all to be center align. How can we do this I tried to use div but it does not work.

Look at the generated HTML output and alter CSS accordingly.
If the HTML element which you'd like to center is a block element (<div>, <p>, <form>, <table>, etc, or forced by display: block;), then you first need to give it a known width and then you can center it relative to its parent block element using CSS margin: 0 auto; on the element itself.
If the HTML element which you'd like to center is an inline element (<span>, <label>, <a>, <img>, etc, or forced by display: inline;), then you can center it using CSS text-align: center; on its parent block element.

If you want to set the content of a primefaces:panelGrid to center you can try this:
<h:panelGrid column="1">
<h:panelGroup style="display:block; text-align:center">
your contents...
</h:panelGroup>
</h:panelGrid>

We are using RichFaces, but the solution that we used in this case may apply to Primefaces as well. We used to style the inner elements with css.
Once you render the page in the browser, you can look up the source code and find out what HTML elements are rendered. Then create specific CSS classes and style the whole panel or the inner elements in panelGrid to that class.
Most of the time, this was the easiest solution and also sufficient.

Try with css and p:panelGrid columnClasses attribute:
<p:panelGrid columnClasses="centered">
...
</p:panelGrid>
then in your stylesheet create a class like:
.centered {
text-align: center;
}
If you have components in your p:panelGrid column other than just text, add the margin attribute to your css class:
.centered {
text-align: center;
margin-left: 50%;
}

Related

CSS to wrap contents in stylized container?

I have a stylesheet that specifies a style for <LABEL>.
But some <LABEL>s are special: Currently I inline style them like this:
<LABEL style="text-align:right; line-height:15pt">
<div style="padding-right:20px">My Label Text</div>
</LABEL>
I suspect there's a way to specify a CSS class, perhaps called rightlabel, to render the preceding using something simple like this:
<LABEL class="rightlabel">My Label Text</LABEL>
What would the correct way be to do that? I.e., is there a way to define rightlabel in CSS to produce the overridden <LABEL> while automatically wrapping its children in a padded child container (because the style doesn't work correctly unless that is done, and it doesn't seem proper to depend on the coder to implement two elements to get the style right)?
Amendment: I can get most of the way there using a child selector – as shown in this fiddle with this CSS:
.rightLabel {text-align: right}
.rightLabel > * {padding-right: 20px}
But I can't find a way to apply the padding to the label contents without explicitly wrapping the contents in some container. I.e., the above CSS works correctly on
<LABEL class="rightLabel">
<div>This is what we wanted!</div>
</LABEL>
but not on
<LABEL class="rightLabel">Why am I not padded?</LABEL>
Is it possible to apply a style to the <LABEL> contents without explicitly coding them inside another HTML element (child)?
Define your styles like so:
<style>
.rightLabel
{
text-align:right;
}
.rightLabel div
{
padding-right:20px;
}
</style>
Update to updated question: you can't add a div using CSS, you'll need JavaScript. You can add pseudo elements using :before and :after.
Here's a fiddle https://jsfiddle.net/c3h9a2b9/1/
.rightLabel:before {
display:block;
content:' ';
width:20px;
float:right;
}
This fakes the padding by using the :before or :after pseudo element on your label. It needs a display of block (inline-block would also do) and some dimensions, the width here being 20px (the "padding" that you need) and floated in the direction you want padding....
If I understood correctly your question the answer is this CSS:
label{
//Your general label style
}
label.rightlabel{
text-align: right;
line-height: 15pt;
}
label.rightlabel div{
padding-right: 20px;
}
With this HTML should act as you wish
<label>a normal label</label>
</label class="right label"><div>the special label</div></label>
This works because more specific CSS overrides less specific one by default :)

How to Override parent element css for child element

I have a site with multiple menus. I have defined enteire page content inside a div with a class container and applied bootstrap css styles (margin-left:auto and margin-right:auto etc.,) to make the page centered. Now elements in one of the file must start from extreme left side of the browser. Because of the css applied for parent i could not start the element from left side. I have applied margin-left with minus pixels to solve the issue. But when the browser window is small element is not completely visible in browser because of minus value applied for margin-left.
<div class="container" style="margin-left:auto;margin-right:auto">
<div id="start_from_left" style="margin-left=-50px"> </div>
</div>
if your tags have
style=""
that takes priority over anything else.
What you could try is the !important on your css tags, but its bad practice.
eg
margin-left:1px!important;
margin-right:0px!important;
You can have additional class for your container.
.container {
margin-left: auto;
margin-right: auto;
}
.container.wide {
margin-left: 0;
margin-right: 0;
}

Align attribute still available in HTML5?

Is it still possible to add the align attribute to a HTML element to align the element itself? So that it's not set via CSS but in the element tag itself, something like this:
<div align="center"></div>
Will this still center it, or will the attribute just be ignored?
As Mike W pointed out in the comments:
The align attribute is deprecated in HTML 4, and removed in HTML 5.
Don't use it: use CSS instead.
That being said, here are some ways to center it anyway, even though you say you have more elements with that class.
Give this specific element inline style:
<div class="main" style="margin: auto;">
Be more specific in your CSS. The element is probably a child of an element that does not have any other .main babies, so you can specify this element by using the parent element in CSS:
.parent-class > .main {margin: auto;} /* If the parent has a class */
#parent-id > .main {margin: auto;} /* If the parent has an ID. This one is prefered, to avoid misunderstandings */
If the above is not the case, and there are multiple instances of .main within a single parent, you can use the nth-child selector (or first-child or last-child). For instance, if the element you want to center is the third child within the parent element, use this code.
.main:nth-child(3) {margin: auto;}
why dont you use
<div class="main" style="margin:0 auto;">

How to using CSS to set content of column to top not center in JSF, primefaces?

I have a panelGrid with some columns but content of one column always at center, how cant I take it to top. I have 2 columns and when content of them not same height, on columns will stay on center, so bad. Tks for help!
You need to set the CSS vertical-align property to top on the generated HTML <td> element. Assuming that you want to apply this on the entire <p:panelGrid> throughout all pages, then this should do:
.ui-panelgrid td {
vertical-align: top;
}
Or, if you want to apply it on a specific <p:panelGrid> only, then do:
<p:panelGrid ... styleClass="aligned-top">
with
.ui-panelgrid.aligned-top td {
vertical-align: top;
}
Or, if you want to apply it on a specific <p:panelGrid> column only, e.g. the second column only, then do:
<p:panelGrid ... columns="3" columnClasses="none,aligned-top,none">
with
td.aligned-top {
vertical-align: top;
}
See also:
How do I override default PrimeFaces CSS with custom styles?

Set percentage width for span element

A straight forward question.. is it possible to set the width in percentage for a span tag in CSS? for example:
<span style="width: 50%">...</span>
etc..
In my project I'm currently using divs but ofcourse after each div tag a line break gets inserted (which I don't want). So the most obvious solution to that is then to use span tags instead of div. But then I'm not able to define the width for the span tags.. Atleast not in a percentage kind of way.
Thanks in advance for any help!
Define the element as an inline block and you can control the width and height like a block element while keeping it inline with surrounding content.
#element {
display: inline-block;
width: 50%;
}
inline elements cannot have dimensions. do them to do so, and still remain inline, add:
display: inline-block
Add display: flex; on parent div style.
<div style="display: flex;">
<span style="width:50%">...</span>
<span style="width:50%">...</span>
</div>

Resources