Top aligning HtmlDataTable components in a HtmlPanelGrid

I need a recommended solution for this scenario.
I have three h:dataTable components in a h:panelGrid as follows:
<h:panelGrid columns="3">
                <h:dataTable value="#{fooBean1.myList}" var="list">
                           <h:outputText value="list.bar"/>
                </h:dataTable>
                <h:dataTable value="#{fooBean2.myList}" var="list">
                          <h:outputText value="list.bar"/>
               </h:dataTable>
               <h:dataTable value="#{fooBean3.myList}" var="list">
                          <h:outputText value="list.bar"/>
               </h:dataTable>
</h:panelGrid>There can obviously be different number of rows in each h:dataTable which means the height of each h:dataTable may be different than the others.
How can I ensure that the three h:dataTable components are always vertically aligned to top?
Note that the header for the graphic in the template.xhtml for each xhtml has valign style settings so a global setting like this will not work (i.e.
it will top align the dataTables but the header graphic is now mis-aligned.):
<head>
    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />
    <title>Repair Card</title>
    <style>
     html,body,table { height:100%; margin:auto;}
     table,td,tr,thead,tfoot,tbody,th,tf { vertical-align:top; padding-bottom: 10px; }
    .rich-panel {height: 100%;}
    .panel1 { width: 30%; text-align: center; font-size: 12px;}
    .panel2 { width: 30%; text-align: center; font-size: 12px;}
     .panel3 { width: 30%; text-align: center; font-size: 12px;}
</style>
</head>Is it possible to specify the styles using the style or styleClass attribute for the h:panelGrid?

This worked! thx.
<head>
                   <style>
                   div.divTop TD {vertical-align:top;}
                    </style>
               </head>
               <div class="divTop">
                          <h:panelGrid columns="3" border="1" width="100%">
                              <h:dataTable value="#{foo1}" var="name">
                                   <h:column>
                                        <h:outputText value="#{name}"/>
                                   </h:column>
                              </h:dataTable>
                              <h:dataTable value="#{foo2}" var="name">
                                   <h:column>
                                        <h:outputText value="#{name}"/>
                                   </h:column>
                              </h:dataTable>
                              <h:dataTable value="#{foo3}" var="name">
                                   <h:column>
                                        <h:outputText value="#{name}"/>
                                   </h:column>
                              </h:dataTable>
                         </h:panelGrid>
               </div>Edited by: asookazian on Mar 6, 2009 2:28 PM

Similar Messages

Aligning swing components

hello everybody,
i read about FlowLayout,BorderLayout,GridLayout,BoxLayout,CardLayout and GridBagLayout,but i still have a problem in aligning the components.
I want to desgin a Wizard Frame like in this Following Website:
http://java.sun.com/products/jlf/at/book/Wizards2.html#51473
the problems are:
How to draw the line under the Subtitle?
How to align the component in that way?
if there is some real examples,please guide me.
thank you in advanced...

What you have here is a combination of layouts ...
First, there is a BoxLayout aligned along the Y-Axis seperating the top content with the buttons at the bottom.
Second, There is FlowLayout seperating the two panels at the top, also with a bevel border.
Third, for the different spacings, use Box.HorizontalGlue and Box.VerticalGlue items. There are others space fillers in the Box Class, check them out.
Hope that helps
Cheers

JScrollpanel Top align problem

Hi,ALL
I have a JPanel holds two Objects(JTree and JList);
So
The main JPanel is created with FlowLayout.LEFT
I create two JScrollPanel to hold JTree and JList,
since JTree is long and JList is short.
so everytime JList is in the middle of the JScrollPanel.
I want to align them from top, how to add a Viewport to JScrollPanel from TOP-align, not automatically CENTER-align?
Thanks in avanced

At the risk of sounding like the Office Paperclip... it looks like you're writing an explorer.
If so, use a JSplitPane. Set the left component to a JScrollPane containing a JTree and the right component to a JScrollPane containing a JList.

Top aligning html slices

I want to top align an html slice (for google adwords) and a
rectangle. I cannot get them to align at the top no matter how hard
I try. The rsite was created in firewoks and imported to dw. It is
driving me mad as the site is finished bar this one thing and has
been for ages. If anyone has any suggestions they'll be greatly
appreciated as it keeps vertically centering the rectangle as the
html slice is bigger.:confused.
The url is www.sandramccracken.co.uk - also, I have
triedhighlighted both in fw, clicking on modify, align and top but
it doesn't seem to do anything
Please help...it's the new year, season of good will!

Change this -
<style type="text/css">td img {display:
block;}</style>
to this -
<style type="text/css">
td img {display: block;}
body { margin-top:0; }
</style>
and see what happens.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"yorkiebrowne" <[email protected]> wrote in
message
news:en2qr7$3mi$[email protected]..
>I want to top align an html slice (for google adwords)
and a rectangle. I
> cannot get them to align at the top no matter how hard I
try. The rsite
> was
> created in firewoks and imported to dw. It is driving me
mad as the site
> is
> finished bar this one thing and has been for ages. If
anyone has any
> suggestions they'll be greatly appreciated as it keeps
vertically
> centering the
> rectangle as the html slice is bigger.:confused.
>
> The url is www.sandramccracken.co.uk - also, I have
triedhighlighted both
> in
> fw, clicking on modify, align and top but it doesn't
seem to do anything
>
> Please help...it's the new year, season of good will!
>

Top align hierarchy dropdown

Dear Gurus,
I have a table inserted with 2 web items, 1 a hierarchy dropdown, the other on the right, a normal dropdown box.
Somehow, although both are valign to top, they do not appear on same level horizontally. In fact the hierarchy one is positioned much to the bottom of the cell. The other dropdown is alright. All characteristic dropdowns are aligned but not the hierarchy one. I checked td tag and seems like no option to top align by pixel.
Any suggestions would be appreciated.
Regards,
Suzie

Dear BW Experts,
Could someone give me some hints please. I am drowning in WAD/html
Regards,
Suzie

How to align the components in panelGrid right?

I have a panelGrid with two column, the left column is a image and the right colum is commandLink.
<h:panelGrid border="0" columns="2" width="100%" columnClasses="headerColumn1, headerColumn2">
.headerColumn1 {
vertical-align: top;
width: 50;
.headerColumn2 {
vertical-align: top;
width: 100%;
text-align: right;
But the output is both column width are equal and the text in right column is align left. Can anyone points out what is the problem here?

Check if the generated HTML and CSS outputs are correct.

Adobe X Standard - Top Aligned Text Box

I am trying to create a form that allows the body of a letter to be placed within an Adobe Form. The body of the letter can cover upto about 70% of that page. Obviously I am trying to do this via a text box but how do I get the text to start at the top of the page. It seems to want to start half way down the page.
How do I set the alignment to the start at the top and work down???
Thanks

Set the "multi-line" option of the text box.

Putting Components on top of other components

Hi,
I need some help with the following subject:
from the super-class i need to place a component on top of all other components (or paint something on top of these), but when i add the component it shows below all other components.
How can I make this work?

sorry, but this was a little to essential.
1. how does the paint method of the VXComponent look like?
2. where and how do you add the other components, which are drawn on top of your component?
3. actually you seem to use no LayoutManager?
- I never did that but I'd guess it causes the container to draw the components just in the (reverse?) order in which they where added.
if this is the case something like this should help:
add(vx, 0),
or
add(vx, getComponentCount()-1);
regards
Spieler

Div top align issues

I have a photo that I need to align with the top of a text
box. Something is pushing it down although after staring at it for
an hour and trying valign, clear: both, etc. I'm stumped.
I uploaded it to a friend's site:
http://hipnoticinc.com/alpha/alpha.reptile.chameleon.bearded-dragon.breeders.html
Appreciate the help. This is the first adventure into pure
CSS.

Your link is wrong -
http://hipnoticinc.com/alpha/alpha.reptile.chameleon.bearded-dragon.breeders.html
would be the correct one, I think.
You might want to fix these first -
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fhipnoticinc.com%2Falpha%2Falpha.r eptile.chameleon.bearded-dragon.breeders.html
>I have a photo that I need to align with the top of a
text box. Something
>is
> pushing it down although after staring at it for an hour
and trying
> valign,
> clear: both, etc. I'm stumped.
Frankly, the page is such a jumble of things, I think it
would be easier to
rethink your whole approach - maybe this will help:
http://apptools.com/examples/pagelayout101.php
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"phrarod" <[email protected]> wrote in
message
news:gb652k$hbh$[email protected]..
>I have a photo that I need to align with the top of a
text box. Something
>is
> pushing it down although after staring at it for an hour
and trying
> valign,
> clear: both, etc. I'm stumped.
>
> Also in the colored text box I call out for a light blue
which shows in
> preview with DW but not on the browsers. I re-stacked
the code properties
> but
> nothing helps.
>
> I uploaded it to a friend's site:
>
>
>
http://hipnoticinc.com/alpha/alpha.reptile.chameleon.bearded-dragon.breeders.htm
> l
>
> Appreciate the help. This is the first adventure into
pure CSS.
>

How to align the components in a jsf page?

Hi all,
In my use case I need to use three UI components like push down menu
a textbox and a button. when I dragged all the things on to my jsf page
I am getting one by one.( I mean to say that I am getting button beneath pushdown
and pushdown beneath the text box)
I want all these components adjacent to each other.Kindly come up with the suggestions.
Thanks,
Phani.

These three components surround with af:panelGroupLayout and set af:panelGroupLayout layout property to horizontal (you can find layout property in common section of Property Inspector).

DW 8 - Inline Frame TOP alignment

Greetings,
I have a table with couple columns. Left column has Iframe of
text links. Basically my navigation links for my site. Next colums
are just editible regions.
Problem is that my left cell with iFrame top text is lower
than my next columns text. Can not figure out why? I am not an
expert. Putting in code as someone will likely ask for it. Not up
on a site yet.

Greetings,
I have a table with couple columns. Left column has Iframe of
text links. Basically my navigation links for my site. Next colums
are just editible regions.
Problem is that my left cell with iFrame top text is lower
than my next columns text. Can not figure out why? I am not an
expert. Putting in code as someone will likely ask for it. Not up
on a site yet.

Script for search TextFrame whitout full text, and top align...

This script "JUSTIFY_ALING" all text frames without footnotes:
var TRUFI = app.activeDocument.textFrames.everyItem().getElements(),
     CHARLY;
while( CHARLY=TRUFI.pop() )
     if ( CHARLY.footnotes.length == 0)
          CHARLY.textFramePreferences.verticalJustification = VerticalJustification.JUSTIFY_ALIGN;
But I need that TextFrames whitout full text (for example: the text only go to the middle of the textframe) stay in TOP_ALIGN...
Thanks for read me...

You can't tell right away if a textframe is filled all the way to the bottom. Even with linked text threads, there is usually a small space at the bottom, just not enough for an entire next line -- less than the leading of that next line. There may even be more space at the bottom, if the next frame starts with a heading, which is kept with a number of lines following it; or a large inline table or figure; or a hard page break. Or (come to think of it) a footnote -- I'm not sure what would happen then ...
But you can get the vertical position of the last regular text line. With a text frame selected:
alert (app.selection[0].lines.item(-1).baseline);
will show you the absolute vertical position of that last line. If you need the distance from the top of its containing text frame, use
alert (app.selection[0].lines.item(-1).baseline - app.selection[0].geometricBounds[0]);
-- you might remember that the array 'geometricBounds' contains the positions of top, left, bottom, and right corners, in that order. So geometricBounds[0] is the top y position; subtract this from your baseline, and you know how low you go.
In this case, you would want the distance from the last line to the bottom:
alert (app.selection[0].geometricBounds[2] - app.selection[0].lines.item(-1).baseline) ;
w
will show you how much space there is left. A warning is in place: blank lines are also lines! (Theoretically, if this happens a lot, you could adjust for these. Left as an exercise.)
All you have to do is ask yourself, what amount of white space at the bottom is allowed? Then check your frames for this, and only apply vertical justification if it's inside your parameters.
(Apologies for those weirdly cramped final paragraphs. Sorry -- tried to restore it to normal readability, failed miserably. Jive Strikes Again!)

Alignment of components - Can anyone reply please?

Hi,
I would like to align the labels of af:inputText to the left and the input text boxes of af:inputText to middle as they are aligned when we put them on af:panelForm.
Please look at the following format that is how I wanted to display all my inputText.
Label1 (Short label)---------------------inputText box must be here
Label2 Label2 Label2 (Long label) inputText box must be here
Please note ‘----‘ represents empty spaces between the label and the box
Message was edited by:
V.Piraba

Hi Ayhan Gungor ,
Thank you for your reply. I will not be able use your suggestion as I need the label and input box as one component (af:inputText). I found the answer for my question. Use the following style in your page to align all the labels to the left.
<style type="text/css">
.AFLabelCell,.xe,.af_panelForm_label-cell,.xx {text-align:left}
</style>
V.Piraba

CSS: Top alignment of floated image and following text

I have a little site I'm revising where images (inside a div) are floated and the following text flows around them. Standard procedure. Here's what I can't figure out... The top of the image is roughly three pixels higher than the top of the first capital letter in the text next to that image. I understand that with font characters there is space below to accommodate descenders, but I thought the top of a capital letter was the limit of a character's height. I've tested this on Windows XP using Firefox 3.6, IE8 and Chrome 6. Here's a link to an example page:
http://www.keithpurtell.com/kthings/gway.htm

I wouldn't change the line-height on p.
Add some padding to your floats.
.floatL {
    float:left;
    margin: 0;
    padding: 10px 12px;
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Alignment of the components inside tab in JTabbedPane

I want to align the components inside the tab in tabbedpane.
I have three tabs in the tabbed pane For each tab I added the components on the panel and added the panel as a tab.
But as the number of components on each tab are not same the components inside the tab doesn't get aligned properly.
The components gets aligned in the center and I want to align them at top. How can I do that?
Please help..

How does
the number of components on each tab are not samerelates to
the components inside the tab doesn't get aligned properly. The components gets aligned in the center and I want to align them at top??

Top aligning HtmlDataTable components in a HtmlPanelGrid

Similar Messages

Maybe you are looking for