U4-3953 - Installing package - installing message progressbar causes horizontal scrollbar

Created by Bjarne Fyrstenborg 02 Jan 2014, 01:01:04 Updated by Bjarne Fyrstenborg 21 Aug 2014, 23:04:30

When installing a package there is a progressbar simulating the install progress, but it also causes a horizontal scrollbar i the browser. I have checked in Chrome v. 31.0.1650.63

It happens because the div with id installingMessage (with a div for progressbar with class umb-loader) is inside the div with controls-row class.

If I remove width:100%; from umb-loader class the horizontal scrolling in browser doesn't happen, but the animation does not have same effect then. I have demonstrated these differences from a video screen capture.

A solution might be to let the container div of progressbar div have a width:100% and overflow:hidden in css and not wrap that div inside the

3 Attachments

Download 02-01-2014 01-27-27.mp4

Download 02-01-2014 01-29-29.mp4

Download 2014-08-21_22-35-19.mp4


Bjarne Fyrstenborg 26 Jun 2014, 01:09:06

Pull request created here: https://github.com/umbraco/Umbraco-CMS/pull/420

Johan Benjaminsson 21 Aug 2014, 20:07:16

Upgraded to 7.1.5 and the bar is gone when installing. But when uninstalling it is still there.

Bjarne Fyrstenborg 21 Aug 2014, 20:15:58

@JBenjaminsson which browser are you using?

Johan Benjaminsson 21 Aug 2014, 20:18:28

Chrome Version 36.0.1985.143 m

Bjarne Fyrstenborg 21 Aug 2014, 20:36:45

I have the same version of Chrome and just upgraded from 7.1.4. to 7.1.5. It looks fine to me.. have you tried to clear the browser cache?

If you load a package and find the div element with id installingMessage you can remove display:none or change to display:block. How does the loading bar looks then?

However I noticed because the bar have been changed and the message "Installing package, please wait..." is inside that, it isn't visible.

The attacted video is how I see it now.

Bjarne Fyrstenborg 21 Aug 2014, 23:04:30

The loading bar, when you uninstall package a package is on a different page, so it's the same a previously, but I actually see the it also cause a horizontal browser scrollbar, because it moves out of the screen space and there isn't a overflow: hidden; on the parent element.

Because of the changed to the loading bar, I missed the text inside "Installing package, please wait..." .. so it should probably be changed to this:

Installing package, please wait...


Priority: Minor

Type: Cosmetics

State: Fixed

Assignee: Shannon Deminick

Difficulty: Normal


Backwards Compatible: True

Fix Submitted: Pull request

Affected versions: 7.0.1, 7.0.2, 7.0.3, 7.0.4, 7.1.4

Due in version: 7.1.5


Story Points: