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

      1  

    Question Answered: ProgressBar appears transparent

    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 - Services Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,362
    Answers
    60
    Vote Rating
    33
    arthurakay is a jewel in the rough arthurakay is a jewel in the rough arthurakay is a jewel in the rough

      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...
    Arthur Kay
    Developer Relations Manager, Sencha Inc.

    Twitter | Sencha Chicago User Group

  4. #3
    Ext Premium Member yyogev's Avatar
    Join Date
    Jun 2009
    Location
    Shoham, Israel
    Posts
    196
    Answers
    5
    Vote Rating
    6
    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 - Services Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,362
    Answers
    60
    Vote Rating
    33
    arthurakay is a jewel in the rough arthurakay is a jewel in the rough arthurakay is a jewel in the rough

      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.
    Arthur Kay
    Developer Relations Manager, Sencha Inc.

    Twitter | Sencha Chicago User Group

  6. #5
    Ext Premium Member yyogev's Avatar
    Join Date
    Jun 2009
    Location
    Shoham, Israel
    Posts
    196
    Answers
    5
    Vote Rating
    6
    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
    Answers
    5
    Vote Rating
    6
    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 - Services Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,362
    Answers
    60
    Vote Rating
    33
    arthurakay is a jewel in the rough arthurakay is a jewel in the rough arthurakay is a jewel in the rough

      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.
    Arthur Kay
    Developer Relations Manager, Sencha Inc.

    Twitter | Sencha Chicago User Group

  9. #8
    Ext Premium Member yyogev's Avatar
    Join Date
    Jun 2009
    Location
    Shoham, Israel
    Posts
    196
    Answers
    5
    Vote Rating
    6
    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 - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Answers
    124
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      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.