Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • 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
  • Bootstrap
  • bootstrap
  • Issues
  • #28439
Closed
Open
Issue created Mar 09, 2019 by Administrator@rootContributor

.card-columns causes svg elements inside to not be visible upon resize in Chrome

Created by: httpete

We are seeing a problem rendering highcharts (svg) within .cards, within .card-columns, and I have isolated the exact cause. This worked fine in 4.0.0, but breaks in higher versions.

Here is a pen showing it working fine in 4.0.0, before the responsive .card-columns was in play. Look at the Capacity chart. If you resize the html area (Drag the vertical to the right) when the cards reshuffle, the blue bar area is visible and works nicely. https://codepen.io/anon/pen/LaLzZb

Here is a pen showing it not working in 4.3.3

https://codepen.io/vinjosh/pen/OqWRMZ

The culprit is the column-count property, that is applying to the svg element here:

`@media (min-width: 576px)
.card-columns {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;`

If you take out the column-count, the columns shuffle, and the blue is visible. I think the bleed effect of the column count is affecting the svg element.

The delta between 4.0 and 4.3 is the addition of the responsive .card-columns breakpoints. I would tend to think that this is a fairly common thing, not specific to highcharts, they are just svg within cards.

Assignee
Assign to
Time tracking