Re: CSS/tables and WORepetition design
Re: CSS/tables and WORepetition design
- Subject: Re: CSS/tables and WORepetition design
- From: Pascal Robert <email@hidden>
- Date: Fri, 27 Jan 2012 11:24:41 -0500
But again, I need to calculate the height :-) I guess I won't have the choice of calculating it.
Related question: in a WORepetion, what you guys do for generate a unique ID for a div? I was thinking of taking the sanitizing the value of the first column + adding the primary key value (so the ID of MEC-1044 would be "mec_1044_1) to make sure that the iD is unique.
> an old, disgusting trick is to use a pixel wide clear image and set its height or width to force it to minimum at least.
>
> but that's disgusting, so I didn't suggest it, I just mentioned it! HA!
>
>
>
> On Jan 27, 2012, at 10:26 AM, Pascal Robert wrote:
>
>> I still need to calculate that value. My fear is that doing this will be expansive since I will have to pre-calculate it. For example, for the A column, I will have to check how many items are in the stock and the transactions columns to be able to either set the rowspace attribute (for a <td>) or the height (by CSS). And I will have to calculate it every time an action is taken (when a new transaction is created).
>>
>>> Couldn't you just use the "rowspan" attribute?
>>>
>>> James
>>>
>>>
>>>
>>> On Jan 27, 2012, at 9: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
>>
>>
>> _______________________________________________
>> 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