Hello all, I'm trying to improve the support for multiple input fields on a single row inside a panelFormLayout and I'm running on some HTML issue that I would like to share with you in case you have a solution.
The goal is to have a structure in the page looking like: <tr:panelFormLayout> <tr:inputText .../> <tr:inputText .../> <tr:panelInputHorizontal> <!-- Could also be <tr:panelHorizontalLayout/> directly, but let use a dedicated component for now --> <tr:inputText .../> <tr:inputText .../> </tr:panelInputHorizontal> <tr:panelInputHorizontal> <!-- Could also be <tr:panelHorizontalLayout/> directly, but let use a dedicated component for now --> <tr:inputText .../> <tr:inputText .../> <tr:inputText .../> </tr:panelInputHorizontal> </tr:panelFormLayout> The code above should ensure the following: 1. The first field column should be aligned (already the case); 2. The help facet and message should be aligned with their field (also already the case when you have a single field, but more complicated when you got two or more); 3. labelWidth should NOT be used for the second/third fields' label cell (currently not supported, which is very bad looking for a starting date, ending date field combo) 4. If the label is wrapped on more than one line it should be possible to align the field with the last line of the label (not supported currently, the last line get aligned with either the help facet or the message if they exist) Ok, so here's what I figured so far. For issue 1, the generated HTML structure has to be a table with the first column being used solely for labels. No big deal so far. So the first draft of the HTML structure must look like: _________________________________________ | | | | Label 1 | Field 1 | |________ |______________________________| | | | | Label 2 | Field 2 | |________ |______________________________| | | | | Label 3 | Field 3 | |________ |______________________________| For issue 2, it implies that a field must be in the same cell than its help and message DIV. (If you have another way to achieve this please tell me, because it's one of the bad issue). _______________________________________________________________________ | | | | Label 1 | Field | | | Help | | | Message | |_________|____________________________________________________________| | | | | | | Label 2 | Field 2 | Label 2b | Field 2b | | | Help | | Help | | | Message | | Message | |_________|__________|__________|______________________________________| | | | | | | | | Label 3 | Longer field 3 | Label 3b | Field 3b | Label 3c | Field 3c | | | Help | | Help | | Help | | | Message | | Message | | Message | |_________|________________|__________|__________|__________|__________| The above is still doable by placing a table in the field cell to iterate over the various field for the row. For issue 3, I simply need to not assign the style to the cell, it's quite easy, so the structure remains the same. For issue 4, the only way I see is to generate the help and message on a different row, this is where it get fishy because when I combine it with issue 2, the resulting structure must looks like this: _______________________________________________________________________ | | | | Label 1 | Field | |_________|____________________________________________________________| | | Help | | | Message | |_________|____________________________________________________________| | | | | | | Label 2 | Field 2 | Label 2b | Field 2b | |_________|__________|__________|______________________________________| | | Help | | Help | | | Message | | Message | |_________|__________|__________|______________________________________| | | | | | | | | Label 3 | Longer field 3 | Label 3b | Field 3b | Label 3c | Field 3c | |_________|________________|__________|__________|__________|__________| | | Help | | Help | | Help | | | Message | | Message | | Message | |_________|________________|__________|__________|__________|__________| Presented like this it looks just like a normal table but issue 2 required a nested table so the real structure should look like this: ________________________________________________________________________ | | | | Label 1 | Field 1 | |_________|_____________________________________________________________| | | Help | | | Message | |_________|_____________________________________________________________| | |____________________________________________________________ | | Label 2 || Field 2 | Label 2b | Field 2b || |_________||_________|__________|______________________________________|| | || Help | | Help || | || Message | | Message || | ||_________|__________|______________________________________|| |_________|_____________________________________________________________| | |____________________________________________________________ | | Label 3 || Longer field 3 | Label 3b | Field 3b | Label 3c | Field 3c|| |_________||________________|__________|__________|__________|_________|| | || Help | | Help | | Help || | || Message | | Message | | Message || | ||________________|__________|__________|__________|_________|| |_________|_____________________________________________________________| Sadly, I don't see any HTML structure that can provide me those properties. I either have problem with aligning the vertical alignment of the label or the horizontal alignment of the help and message. Does anyone know some HTML or CSS magic to make it works? Regards, ~ Simon
