angular-ui/ui-grid

UI Grid : Header not align with the column

Open

#5,266 opened on Mar 31, 2016

View on GitHub
 (1 comment) (1 reaction) (0 assignees)JavaScript (5,395 stars) (2,496 forks)batch import
good first issueseverity: confusing

Description

Hello,

I'm using AngularJS 1.5.3 with the angular-ui-grid 3.1.1. As I'm new to UI-Grid I started from the examples in the API documentation, but I'm having the following issue, on every browsers I'm using (last version of chrome, firefox, IE11) : the column headers seems to be sized with the contents, so I'm having all my headers on the left and a big space on the right but all the columns are sharing the same size.

I tried with differents sizes on the gridOptions.ColumnDef such as " width : '*' ", " width: 100 " or " width: '20%' ", but I'm having always the same result : the column are getting the right width defined but the column headers are not.

I also tried using the headerTemplate attribute with the header example in the documentation but it also isn't changing anything.

For information, I'm also using CSS3 Flex (but it shouldn't be a problem) and I'm also having the error : "getSafeText is not a function".

Thank you for your help.

Contributor guide

Tech stack
javascriptcssangular
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.
1-3 hours
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.
mostly clear
Prerequisites
basic knowledge of AngularJSbasic CSS alignment
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
Investigate the header alignment issue in AngularJS UI Grid. Review the grid's CSS for column definitions and header templates. Check for conflicts with CSS3 Flexbox and explore the 'getSafeText is not a function' error. Look at the ui grid source code for header sizing logic and any known issues with width '*' or percentage widths. Also search the repository issues for similar alignment problems.