PDA

View Full Version : MultiLine Text in display field



AJAIN32
5 Jun 2014, 9:21 PM
Hi All,

I am using "displayfield component in a section, the issue is if the text lenght is too long it should be fit into the maximum width but it is coming in the same line destroying the next element.

i have tried giving white-space : normal !important property for the field but nothing worked :(

Earlier also i was facing this issue for label and i was not able to overwrite the white-space property.

Please help !!

Thanks in advance,
Ankit

mdnaveed42
5 Jun 2014, 10:07 PM
Hi,

Added a fiddle for you, Click here (https://fiddle.sencha.com/#fiddle/6dt) to check


Thanks,
Md Naveed
\m/

AJAIN32
5 Jun 2014, 10:30 PM
Thanks a lot for anwser,

that is working correctly !!

the text displayed is coming in multiple line now, can you please tell me how to overwite the default css.

as after this the text is not coming align to the label, i am trying with vertical-align :top !imortant in the fieldstyle but that is not working.
please let me know how to work on that.

Thanks for the help

mdnaveed42
5 Jun 2014, 11:12 PM
Hi,

Click here (https://fiddle.sencha.com/#fiddle/6dt) to check the updated Fiddle.

Added the below CSS:


.text-wrapper .x-form-display-field {
word-break: break-word;
word-wrap: break-word;
}


I have tested with Ext 4.x versions in Chrome and FF. It is inline with the label. For your convenience label is aligned to the right for easy testing. And by default, for the element parent default css is "vertical-align: top" is there.

Thanks,
Md Naveed
\m/

AJAIN32
6 Jun 2014, 12:27 AM
Yes its by default vAlign:top, the issue i found is - i have 2 displayfield inside a container and if one field goes into multiline due to its text length. height of the element also getting increased.

The label is at to but the text content comes in center of the height.

I hope i am clear to explain the issue.

is it required to override the display field body style to make it top aligned ?

Thanks,
Ankit

AJAIN32
6 Jun 2014, 12:40 AM
I got the issue. i had to override .x-form-item-body attribute to do vertical-align : top. and this is fine.

i have not worked that much in css part of sencha.

can you Please tell me that this wont impact the other fields across the application ??

please tell me right approach to work with css, if possible.

Thanks a ton for your quick response :)

Regards,
Ankit

mdnaveed42
6 Jun 2014, 2:05 AM
Please check the updated fiddle (https://fiddle.sencha.com/#fiddle/6dt). Still if you have issue, Please use labelCls (http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.form.Labelable-cfg-labelCls) or cls (http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.AbstractComponent-cfg-cls) will be helpful for you.

Styles modified willn't impact the other fields until prefixed with your custom class.
Eg:


.text-wrapper .x-form-display-field {
word-break: break-word;
word-wrap: break-word;
}


Thanks,
Md Naveed
\m/

AJAIN32
6 Jun 2014, 2:13 AM
Thanks a lot !!

w_goldman
12 Feb 2016, 9:14 AM
so adding layout: 'vbox', to the panel in the fiddle causes the wrapping to not work.This is the case I am faced with (it can be vbox sometimes, other times 'hbox').ideas?

AJAIN32
15 Mar 2016, 4:44 PM
Hi,

This layout configuration worked for me -

layout :
{
type :'vbox',
align : 'stretch'
},

Thanks,
Ankit

w_goldman
16 Mar 2016, 4:54 AM
thank you that does work, a bit bizarre though,I would have never thought to add align: 'stretch'