Oxygen Web Author CSS is Overwriting Document CSS

[john_m]

Hello,

I'm having an issue with the oxygen css overwriting my table styling.

I've created a custom css file that sets all tables to a width of 100%. The styling works fine in the desktop application. However, when I put the css on the server in our Oxygen Web Author environment, the table style is overwritten by the .oxy-document table style (located in document-v18.1.0.css).

I updated my css to include .oxy-document table and gave it the additional styling, however, that did not work.

It seems that your css is loading after mine and causing the issue. Is there a way to load the custom css last? If not, is there a known work-around? I would like to avoid modifying document-v18.1.0.css.

Thanks!
John

[cristi_talau]

Hello,

I Web Author you usually provide a CSS file that matches XML elements in your documents. This CSS file is automatically translated to another CSS file that matches HTML elements in the browser. The ".oxy-document" selector is present in the generated CSS file and it is not a good ideea to try to override it.

It would help looking in the original CSS file using the CSS Inspector in oXygen XML Editor (or Author) and try to figure our the problem there.

That being said, one option to override a style in the generated CSS is to simply increase the specificity of the overriding rule. You can try something like

Code: Select all

.oxy-document.oxy-document.oxy-document.oxy-document table { ... } 

Best,
Cristian

[john_m]

Hi Christian,

Thanks for the reply. I agree that the issue is specificity - but I am not sure how to access the table tags that I'm looking at.

I have a custom style sheet that works perfectly in Oxygen XML editor. However, something seems to be happening when the XML/css are loaded into and transformed for use in Oxygen XML web author. I have tried using attributes and IDs on the table to trigger css rules - but during the transformation the attributes and IDs seem to get assigned to the div that holds the table (and that div is already at 100%). I've also tried using your suggestion - but it didn't work.

I've attached some creen shots to see if that maybe helps clarify what I am looking at.

The table has an xmlns attribute - but if you look at the code, the <table> tag does not. That data is pushed into the div containing the table.


The css code below tries to target the table based on your suggestion and also using the table attribute.

Code: Select all

.oxy-document.oxy-document.oxy-document table{

    width:100% !important;

}



table[xmlns]{

    width:100% !important;

}

Updating the width to 100% provides the proper table behavior.


The inline style that drives element.style seems to be calculated and coming from this Oxygen file.

[cristi_talau]

Hello,

You are right, Web Author creates a wrapper "div" element around the table and if you specify a width for the table it is not taken into account. We registered an issue about this. We will fix this in a maintenance build for Web Author 19.

As a workaround, you can use JS to inject a CSS directly in the HTML page that looks like:

Code: Select all

[data-xmlns] > table { 

   width: 100%; 

 }

You can do this by modifying the "web/framework.js" file in the XHTML framework.

Best,
Cristian

[john_m]

Thanks Christian!

[cristi_talau]

Hello,

I wanted to let you know that the fix is now available in the latest maintenance build of 19.0 version on our website [1].

Best,
Cristian

[1] https://www.oxygenxml.com/xml_web_autho ... uthor.html