ProgressBar appears transparent

[yyogev]

I have a dialog box window with a form. upon submit of that form an update process is started, and progress is shown using a progress bar. The problem is that the progress bar shows only the progress area, and it's background is transparent so it shows the form fields beneath it. See the picture below.

The code I used to create the progress bar:

var progress_bar = Ext.create("Ext.ProgressBar", {
    id: "modify_issues_progress_bar",
    floating: true,
    renderTo: Ext.getBody(),
    width: 350,
    text: "Initializing update process"
});
progress_bar.show();

I should note that at first when I tried to use the example code shown in the docs nothing was displayed.

Later updates are done with calls to updateProgress().


B138830_progress_bar_opacity.png

[arthurakay]

Have you done any custom styling to your application?

I ask because some of your form field labels look different than normal to me...

[yyogev]

Hello Arthur,

Indeed, I have made many changes of style in my application.
What style should I look at to solve this ?

thanks,

[arthurakay]

It's hard to say exactly for sure because I don't know all of what you've done... but I imagine anything relating to the form would be a good place to start.

Additionally, any custom styles relating to background colors/images would be a place I might focus on. I know that's a "duh!" thing to say, but I imagine you mistakenly overrode something that relates to the background color or mask.

[yyogev]

Setting style to "background-color: white" (or some other fancy color) fixes this.

I do not see any place in this application where I set background color to transparent.
As I don't really have the time to research this, I will settle for setting the style locally.

[yyogev]

Here is what I see in the Firebug HTML tab, under "style". It does not show any local override.

element.style {
    left: 461px;
    top: 300px;
    width: 350px;
    z-index: 29011;


}


.x-progress-default {
    border-color: #6594CF;


}

ext-all.css (line 18)


.x-progress {
    border-radius: 0 0 0 0;
    border-style: solid;
    border-width: 1px;
    height: 20px;
    overflow: hidden;
    position: relative;


}

ext-all.css (line 18)


.x-layer {
    overflow: hidden;
    position: absolute !important;


}

ext-all.css (line 18)


.x-border-box, .x-border-box * {
    -moz-box-sizing: border-box;


}

ext-all.css (line 18)


html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;


}

ext-all.css (line 18)



Inherited frombody#ext-gen1018.x-body

.x-body {
    color: black;
    font-family: tahoma,arial,verdana,sans-serif;
    font-size: 12px;


}

ext-all.css (line 18)


body {
    font: 14px/160% arial,"lucida console",sans-serif;


}

[arthurakay]

Without being physically able to look at what you've got in front of you, I'm afraid I don't really know what else to suggest.

That being said, I'm glad you were able to solve the problem.

[yyogev]

Thanks. I'll update this issue if I have anything new on this.

[sword-it]

Hi yyogev,

You can use style config of progress bar to give background-color-

Ext.create("Ext.ProgressBar", {
                id: "modify_issues_progress_bar",
                floating: true,
                renderTo: Ext.getBody(),
                width: 350,
                style:'background-color: #ffffff',
                text: "Initializing update process"
            });