Skip to content

Conversation

@GovardhaneNitin
Copy link

Summary

This PR implements smart type detection for the container_height option, allowing CSS string values like percentages, calc(), viewport units, and other CSS values in addition to numeric pixel values.

Fixes #587

Problem

The container_height option previously only accepted numeric pixel values or 'auto'. When users passed CSS string values, they were incorrectly converted:

container_height: '100%'              // Resulted in: --gv-grid-height: 100%px (invalid CSS)
container_height: 'calc(100vh - 200px)' // Resulted in: calc(100vh - 200px)px (invalid CSS)

This made it difficult to create responsive, viewport-constrained Gantt charts with proper scrolling behavior.

Solution

The fix uses smart type detection:

  • String values → used as-is (e.g., '100%''100%')
  • Numeric values → append 'px' as before (e.g., 600'600px')

Usage

new Gantt(container, tasks, {
    container_height: '100%',                    // ✅ Sets: --gv-grid-height: 100%
    container_height: 'calc(100vh - 200px)',     // ✅ Sets: --gv-grid-height: calc(100vh - 200px)
    container_height: '50vh',                    // ✅ Sets: --gv-grid-height: 50vh
    container_height: 600,                       // ✅ Still works: --gv-grid-height: 600px
});

Backward Compatibility

  • ✅ Numeric values still work exactly as before
  • 'auto' value behavior unchanged
  • ✅ No breaking changes

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Feature Request: Support CSS Values for container_height Option

1 participant