PDA

View Full Version : MessageBox wrap/truncation problem



KenD2364
25 Oct 2013, 9:03 AM
In ExtJs 4.2.1, I appear to have found a bug. In MessageBox, if the msg is a particular length, the message will be wrapped, but the height of the dialog will not get adjusted. This results in the the wrapped text getting truncated horizontally.

I am using the default font type and size. I believe that may make a difference on how long the message is. The example below fails for me every time:

Ext.MessageBox.confirm(
'Confirm',
'TLS credential files were installed.<br><br>Please close your browser window and wait for at least nn minutes before attempting to log back in.'
);

When the above is run, the wrapped text, "in.", is pushed to a second line, but about all you can see is the dot above the i. Now, change the "nn" in the msg to "nm", making it slightly longer. After running, the message will be wrapped, however, now the dialog height is resized and nothing gets truncated. Change back to "nn" and see the problem occur again. Add an extra period at the end of the message and find that wrapping and height adjustment occur correctly.

I have found that it does not matter which MessageBox method is used (alert, show, confirm, etc...), the problem still occurs.

I have not been able to find a workaround to this problem (even width:auto does not work) other than changing the string so it is a different length.

Gary Schlosberg
25 Oct 2013, 9:28 AM
I haven't been able to reproduce this with your code either with fiddle or otherwise:
https://fiddle.sencha.com/#fiddle/177

The issue may have been resolved:
http://www.sencha.com/forum/showthread.php?274427

You might try your code against 4.2.2. If still an issue, in which browser are you seeing this?

KenD2364
25 Oct 2013, 10:08 AM
I have found another occurrence where wrapping occurs, but this seems to be less picky about the length of the string for the wrap/truncation problem.

Ext.MessageBox.alert(
'Error',
'Not enough memory to complete the request'
)
Ext.MessageBox.alert(
'Error',
'Not enough memory to complete the request'
);

If you add a period, or even a word, it still wraps and truncates the wrapped portion. I even added to the beginning of the message, "There is ". The width of the box changes, but the word "request" still wraps and truncates.

If I change the alert to a confirm, thereby using an icon, wrapping works great. If I change the alert to the following, an icon is shown which the alert does not have. Other than that, this appears to be equivalent:
Ext.MessageBox.show({
title: 'Error',
msg: 'Not enough memory to complete the request',
buttons: Ext.MessageBox.OK
});
Wrapping is handled correctly. However, if I remove the icon line altogether to make it look just like the alert, I have the wrap/truncation problem again.

KenD2364
25 Oct 2013, 10:11 AM
Our environemnt right now only uses 4.2.1. We cannot upgrade to 4.2.2 yet as we are very near a release and cannot risk our product. I will try on 4.2.2 after we upgrade to that.

I am seeing the problem using FF, version 24.0 on Win7. I have not tried other browsers for this problem since FF is one of the main browsers used by our users.

w_goldman
24 Aug 2016, 9:52 AM
Having same issue

SurenderBhyan1
10 Sep 2016, 12:38 AM
Faced the same issue in IE 11 with version 4.2.1

Fixed with below override.



if (Ext.isIE11) { Ext.override(Ext.MessageBox, {
onShow: function () {
var me = this;
this.callParent(arguments);
this.center();
me.on('show', function () {
var offset = 10;
var helperEl = Ext.fly(me.helperElId) || Ext.fly(Ext.DomHelper.createDom({
tag: 'div',
id: me.helperElId,
style: {
position: 'absolute',
left: '-1000px',
top: '-1000px',
'font-size': '11px',
'line-height': '13px',
'font-family': 'arial, tahoma, helvetica, sans-serif'
}
}, Ext.getBody()));

if (me.msg && (me.msg.getWidth() !== (helperEl.dom.clientWidth + offset))) {
helperEl.update(me.msg.value);
me.msg.setWidth(Ext.Number.constrain(helperEl.dom.clientWidth + offset, me.minWidth, me.maxWidth));
};
}, this);
}
}); }





Try below fiddle with and without override

https://fiddle.sencha.com/#fiddle/qbp