CSS Pseudo-Element "inner(n)"

Are you missing a feature? Request it's implementation here.
Patrik
Posts: 216
Location: Hamburg/Germany

CSS Pseudo-Element "inner(n)"

Thu Jun 18, 2015 10:09 am

Hi,

on the users meetup George said you will (probably) add the pseudo-element "outer" in the next release. Now I'd like to get apseudo-element "inner" as well.

Use-case 1
Consider this xml

Code: Select all

<List>
   <Entry>
      <Name>1st Parameter</Name>
      <Value>1111</Value>
   </Entry>
   <Entry>
      <Name>2nd Parameter</Name>
      <Value>2222</Value>
   </Entry>
</List>


To display this as a table with css is no problem. But to show a table header, currently I have to add more elements to the xml before the first entry. For instance

Code: Select all

<Header>
   <Name/>
   <Value/>
</Header>


With a combination of before and inner I should be able to do this purely from css with something like this:

Code: Select all

List > Entry:first-child:before {
   display: table-row;
}
List > Entry:first-child:before:inner {
   display: table-cell;
   content: "Name";
}
List > Entry:first-child:before:inner:after {
   display: table-cell;
   content: "Value";
}


Use-case 2
display this compact xml as table:

Code: Select all

<List>
   <Entry Name="1st Parameter">1111</Entry>
   <Entry Name="2st Parameter">2222</Entry>
</List>


with this css:

Code: Select all

List {
   display: table;
}
List > Entry {
   display: table-row;
}
List > Entry:inner {
   display: table-cell;
}
List > Entry:inner:before {
   display: table-cell;
   content: attr(Name);
}


Regards,
Patrik
Radu
Posts: 5088

Re: CSS Pseudo-Element "inner(n)"

Thu Jun 18, 2015 11:00 am

Hi Patrik,

Even if at some future version we add support for inner(n) it will probably not work in such complicated cases, to create entire table rows and cells. So it is quite improbable that this will ever work.
Maybe you could add a :before block on the entire table and add some static content there which explains what each column does. Or add :before selectors on the Name and Value cells with "Name:" and "Value:" labels.

Instead of displaying the list as a table you could display it as a block.
Each entry would also be a block, the Name and Value elements would be inline and they would also have a border around them + a fixed width so that it all ends up looking like a table.

Regards,
Radu
Radu Coravu
<oXygen/> XML Editor
http://www.oxygenxml.com
Patrik
Posts: 216
Location: Hamburg/Germany

Re: CSS Pseudo-Element "inner(n)"

Thu Jun 18, 2015 11:24 am

Hi Radu,

I already have proper workaround for both cases:
For the first one I just added the header-elements to xsd as mandatory elements so they are added automatically as guess elements.

For the second one I use :before with oxy_label() as content using fixed width.

Just was thinking on a way to make it even clother to the actual output (in PDF it is converted to a real table).

Regards,
Patrik
jeryymanly
Posts: 1

Re: CSS Pseudo-Element "inner(n)"

Thu Oct 08, 2015 10:33 am

More about....CSS Table Formatting

Manly
avanlooveren
Posts: 25

Re: CSS Pseudo-Element "inner(n)"

Fri Jun 16, 2017 2:04 am

Has there been any development or workaround that addresses the desire for "pseudo-elements" to serve as headers of a table? Like the OP, I have repeated elements in my XML that would be served nicely in Author mode with a tabular layout, but I don't have XML elements that can provide the "anchor" for the header elements in that table.
Patrik
Posts: 216
Location: Hamburg/Germany

Re: CSS Pseudo-Element "inner(n)"

Fri Jun 16, 2017 8:00 am

You can do this nicely with existing css (I think supported since oXygen ~v17.1):

Code: Select all

my-table > my-row:first-child > *:before {
  // set styling for all header cells
  display: block;
  background-color: gray; // imitate table header
  font-weight: bold;
  border-bottom: solid 1px black; // imitate seperate row
  margin-top: -1px; // undo padding of table cell
  margin-left: -1px; // undo padding of table cell
  margin-right: -1px; // undo padding of table cell
}

// set the content for each column header
my-table > my-row:first-child > my-column1:before {
  content: "column header 1";
}
my-table > my-row:first-child > my-column2:before {
  content: "column header 2";
}


You will probably have to tweak some settings (e.g. the neative margin) to fit your table styling.

Patrik
Radu
Posts: 5088

Re: CSS Pseudo-Element "inner(n)"

Fri Jun 16, 2017 8:42 am

Hi,

We have not done any additional work to support with a custom CSS extension the creation of an additional header row for an existing table.
Patrik's approach is interesting, for the last 2 selectors you will probably need to use "nth-child(X)" to specify for each table cell the static label that needs to be placed above it.

Regards,
Radu
Radu Coravu
<oXygen/> XML Editor
http://www.oxygenxml.com
avanlooveren
Posts: 25

Re: CSS Pseudo-Element "inner(n)"

Fri Jun 16, 2017 11:34 pm

Patrik, this is great! Thank you so much.

FYI, I did not find that nth-child() was necessary.
Patrik
Posts: 216
Location: Hamburg/Germany

Re: CSS Pseudo-Element "inner(n)"

Sat Jun 17, 2017 12:45 am

You would have needed the :nth-child() only when your entry element were identical (e.g. entry, entry, ... instead of entry1, entry2, ...).

Patrik

Return to “Feature Request”

Who is online

Users browsing this forum: No registered users and 4 guests