Page 1 of 1
CSS selector for folded element
Posted: Tue Jun 06, 2017 4:12 am
by avanlooveren
I have a custom document type and would like to have foldable element display one thing when folded (I'm using -oxy-not-foldable-child for this) and something else when expanded. Here's an example:
[When section 1 folded]
Code: Select all
Section 1: Title for Section 1
Section 2: Title for Section 2
[When section 1 expanded]
Code: Select all
Section 1
Title: Title for Section 1
Author: Andre
...
Section 2: Title for Section 2
It seems the default behavior when no -oxy-not-foldable-child and no :before selector content property are specified, the element local name is displayed when the element is folded. I would like to tap into that same behavior.
-Andre
Re: CSS selector for folded element
Posted: Tue Jun 06, 2017 9:15 am
by Radu
Hi Andre,
So:
It seems the default behavior when no -oxy-not-foldable-child and no :before selector content property are specified, the element local name is displayed when the element is folded.
You are correct.
I would like to tap into that same behavior.
We have this implemented in CSS for Docbook XML documents. So we have this CSS selector to specify the non-foldable child:
Code: Select all
section{
-oxy-foldable:true;
-oxy-not-foldable-child: title;
}
and the section number we display as a :before element on the title something like:
Code: Select all
section > title:before
{
content: "Section " counter(sect1_count, decimal) ": ";
}
The entire CSS is here if you need some inspiration:
OXYGEN_INSTALL_DIR\frameworks\docbook\css\elements.css
So the point would be that we display the section static content ("Section X") on the :before of the <title> located inside the section.
Regards,
Radu
Re: CSS selector for folded element
Posted: Tue Jun 06, 2017 8:21 pm
by avanlooveren
Thank you, Radu. I moved my section numbering to the title element, like the Docbook framework, but the result is the same as what I had previously. I think that I did not properly describe what I'm looking for. The key thing is a different display of the non-foldable child element when the parent is folded and when it is not.
When the title is shown in the folded section, only the title's contents are to be shown, preceded by the section numbering (counter) and a colon (:). When the section is expanded (unfolded), the section numbering stays (section:before content), the colon disappears, and the title goes to a separate line (display:block) accompanied by a label ("Title: "). I hope that is clearer.
You confirmed the behavior of "the element local name is displayed when the element is folded". Is that something I can access by pseudo-class? Something like
Code: Select all
section:folded { content: "Section: " counter(sectCtr);}
? Alternatives could be a pair of selectors like
and
or
and
.
Re: CSS selector for folded element
Posted: Wed Jun 07, 2017 9:45 am
by Radu
Hi,
I understand, we have some future plans to add support for a special peudo class allowing you to match folded elements just as you exemplified. I will try to increase the issue's priority.
One workaround for you would be to implement on your own the folding mechanism without using Oxygen's CSS support for creating folds.
Using Oxygen's support for form controls you can add small expand/collapse buttons which when pressed can set a certain pseudo class on the current element. Based on that pseudo-class you can match in the CSS elements and assign various styles to them.
You can find some useful links on this previous forum post:
topic12842.html
Regards,
Radu
Re: CSS selector for folded element
Posted: Wed Jun 07, 2017 8:14 pm
by avanlooveren
Thanks, Radu.
This is what is discussed in
this article, right? I mean, I create a button and an action that toggles the CSS pseudo-class via TogglePseudoClassOperation, right?
Re: CSS selector for folded element
Posted: Thu Jun 08, 2017 8:04 am
by Radu
Hi,
Right, the topic you found is also a good example for this.
Regards,
Radu