PDA

View Full Version : [CLOSED] Progress Bar - wrap text



tanky65
Jun 27, 2013, 5:38 AM
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>

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

tanky65
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

Daniil
Jun 27, 2013, 3:14 PM
Currently, I am not able to find a clear and simple solution. I will try later again.

tanky65
Jun 27, 2013, 3:31 PM
no prob. at all, thanks

Daniil
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>

tanky65
Jul 04, 2013, 7:32 AM
yes, it's what i was looking for.
Thank You very much