Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • M MathJax
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 304
    • Issues 304
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 15
    • Merge requests 15
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • MathJax
  • MathJax
  • Merge requests
  • !1479

Properly determine container widths. Resolves issue #1478.

  • Review changes

  • Download
  • Email patches
  • Plain diff
Merged Davide P. Cervone requested to merge github/fork/dpvc/issue1478 into develop May 17, 2016
  • Overview 7
  • Commits 5
  • Pipelines 0
  • Changes 4

This path changes how the container width is determined so that it can be used within shrink-wrap elements like table cells and inline-block elements, while still properly handling floating elements that reduce the width.

The old approach was to use an <hr> element to get the width, since that would fill the available space, but not overlap floating elements. The problem with that approach is that shrink-wrap elements would end up being width 0 if they don't have any other content than the math.

To resolve this, we can use an element with display:table-cell and width set to some large amount, since the table will shrink the cell to the available space, but the large width will force it to be as large as possible. Thus it gets the full width of that is available. (This was the technique used in the handle-floats extension for displaying the HTML-CSS output within the available space, but it was not used for measuring the space.) This is more effective than the <hr> technique, since it means that in a shrink-wrapped element, the table cell will try to be as large as possible (forcing the container to be as large as possible), whereas the rule would not, leaving the width of 0.

The HTML-CSS and CHTML output now include the CSS used in the handle-floats extension to make sure that the output fits within the floating elements. This was not being done with the CHTML output (and there was no handle-floats extension for it), and this makes the current handle-floats for HTML-CSS obsolete.

I would recommend reviewing the SVG output first, then the HTML-CSS and finally the CHTML output.

Note: IE < 8 will not get the container width correct inside shrink-wrap elements, since it doesn't implement display:table-cell properly, and we are forced to use display:block; width:100% instead, which doesn't force the container to be as wide as possible. But since display:block is also implemented incorrectly in IE < 8, it does get the proper width between floating elements when not used inside a shrink-wrap element. This only applies to HTML-CSS output, since SVG only works in IE9 and above, and CHTML only in IE8 and above.

Assignee
Assign to
Reviewers
Request review from
Time tracking
Source branch: github/fork/dpvc/issue1478