Bug 1163721
| Summary: | system page tab nav list is rendered weirdly if the browser min font size is >14px | ||||||
|---|---|---|---|---|---|---|---|
| Product: | [Retired] Beaker | Reporter: | Dan Callaghan <dcallagh> | ||||
| Component: | web UI | Assignee: | Dan Callaghan <dcallagh> | ||||
| Status: | CLOSED CURRENTRELEASE | QA Contact: | tools-bugs <tools-bugs> | ||||
| Severity: | unspecified | Docs Contact: | |||||
| Priority: | unspecified | ||||||
| Version: | 19 | CC: | aigao, asaha, dcallagh, dowang | ||||
| Target Milestone: | 19.1 | Keywords: | Patch | ||||
| Target Release: | --- | ||||||
| Hardware: | Unspecified | ||||||
| OS: | Unspecified | ||||||
| Whiteboard: | |||||||
| Fixed In Version: | Doc Type: | Bug Fix | |||||
| Doc Text: | Story Points: | --- | |||||
| Clone Of: | Environment: | ||||||
| Last Closed: | 2014-12-17 08:40:17 UTC | Type: | Bug | ||||
| Regression: | --- | Mount Type: | --- | ||||
| Documentation: | --- | CRM: | |||||
| Verified Versions: | Category: | --- | |||||
| oVirt Team: | --- | RHEL 7.3 requirements from Atomic Host: | |||||
| Cloudforms Team: | --- | Target Upstream Version: | |||||
| Embargoed: | |||||||
| Attachments: |
|
||||||
As a workaround we can set a fixed height (rather than just line-height) on the nav list items. It's not great, since it makes things look a bit squished when the text is scaled to 16px as in my browser, but the triangles match up properly then. http://gerrit.beaker-project.org/3485 Beaker 19.1 is released. |
Created attachment 957115 [details] screenshot Version-Release number of selected component (if applicable): 19.0rc2 Steps to Reproduce: 1. Use Firefox, update preferences to set a minimum font size of 16px 2. Open the Beaker system page Actual results: Weird pokey bit below the triangle portion of the nav list (see screenshot). Expected results: Normal triangle. Additional info: I discovered today an interesting feature of Firefox. If an element's font size is scaled up from the value requested in CSS (14px for Bootstrap), because of a minimum font size in the user's preferences (16px in my case, due to the high res monitor), Firefox also scales up the requested line-height (20px for Bootstrap) by the same factor. I guess to keep things from looking too squished? However in the CSS border hack which I used to make the right-pointing triangles in the system tab nav list, the sizes are assumed to match the height of the element, which is assumed to be the line-height (20px).