CSS layout uses .popover-layout mixin, which fits the contents in a
pre-specified width (defaults to 260px). Popover classes include this
mixin so children widths are calculated during compile-time using Less
arithmetic expansions.
If a text node overflows the container word-wrapping rules would emerge
and cause this bug. Currently, offset calculations are implied by the
triangle arrow positioning stuff, which moves the popover container to
the right (using negative left offset) while moving the arrow (using
positive right offset). To preserve the correct layout, popover block
width should be known in prior.
We can avoid these calculations (still retaining current look-and-feel)
by re-aligning the arrow, setting the .language-popover left offset to
zero and using CSS transformations to translate the whole block to the
left by the half of its width. It would allow as not to rely on a fixed
width, so the box model will expand the blocks as necessary to fit the
text nodes - on my screen it allows language names up to 16 narrow
chars (like 'a') or 10 wide chars ('A').
However, much simplier solution is just changing the padding of the
language name label. In case a longer word won't fit inside the
container, we can always update the @width parameter.
Reviewed: https:/ /review. openstack. org/253393 /git.openstack. org/cgit/ openstack/ fuel-web/ commit/ ?id=2f9032015f9 5cbb3b171a72738 bc9d56f4d486a7
Committed: https:/
Submitter: Jenkins
Branch: master
commit 2f9032015f95cbb 3b171a72738bc9d 56f4d486a7
Author: Dmitry Bilunov <email address hidden>
Date: Thu Dec 10 13:44:01 2015 +0300
Fix broken "English" label in language-popover
CSS layout uses .popover-layout mixin, which fits the contents in a
pre-specified width (defaults to 260px). Popover classes include this
mixin so children widths are calculated during compile-time using Less
arithmetic expansions.
If a text node overflows the container word-wrapping rules would emerge
and cause this bug. Currently, offset calculations are implied by the
triangle arrow positioning stuff, which moves the popover container to
the right (using negative left offset) while moving the arrow (using
positive right offset). To preserve the correct layout, popover block
width should be known in prior.
We can avoid these calculations (still retaining current look-and-feel)
by re-aligning the arrow, setting the .language-popover left offset to
zero and using CSS transformations to translate the whole block to the
left by the half of its width. It would allow as not to rely on a fixed
width, so the box model will expand the blocks as necessary to fit the
text nodes - on my screen it allows language names up to 16 narrow
chars (like 'a') or 10 wide chars ('A').
However, much simplier solution is just changing the padding of the
language name label. In case a longer word won't fit inside the
container, we can always update the @width parameter.
Closes-Bug: 1522341 6e72a57ba117b7b e15ee187c5f
Change-Id: I182a37da42bd54