angular-ui/ui-grid

Grid not rendering until manual browser re-sizing

Open

#2,195 opened on Nov 21, 2014

View on GitHub
 (29 comments) (0 reactions) (0 assignees)JavaScript (5,395 stars) (2,496 forks)batch import
help wantedneeds: analysisworkaround

Description

When first loading a page, the following text is displayed rather than the grid: before

By resizing the browser a couple of pixels (horizontally or vertically), the grid refreshes to display properly: after

Notes:

  • The presence or absence of ui-selection does not appear to make a difference.
  • The behavior is the same in Chrome and Firefox (couldn't test IE)
  • Version 3.0.0-rc.16

Here is the grid invocation:

Here are the grid config settings:

$scope.gridResearchOptions = {
      enableColumnResizing: true,
      enableGridMenu: true,
      enableRowHeaderSelection: true,
      enableRowSelection: true,
      enableSelectAll: true,
      multiSelect: true,
      modifierKeysToMultiSelect: false,
      noUnselect: false,
      resizable: true,
      columnDefs: [
         ...
      ],
      data:  [ {
            ...
            }
         ]
   };

Contributor guide

Tech stack
javascripthtmlcss
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
None
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
This is a rendering bug in ui grid where the grid does not render until the browser is resized. The issue likely lies in the grid's initialization logic or resize event bindings. Investigate files related to grid rendering (e.g., core.grid.js) and check if the grid's size calculation is triggered on load. Look at the 29 comments for any proposed fixes or workarounds. Also consider if the grid's container has an initial size of zero, causing the grid to not render.