PDA

View Full Version : ProgressBar appears transparent



yyogev
2 Jul 2012, 6:15 AM
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().


36713

arthurakay
2 Jul 2012, 7:19 AM
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
2 Jul 2012, 7:22 AM
Hello Arthur,

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

thanks,

arthurakay
2 Jul 2012, 7:27 AM
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
2 Jul 2012, 7:44 AM
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
2 Jul 2012, 7:51 AM
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
2 Jul 2012, 7:52 AM
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
2 Jul 2012, 7:55 AM
Thanks. I'll update this issue if I have anything new on this.

sword-it
2 Jul 2012, 8:06 AM
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"
});