Make messagepanel of hazard statement float right

[mprewittastec]

I am trying to adjust the Author view CSS to make hazard statements with multiple safety symbols look sane. But no matter what I try, I cannot get the

Code: Select all

messagepanel 

CSS object to float left. It is a block CSS element, and has the

Code: Select all

float: left

property.

This is what it looks like (colored areas are for visualizing CSS boundaries only):

w1.png

This is what it should look like:

w2.png

[Radu]

Hi,

I work for Oxygen and incidentally I tried to work on something similar to get Oxygen to display multiple hazardsymbol elements one next to the other instead of one over the other. I did not have much success with this, Oxygen's visual editor is CSS driven but it does not have the level of CSS support a web browser does, such a layout in a web browser would have probably me done with a table layout or a flex display.
The best I managed to do with the current available support was to scale down the symbols a bit and display them in a vertical manner with at most three of them showing before they start to display one on top of the other

Screenshot 2026-02-10 at 08.08.37.png

Regards,
Radu

[mprewittastec]

Yes, flex would be ideal. But I discovered from a previous interaction that Oxygen's CSS implementation does not support flex.
What I did should work -- but for some crazy reason I cannot get the message panel box to move to the right. If it would (floating right, freeing up the space next to it), that would solve everything.
Ideally these sections of the hazard statement would have container objects. That's a fairly standard CSS practice, and it would make things like this easier to manage. But they don't.
In my workplace documents, we sometimes have as may as 6 or 8 ISO format safety symbols with a particular warning. These usually run up to 3 across and then however many rows as needed. From a pure CSS/HTML perspective, this should be easy-peasy. So I'm frustrated that it is so hard to implement.

[Radu]

Hi,
Yes, our CSS renderer is in general good enough to support visual editing but there are these edge cases when more advanced support would be needed.
For Oxygen 28.1 (around March this year) I made some changes in the CSS to at least attempt to accomodate at most 9 symbols without them being on top of each other

Screenshot 2026-02-18 at 16.57.01.png

Regards,
Radu

[mprewittastec]

Excellent! Looking forward to it.