What's New?

[CLOSED] Progress Bar - wrap text

  1. #1
    Jun 27, 2013, 5:38 AM

    [CLOSED] Progress Bar - wrap text

    Please, if possible, in a progress bar I would that a long message text wrap to the next line and text fit centered horiz and vert.
    if this is in ext context, could you give me a tip ?

    i tought that putting the long msg in a <div> section could force to automatically wrap text
    progress.updateText('<div id="ecco"> Done. This message is intentionally very long but could change </div>');
    
<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <title>ProgressBar - Ext.NET Examples</title>
    <link href="/resources/css/examples.css" rel="stylesheet" />
    <style type="text/css">
        .x-progress.center-text .x-progress-text
        {
            height: 50px;
            line-height: 50px;
        }
        
        #ecco
        {
            width: 200px;
            height: 50px;
        }
    </style>
    <script>
        var updateBar = function (value, pbar, btn, count, callback) {
            if (value > count) {
                btn.setDisabled(false);
                callback();
            } else {
                pbar.updateProgress(value / count, 'Loading item ' + value + ' of ' + count + '...');
            }
        }

        var run = function (pbar, btn, count, callback) {
            btn.setDisabled(true);
            var ms = 5000 / count;
            for (var i = 1; i < (count + 2); i++) {
                setTimeout(Ext.Function.pass(updateBar, [i, pbar, btn, count, callback]), i * ms);
            }
        }

        var runProgress2 = function (progress, btn) {
            progress.show();
            run(progress, btn, 12, function () {
                progress.reset();
                progress.updateText('<div id="ecco"> Done. This message is intentionally very long but could change </div>');
            });
        }

    </script>
</head>
<body>
    <form id="Form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <h1>
        Progress Bar with centered test - If too long I would it wraps</h1>
    <p>
        <ext:Button ID="Button1" runat="server" Text="Show">
            <Listeners>
                <Click Handler="runProgress2(#{Progress2}, this);" />
            </Listeners>
        </ext:Button>
        <br />
        <ext:ProgressBar ID="Progress2" runat="server" Width="200" Height="50" Text="Ready"
            Cls="center-text" />
    </p>
    </form>
</body>
</html>
    Last edited by Daniil; Jul 04, 2013 at 8:01 AM. Reason: [CLOSED]
  2. #2
    Jun 27, 2013, 11:02 AM
    Hi @tanky65,

    Actually, the text is wrapped, just the second line in not visible because of:
    line-height: 50px;
    It just goes out of the view.

    Though, if remove, another problem arises - how to center the text vertically.
  3. #3
    Jun 27, 2013, 12:19 PM
    yes, using the same height (50 in the ex.) for text and bar, the text fits centered but it doesn't wrap. If remove, that is the standard config, it doesn't center vertically.
    I thought using a div section for the long text and defining the height the same for bar and text could solve it but probably it is related to the container.
    anyway, if someone can help, it is appreciated.
    Thanks
  4. #4
    Jun 27, 2013, 3:14 PM
    Currently, I am not able to find a clear and simple solution. I will try later again.
  5. #5
    Jun 27, 2013, 3:31 PM
    no prob. at all, thanks
  6. #6
    Jul 04, 2013, 6:21 AM
    I have came up with this solution. Does it suite your needs?

    Example
    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
    
    <style>
        .center-text .x-progress-text {
            line-height: 50px;
        }

        .long-text {
            width: 198px;
            height: 48px;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            line-height: 18px;
        }
    </style>

    <script>
        var updateBar = function (value, pbar, btn, count, callback) {
            if (value > count) {
                btn.setDisabled(false);
                callback();
            } else {
                pbar.updateProgress(value / count, 'Loading item ' + value + ' of ' + count + '...');
            }
        };

        var run = function (pbar, btn, count, callback) {
            var ms = 5000 / count,
                i;
            
            btn.setDisabled(true);
            
            for (i = 1; i < (count + 2) ; i++) {
                setTimeout(Ext.Function.pass(updateBar, [i, pbar, btn, count, callback]), i * ms);
            }
        };

        var runProgressBar1 = function (progress, btn) {
            progress.show();
            run(progress, btn, 12, function () {
                progress.reset();
                progress.updateText('<div class="long-text">Done. This message is intentionally very long but could change.<div>');
            });
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:Button runat="server" Text="Show" Handler="runProgressBar1(#{ProgressBar1}, this);" />

        <br />

        <ext:ProgressBar
            ID="ProgressBar1"
            runat="server"
            Width="200"
            Height="50"
            Text="Ready"
            Cls="center-text" />
    </form>
</body>
</html>
  7. #7
    Jul 04, 2013, 7:32 AM
    yes, it's what i was looking for.
    Thank You very much

Similar Threads

  1. [CLOSED] Wrap text in textfield
    By wisdomchuck in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Mar 14, 2013, 7:20 PM
  2. [CLOSED] GridPanel Column Name Wrap Text
    By tanky65 in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 17, 2012, 5:58 PM
  3. ext:TextField text wrap please help
    By gopikrishna in forum 1.x Help
    Replies: 0
    Last Post: Feb 14, 2011, 7:50 AM
  4. wrap Text in GridPanel
    By sachin.munot in forum 1.x Help
    Replies: 2
    Last Post: Nov 07, 2009, 12:13 AM
  5. Wrap Header Text?
    By Tbaseflug in forum 1.x Help
    Replies: 3
    Last Post: Mar 04, 2009, 3:28 PM

Posting Permissions