1. #1
    Ext Premium Member yyogev's Avatar
    Join Date
    Jun 2009
    Location
    Shoham, Israel
    Posts
    196
    Vote Rating
    6
    Answers
    5
    yyogev is on a distinguished road

      1  

    Question Answered: ProgressBar appears transparent

    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:
    Code:
    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
    Last edited by yyogev; 2 Jul 2012 at 6:19 AM. Reason: edit subject
    Yaron Yogev

    IT Software Developer

  2. 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.

  3. #2
    Sencha - Tools Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,448
    Vote Rating
    67
    Answers
    72
    arthurakay is just really nice arthurakay is just really nice arthurakay is just really nice arthurakay is just really nice arthurakay is just really nice

      0  

    Default

    Have you done any custom styling to your application?

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

  4. #3
    Ext Premium Member yyogev's Avatar
    Join Date
    Jun 2009
    Location
    Shoham, Israel
    Posts
    196
    Vote Rating
    6
    Answers
    5
    yyogev is on a distinguished road

      0  

    Default

    Hello Arthur,

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

    thanks,
    Yaron Yogev

    IT Software Developer

  5. #4
    Sencha - Tools Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,448
    Vote Rating
    67
    Answers
    72
    arthurakay is just really nice arthurakay is just really nice arthurakay is just really nice arthurakay is just really nice arthurakay is just really nice

      0  

    Default

    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.

  6. #5
    Ext Premium Member yyogev's Avatar
    Join Date
    Jun 2009
    Location
    Shoham, Israel
    Posts
    196
    Vote Rating
    6
    Answers
    5
    yyogev is on a distinguished road

      0  

    Default

    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.
    Yaron Yogev

    IT Software Developer

  7. #6
    Ext Premium Member yyogev's Avatar
    Join Date
    Jun 2009
    Location
    Shoham, Israel
    Posts
    196
    Vote Rating
    6
    Answers
    5
    yyogev is on a distinguished road

      0  

    Default

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

    Code:
    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;
    
    
    }
    Yaron Yogev

    IT Software Developer

  8. #7
    Sencha - Tools Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,448
    Vote Rating
    67
    Answers
    72
    arthurakay is just really nice arthurakay is just really nice arthurakay is just really nice arthurakay is just really nice arthurakay is just really nice

      0  

    Default

    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.

  9. #8
    Ext Premium Member yyogev's Avatar
    Join Date
    Jun 2009
    Location
    Shoham, Israel
    Posts
    196
    Vote Rating
    6
    Answers
    5
    yyogev is on a distinguished road

      0  

    Default

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

    IT Software Developer

  10. #9
    Sencha User sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,334
    Vote Rating
    87
    Answers
    124
    sword-it is just really nice sword-it is just really nice sword-it is just really nice sword-it is just really nice

      0  

    Default

    Hi yyogev,

    You can use style config of progress bar to give background-color-
    Code:
    Ext.create("Ext.ProgressBar", {
                    id: "modify_issues_progress_bar",
                    floating: true,
                    renderTo: Ext.getBody(),
                    width: 350,
                    style:'background-color: #ffffff',
                    text: "Initializing update process"
                });
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.