Change appearence for read-only content by css

Post here questions and problems related to oXygen frameworks/document types.
Patrik
Posts: 228
Location: Hamburg/Germany

Change appearence for read-only content by css

Fri Apr 15, 2016 7:56 am

Hi,

I have a css rule that adds for specific elements a button next to it that will open a dialog for editing the content:

Code: Select all

MyElement:after(8) {
  content:oxy_editor(...);
}


When the content is not editable the button makes no sense and I'd like to hide it. Is there a simple and universal way to do this? Something like:

Code: Select all

MyElement:is-read-only:after(8) {
  content: ""; /* hide button in read-only content */
}


Thanks and regards,
Patrik
alex_jitianu
Posts: 649

Re: Change appearence for read-only content by css

Fri Apr 15, 2016 1:51 pm

Hi Patrik,

Even though the button appears inside these read-only areas, it is disabled, right? How are these areas marked as read-only? Through CSS rules or just by the fact that they are the expanded content of a reference? In the first case you could set content: "" in the same CSS rule that marks the element as read-only. In the second case you can make use of another pseudo class that we set on expanded references:

Code: Select all

*:-oxy-referenced-content MyElement:is-read-only:after(8) {
  content: ""; /* hide button in referenced content */
}



Best regards,
Alex
Patrik
Posts: 228
Location: Hamburg/Germany

Re: Change appearence for read-only content by css

Fri Apr 15, 2016 2:18 pm

Hi Alex,

the button is disabled but since it consists only of a single "*" without a frame it doesn't look different from an enabled one...

Additional situations are that I've set an ancestor element to read-only, but I can handle these explicitly as well.
The more important use-case is the one with references, and here your solution works. So I'm fine: :)

Thanks!
Patrik

Return to “SDK-API, Frameworks - Document Types”

Who is online

Users browsing this forum: No registered users and 0 guests