michmech / xonomy

A schema-driven XML editor for the web.
MIT License
91 stars 32 forks source link

Unusual text wrapping inside LAIC mode text node value in Webkit browsers #49

Open rodoch opened 5 years ago

rodoch commented 5 years ago

When Xonomy is displayed in LAIC mode the value of a text node is displayed in value element with a display setting of inline-block. On Firefox this renders as you would expect:

pic

However, in Webkit-based browsers such as Chrome or Safari multi-word text strings exhibit some strange behaviours in terms of text wrapping:

pic

Likely Firefox is doing some magic to calculate the element's width (in the absence of a CSS width property) that Chrome isn't.

There appear to be, not one, but two easy ways to fix this. Both involve changing line 231 in xonomy.css:

.xonomy.laic .element > .children > .textnode > .value { display: inline-block; font-family: monospace; background-color: #ffffff; padding: 4px 0px; border-bottom: 1px solid #999999; cursor: pointer; min-width: 2em; }

Option 1 is two change the display type to block instead of inline-block; option 2 is to leave the display setting as it is but give the element 100% width. I've tested both of these and neither appear to have any adverse effects on any of the instances of Xonomy I deal with. That said, there may be corner cases or other situations I am not aware of, and so I'm raising this as an issue and not a PR.

GRMMA!