search

alpheios-project / arethusa

Arethusa: Annotation Environment
http://sosol.perseids.org/tools/arethusa
MIT License
34 stars 26 forks source link

Give tree-settings div the correct height #822

Closed zfletch closed 4 years ago

zfletch commented 4 years ago

Fixes https://github.com/alpheios-project/arethusa/issues/820

There is an issue with the dep_tree_no_selector.html template where the tree overflows the bounding box.

This is caused by the .tree-settings div technically having a height of 0 because its children are all floats. Since it doesn't have any height, but its children have a height, there is some weird interaction in a nested svg element that has its own height set to 100%. The margin of 0.3rem seems to have the same effect, where it's pushing the svg down but isn't being included in the height calculation of the div.

By changing margin to padding and setting overflow to auto (for complicated reasons, overflow auto gives the container div the height of its float), the .tree-settings div gets the correct height which fixes the problem.

It's possible this will have other side effects, but I did test the new version with the Treebank Template (using both dep_tree_no_selector and dep_tree) and everything seems to work.

Also see the before and after snapshots adding this commit to the arethusa-widget repository.