Opened 12 years ago

Closed 12 years ago

#3870 closed task (fixed)

ProgressBar: vertically center text, and set height automatically based on text size

Reported by: Adam Peller Owned by: simonjb
Priority: high Milestone: 0.9
Component: Dijit Version: 0.9
Keywords: Cc: simonjb
Blocked By: Blocking:

Description

See http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

It's unclear whether this will work when the element must always be absolute positioning, as is the case here.

Attachments (1)

progress.diff (5.5 KB) - added by simonjb 12 years ago.

Download all attachments as: .zip

Change History (11)

comment:1 Changed 12 years ago by bill

Milestone: 1.00.9

Actually let's ignore that link. I've been thinking a lot about ProgressBar?. The current API where you set the height directly of the outer node, like this:

<div dojoType=dijit.ProgressBar style="height: 10px; width: 60px;">

just doesn't cut it. If a user goes to high-contrast mode or just does ctrl-+ a lot (on legacy browsers like IE6 and FF2), the text will get cutoff.

That combined with the vertical alignment problem for the label, I'm thinking it makes sense to size the bar vertically according to the text height (but adding padding-top and padding-bottom). So ProgressBar? will get taller when you switch to high-contrast mode, the same way that calendar gets bigger.

Let's get this in for 0.9 because it affects the API.

comment:2 Changed 12 years ago by Adam Peller

Cc: simonjb added; bill removed

comment:3 Changed 12 years ago by Adam Peller

Owner: changed from Adam Peller to simonjb

comment:4 Changed 12 years ago by bill

Summary: Try to vertically center text in ProgressBarProgressBar: vertically center text, and set height automatically based on text size
Type: defecttask

comment:5 Changed 12 years ago by simonjb

Status: newassigned

Changed 12 years ago by simonjb

Attachment: progress.diff added

comment:6 Changed 12 years ago by simonjb

Uploaded a patch with a potential solution. It also addresses #4007 and #4044. In this solution the text jumps around a bit in IE7, which is not really ideal. I'm guessing we are seeing the effects of rounding in IE.

comment:7 Changed 12 years ago by simonjb

(text also jumps around in IE6)

comment:8 Changed 12 years ago by Adam Peller

Yeah, looks great on FF, kinda crappy on IE. If it's the best solution we can think of and it solves all our problems, I'd argue we should live with it, but I'd like to get Bill's opinion. The size of the change doesn't bother me, though you can probably shorten the multiple dojo.connect calls.

The progressbars in theme tester don't seem to be working on IE, however.

comment:9 Changed 12 years ago by simonjb

The other options that I can think of for addressing the text layer lining up (#4044) are:

  1. remove the second text layer and just have one
  2. left-align the text (don't think it looks as good)
  3. go back to setting the size of the labels in pixels with JavaScript

comment:10 Changed 12 years ago by simonjb

Resolution: fixed
Status: assignedclosed

(In [10048]) Change the progress bar to use only one text label layer and size the bar vertically to fit the text label. Fixes #3870, fixes #4007, fixes #4044.

Note: See TracTickets for help on using tickets.