Hi Pascal, Take a look at this real quick. I only tested it in Safari but I think it's right. You just need to tweak the CSS to get your borders and colors right.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> <html> <head> <style type="text/css"> .table { background-color: gray; border-collapse: collapse; display: table; width: 950px; } .row { display: table-row; } .col { border: 1px solid white; display: table-cell; padding: 3px; vertical-align: middle; } .col .col { border: none; } .a, .c, .d { width: 20%; } .b { width: 40% } .b ul { list-style-type: none; margin: 0; padding: 0; } .b li { display: block; float: left; } input[type="text"] { width: 40px; } </style> </head> <body> <div class="table"> <div class="row"> <div class="col a">MEC-091<br/>Some Thing</div> <div class="col b"> <div class="col"> <div class="col">A</div> <div class="col">5</div> <div class="col"><input type="text" /></div> <div class="col"> <ul> <li><input type="text" /><label>Some Transaction ID</label></li> <li><input type="text" /><label>Some Transaction ID</label></li> <li><input type="text" /><label>Some Transaction ID</label></li> <li><input type="text" /><label>Some Transaction ID</label></li> </ul> </div> </div> </div> <div class="col c">2</div> <div class="col d">2</div> </div> <div class="row"> <div class="col a">MEC-091<br/>Some Thing</div> <div class="col b"> <div class="col"> <div class="col">B</div> <div class="col">5</div> <div class="col"><input type="text" /></div> <div class="col"> <ul> <li><input type="text" /><label>Some Transaction ID</label></li> </ul> </div> </div> </div> <div class="col c">2</div> <div class="col d">2</div> </div> </div> </body> </html> On Jan 27, 2012, at 5:02 AM, Pascal Robert wrote: > I'm trying to find a way to get a design to work, and I guess I'm reaching my > Web design skills to its limits. Anyway, I have to work on a form in a table > form. The problem is that how I can expand the height of a <td> or a <div> > when I'm inside a WORepetition. See this example: > > <Capture d’écran 2012-01-27 à 09.46.34.png> > > My original design was using a <table>, and inside some <td>, I'm using a > <div> for each sub-row (the "A" and "B"). Problem is, alignment is not ok. > For example, for MEC-1044, A might have four transactions, but B will show up > on the same "line" as the second transaction of A. I have tried to move to > full CSS (e.g., replacing the table with divs) and I get the same problem. > > I guess when building the list of transactions for A, I could count of number > of nodes and adjust by JavaScript the height of the column for A. For > example, if the default height for A is 25px and it have four transactions, I > could change the height of the A column to 100px. But that means that I have > to check all columns to find what will be the maximum height. For example, if > A don't have any transactions yet but another column is higher, I will have > to use the height for that column. > > Is this something doable, especially in a WORepetition? I never saw a design > like that on the Web, so maybe it's just not possible. > > This is what the table look like on the HTML side: > > <table width="90%"> > </tr> > <wo:loop list="$childsSpec" item="$childSpec"> > <tr valign="top"> > <td class="spec_name" width="150"> > <strong><wo:str value="$childSpec.ID" /></strong> > </td> > <td class="spec_revision"> > <wo:loop list="$revisions" item="$revisionItem"> > <div style="height: 25px; width:100%;"> <wo:str > value="$revisionItem.ID" /> </div> > </wo:loop> > </td> > <td class="spec_stock"> > <wo:loop list="$revisions" item="$revisionItem"> > <wo:loop list="$~availablesPartsForSpec(revisionItem)" > item="$partItem"> > <div style="height: 25px; width:100%;"> <wo:str > value="$partItem.availableQuantity" /> </div> > </wo:loop> > </wo:loop> > </td> > <td class="spec_parts"> > <wo:loop list="$revisions" item="$revisionItem"> > <wo:loop list="$~availablesPartsForSpec(revisionItem)" > item="$partItem"> > <div style="height: 25px; width:100%;"> > <wo:AjaxObserveField updateContainerID="main_table" > action="$~addPartsFromLot(partItem)"> <wo:textfield value="$quantityToAdd" > size="4" numberformat="#" style="padding: 0px; margin: 0px;" /> > </wo:AjaxObserveField> > </div> > </wo:loop> > </wo:loop> > </td> > <td class="spec_manifest"> > <wo:loop list="$revisions" item="$revisionItem"> > <wo:loop list="$~transactionsForSpec(revisionItem)" > item="$specTransactionItem"> > <div style="height: 25px; width:100%;"> > <wo:AjaxObserveField updateContainerID="main_table" > action="$~removeQuantityFromTransaction(specTransactionItem)"> > <span style="margin-right: 10px; > width=40px;"><wo:textfield value="$specTransactionItem.quantityToRemove" > numberformat="#" size="4" /></span> > <span style="margin-right: 10px;"><wo:str > value="[email protected]@abs(specTransactionItem.quantity)" /></span> > <wo:str value="$specTransactionItem.dateEnd" > dateformat="%Y/%m/%d %H:%M:%S" /> > </wo:AjaxObserveField> > </div> > </wo:loop> > </wo:loop> > </td> > </wo:if> > <td class="spec_quantity"><wo:str > value="$~missingQuantity(childSpec)" /></td> > <td class="spec_required_qty"><wo:str > value="$~spec.requiredQuantityForChild(childSpec)" /></td> > </tr> > </wo:loop> > </table> > > _______________________________________________ > Do not post admin requests to the list. They will be ignored. > Webobjects-dev mailing list ([email protected]) > Help/Unsubscribe/Update your Subscription: > https://lists.apple.com/mailman/options/webobjects-dev/jlmiller%40kahalawai.com > > This email sent to [email protected] _______________________________________________ Do not post admin requests to the list. They will be ignored. Webobjects-dev mailing list ([email protected]) Help/Unsubscribe/Update your Subscription: https://lists.apple.com/mailman/options/webobjects-dev/archive%40mail-archive.com This email sent to [email protected]
