Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: MultiLine Text in display field

  1. #1
    Sencha User
    Join Date
    Oct 2013
    Posts
    200
    Answers
    3

    Default Answered: MultiLine Text in display field

    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

  2. Hi,

    Click here to check the updated Fiddle.

    Added the below CSS:
    Code:
    .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/

  3. #2
    Ext JS Premium Member
    Join Date
    Jul 2011
    Location
    Hyderabad, India
    Posts
    99
    Answers
    15

    Default

    Hi,

    Added a fiddle for you, Click here to check


    Thanks,
    Md Naveed
    \m/

  4. #3
    Sencha User
    Join Date
    Oct 2013
    Posts
    200
    Answers
    3

    Default

    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

  5. #4
    Ext JS Premium Member
    Join Date
    Jul 2011
    Location
    Hyderabad, India
    Posts
    99
    Answers
    15

    Default

    Hi,

    Click here to check the updated Fiddle.

    Added the below CSS:
    Code:
    .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/

  6. #5
    Sencha User
    Join Date
    Oct 2013
    Posts
    200
    Answers
    3

    Default

    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

  7. #6
    Sencha User
    Join Date
    Oct 2013
    Posts
    200
    Answers
    3

    Default

    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

  8. #7
    Ext JS Premium Member
    Join Date
    Jul 2011
    Location
    Hyderabad, India
    Posts
    99
    Answers
    15

    Default

    Please check the updated fiddle. Still if you have issue, Please use labelCls or cls will be helpful for you.

    Styles modified willn't impact the other fields until prefixed with your custom class.
    Eg:
    Code:
    .text-wrapper .x-form-display-field {
       word-break: break-word;
       word-wrap: break-word;
    }
    Thanks,
    Md Naveed
    \m/

  9. #8
    Sencha User
    Join Date
    Oct 2013
    Posts
    200
    Answers
    3

    Default

    Thanks a lot !!

  10. #9
    Sencha User
    Join Date
    Oct 2009
    Posts
    85
    Answers
    3

    Default

    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?

  11. #10
    Sencha User
    Join Date
    Oct 2013
    Posts
    200
    Answers
    3

    Default

    Hi,

    This layout configuration worked for me -

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

    Thanks,
    Ankit

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •