Applying CSS customization to attribute text boxes in Oxygen editor
Post here questions and problems related to editing and publishing DITA content.
-
- Posts: 918
- Joined: Thu May 02, 2019 2:32 pm
Applying CSS customization to attribute text boxes in Oxygen editor
Post by chrispitude »
Hello to my Oxygen friends! It's been awhile.
We have a specialization of the DITA <data> metadata element. I would like to customize its appearance in Oxygen's editor as follows:
But then when I start editing the attribute values, funny things start happening to the text boxes and labels (duplicate boxes appear, labels disappear).
What is the correct way to customize attribute text entry fields in CSS? I tried to copy what i saw in Oxygen's own CSS files, but clearly I am missing some aspect.
Testcase here:
To run,
We have a specialization of the DITA <data> metadata element. I would like to customize its appearance in Oxygen's editor as follows:
- Show a label before the element
- Show a label before each attribute text entry box
- Always show the @name and @value attributes (because it can have other attributes too)
- image.png (10.64 KiB) Viewed 425 times
But then when I start editing the attribute values, funny things start happening to the text boxes and labels (duplicate boxes appear, labels disappear).
What is the correct way to customize attribute text entry fields in CSS? I tried to copy what i saw in Oxygen's own CSS files, but clearly I am missing some aspect.
Testcase here:
- oxygen_css_attribute_styling.zip
- (17.83 KiB) Downloaded 29 times
To run,
- Open the Oxygen project file.
- Open the DITA topic file.
- In the Styles drop-down, apply the incremental CSS.
- Insert a <data> element.
- Add some attribute values.
Re: Applying CSS customization to attribute text boxes in Oxygen editor
Welcome back Chris
I cannot quite reproduce the problem:
Regards,
Radu
I cannot quite reproduce the problem:
- Oct-31-2024 14-18-08.gif (100.55 KiB) Viewed 387 times
Radu
Radu Coravu
<oXygen/> XML Editor
http://www.oxygenxml.com
<oXygen/> XML Editor
http://www.oxygenxml.com
-
- Posts: 918
- Joined: Thu May 02, 2019 2:32 pm
Re: Applying CSS customization to attribute text boxes in Oxygen editor
Post by chrispitude »
Hi Radu,
Interesting! With a fresh install of Oxygen XML Editor 2024091606 on my Windows 11 system, here is what I see:
When I first insert the <data> element, the labels are missing. If I enter and delete values, somehow new text fields with labels appear, but then when I enter values a second time, the old no-label text fields also appear.
Interesting! With a fresh install of Oxygen XML Editor 2024091606 on my Windows 11 system, here is what I see:
- oxygen_css_attribute_styling.gif (656.7 KiB) Viewed 344 times
When I first insert the <data> element, the labels are missing. If I enter and delete values, somehow new text fields with labels appear, but then when I enter values a second time, the old no-label text fields also appear.
Re: Applying CSS customization to attribute text boxes in Oxygen editor
Hi Chris,
I still cannot reproduce the problem but on my side this selector does not take effect:
The original selectors from "Oxygen XML Editor/frameworks/dita/css/core/-topic-specialization.css" are something like this:
A CSS selector which matches attributes (in this case both the class and value attribute) has a higher specificity than the one you are writing which matches only the class value.
So maybe I would re-write the CSS like this:
Regards,
Radu
I still cannot reproduce the problem but on my side this selector does not take effect:
Code: Select all
.topic\/data:before {
content: oxy_label(text, " Category: ", width, 5ex) oxy_textfield(columns, 12, edit, "@name");
content: oxy_label(text, " Keyword: ", width, 5ex) oxy_textfield(columns, 12, edit, "@value");
}
Code: Select all
*[class~="topic/data"][name]:before(2) {
content: oxy_textfield(edit, '@name', columns, 10);
}
*[class~="topic/data"][value]:before(1) {
content: " "oxy_textfield(edit, '@value', columns, 10);
}
So maybe I would re-write the CSS like this:
Code: Select all
.topic\/data {
display: block;
background-color: #FFE;
}
/* element label */
.topic\/data:before(3) { content: "My metadata: "; }
*[class~="topic/data"][name]:before(2) {
content: "";
}
/* attribute labels */
*[class~="topic/data"][name][value]:before(1) {
content: oxy_label(text, " Category: ", width, 5ex) oxy_textfield(columns, 12, edit, "@name")
oxy_label(text, " Keyword: ", width, 5ex) oxy_textfield(columns, 12, edit, "@value");
}
Radu
Radu Coravu
<oXygen/> XML Editor
http://www.oxygenxml.com
<oXygen/> XML Editor
http://www.oxygenxml.com
-
- Posts: 918
- Joined: Thu May 02, 2019 2:32 pm
Re: Applying CSS customization to attribute text boxes in Oxygen editor
Post by chrispitude »
Thanks Radu! I had forgotten to consider overriding the existing <data> CSS properties with equal or greater specificity.
I tried your suggestion and it got me close, but funny things still happened when I typed attribute values, moved the cursor, deleted values, and moved the cursor. I realized that when I deleted the values, the attribute itself was getting deleted (which I noticed in the open Attributes view) and that caused the corresponding [attributename] selector to no longer apply. With that realization (plus your reminder), what I was seeing made sense.
I ended up using !important to show the labels with highest specificity whether the attributes were present or not:
and everything worked perfectly. (My actual application is for a DITA specialization of <data>, so it is desirable to assume that the @name and @value attributes will be used.)
Thanks very much!
I tried your suggestion and it got me close, but funny things still happened when I typed attribute values, moved the cursor, deleted values, and moved the cursor. I realized that when I deleted the values, the attribute itself was getting deleted (which I noticed in the open Attributes view) and that caused the corresponding [attributename] selector to no longer apply. With that realization (plus your reminder), what I was seeing made sense.
I ended up using !important to show the labels with highest specificity whether the attributes were present or not:
Code: Select all
/* attribute labels */
.topic\/data:before(2) {
content: oxy_label(text, " Category: ", width, 5ex)
oxy_textfield(columns, 12, edit, "@name") !important;
}
.topic\/data:before(1) {
content: oxy_label(text, " Keyword: ", width, 5ex)
oxy_textfield(columns, 12, edit, "@value") !important;
}
Thanks very much!
Return to “DITA (Editing and Publishing DITA Content)”
Jump to
- Oxygen XML Editor/Author/Developer
- ↳ Feature Request
- ↳ Common Problems
- ↳ DITA (Editing and Publishing DITA Content)
- ↳ SDK-API, Frameworks - Document Types
- ↳ DocBook
- ↳ TEI
- ↳ XHTML
- ↳ Other Issues
- Oxygen XML Web Author
- ↳ Feature Request
- ↳ Common Problems
- Oxygen Content Fusion
- ↳ Feature Request
- ↳ Common Problems
- Oxygen JSON Editor
- ↳ Feature Request
- ↳ Common Problems
- Oxygen PDF Chemistry
- ↳ Feature Request
- ↳ Common Problems
- Oxygen Feedback
- ↳ Feature Request
- ↳ Common Problems
- Oxygen XML WebHelp
- ↳ Feature Request
- ↳ Common Problems
- XML
- ↳ General XML Questions
- ↳ XSLT and FOP
- ↳ XML Schemas
- ↳ XQuery
- NVDL
- ↳ General NVDL Issues
- ↳ oNVDL Related Issues
- XML Services Market
- ↳ Offer a Service