Author: CSS pseudo elements displayed as table-cell

[PaulHermans]

I have a XML structure similar to this.

Code: Select all

<select>

  <optgroup label="Language">

    <option>Java</option>

    <option>C++</option>

    <option>Perl</option>

  </optgroup>

....

</select>

I want to display this as a table using following CSS

Code: Select all

select {

    display: table;

}

optgroup {

    display: table-row;

}

option {

    display: table-cell;



optgroup:before {

    display: table-cell;

    content: attr(label);

}

But it seems that the last one is not supported in Oxygen Author.

[Radu]

Hi Paul,

We do not support rendering before or after generated content for table rows. But we probably should if those before/after are specified with table-cell display. So we'll look into it.

As a workaround, if you have limited values for the "label" attribute you could add selectors like:

Code: Select all

optgroup[label=Language] option:first-child:before{

    content:"Language";

    border-style:solid;

    border-width:1px;

}

But I guess this would not look that nice.

Regards,
Radu

[PaulHermans]

Hi Radu,

Thanks for looking into this.
The workaround is, as you expected, not good enough.

I found out that the table-cell solution works in some browsers and xml editors (http://bit.ly/aCDcii).
Good luck with it.


Paul

[art]

Hi Radu,
I currently use Oxygen Author v12. There still seems to be no support for "rendering before or after generated content for table rows". Am I missing something? Is there perhaps a new workaround available?
Cheers, Aaron.

[adrian]

Hello,

The support has not been implemented yet as of v12.1. This is currently scheduled to be fixed in v13 but it could be further delayed.

Regards,
Adrian

[art]

Hi Adrian,
thank you for your reply. I look forward to that fix.
Cheers, Aaron.