Re: CSS/tables and WORepetition design
Re: CSS/tables and WORepetition design
- Subject: Re: CSS/tables and WORepetition design
- From: Johnny Miller <email@hidden>
- Date: Fri, 27 Jan 2012 08:38:37 -1000
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="~@java.lang.Math@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@hidden)
> Help/Unsubscribe/Update your Subscription:
>
> This email sent to email@hidden
_______________________________________________
Do not post admin requests to the list. They will be ignored.
Webobjects-dev mailing list (email@hidden)
Help/Unsubscribe/Update your Subscription:
This email sent to email@hidden