Re: css on custom table row component
Re: css on custom table row component
- Subject: Re: css on custom table row component
- From: Tim Worman <email@hidden>
- Date: Wed, 20 Feb 2013 12:02:19 -0800
Here's an interesting extra twist. It works fine if I use a WOGenericContainer in place of the AUC. Both are defined by elementName binding as "tr". It also works as it should if I just manually make use <tr>….</tr>. The only condition where it doesn't work is if the container is an AUC. Here's what the page source shows:
working
<tr _componentName = "edu.ucla.gseis.components.ApprovalRow" class="resultsTable" id="rowUpdateContainer__2">
not working
<tr _componentname="edu.ucla.gseis.components.ApprovalRow" id="rowUpdateContainer__2" class="resultsTable" data-updateurl="/cgi-bin/WebObjects/eTimesheet.woa/ajax/ELDoTnfSLMAOBdKwfblMxM/9.0.5.23.3.3.0.5.0.0.1.1.3">
I'll run it through a validator but the one non-working condition is curious. Maybe the AUC is not reporting "rowIndex" to the browser properly when elementName is bound as "tr".
T
On Feb 20, 2013, at 7:21 AM, Ramsey Gurley <email@hidden> wrote:
> What David said. You might also try running your source through the w3 validator.
>
> I will also add that I tried going with :nth-child for zebra stripes myself once. Then I realized it didn't work so well when using multiple tbodys, header cells with rowspan, etc. I went back to using .even .odd classes on the tr. It's the only way to be sure.
>
> Ramsey
>
> On Feb 20, 2013, at 7:28 AM, David LeBer wrote:
>
>> Tim,
>>
>> Css selectors work on the completed dom as understood by browser, it knows nothing about how the page is being created server-side and doesn't care.
>>
>> It sounds like your table is malformed, try carefully inspecting the rendered dom in Safari or Firefox (i.e: "Inspect Element"). If I had to, I'd guess that there is a tag missing somewhere that the browser is filling in making each tr nested in it's own table.
>>
>> D
>>
>> --
>> David LeBer
>> Codeferous Software
>>
>> On 2013-02-20, at 12:55 AM, Tim Worman <email@hidden> wrote:
>>
>>> I have a single component that acts as a table row. The outer-most object in the component is a AUC where the elementName is "tr". I also have css that is supposed to style each of these rows sth like:
>>>
>>> .resultsTable tbody tr:nth-child(odd) td{background-color:#EEEEEE;}
>>>
>>> The entire enclosing page is rendered fine including the table and all rows are rendered correctly as tr's. The problem is the rows aren't styled correctly per the css. It appears every single row considers itself "odd." So every row has the background color as defined in the css.
>>>
>>> I have other components where the entire table is similarly built completely dynamically but the TR's are not a separate component. In those cases the css is properly applied to each TR.
>>>
>>> I know I could return separate css classes in code for even and odd indexes in my TR component, but I want to use the existing css so that any future css changes are inherited by all appropriate components.
>>>
>>> Tim
>>> UCLA GSE&IS
>>> _______________________________________________
>>> 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