How to cancel horizontal scroll when user inserts a long word

[rbahumi]

Hi,

I have an "Ext.dataview.List", where each item is a HTML div filled with user provided text.

When a well-behaved user posts a "normal" text everything works just fine with the expected proportion:
normal.png

But, when a user inserts a long string with no spaces, say 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' for example, the div is growing beyond the screen's width and I am getting a horizontal scroll :
toolong.png

Notice that the top toolbar remains the same size. Also, notice that a few of the letters at the end of the word do get a new line.

I tried adding the CSS: word-wrap: break-word; to the wrapping div but it didn't help.
Please advice.

[bricemason]

I created an example using a list and was able to have the content wrap properly.

ContactList.js

Ext.define('MyApp.view.ContactList', {
   extend: 'Ext.dataview.List',
   xtype: 'contactlist',


   config: {
      store: 'contacts',
      itemCls: 'x-contact-item',
      itemTpl: [
         '<div>',
            '{firstName} {lastName}<br/>',
            '{bio}',
         '</div>'
      ].join('')
   }
});

Contact.js

Ext.define('MyApp.model.Contact', {
    extend: 'Ext.data.Model',
    
    config: {
        fields: [
            {name: 'firstName', type: 'string'},
            {name: 'lastName', type: 'string'},
            {name: 'bio', type: 'string'}
        ]
    }
});

Contacts.js

Ext.define('MyApp.store.Contacts', {
   extend: 'Ext.data.Store',


   config: {
      storeId: 'contacts',
      model: 'MyApp.model.Contact',
      proxy: {
         type: 'ajax',
         url: 'data/contacts.json',
         reader: {
            type: 'json',
            rootProperty: 'contacts'
         }
      },
      autoLoad: true
   }
});

css:

.x-contact-item > .x-dock-horizontal > .x-dock-body .x-innerhtml > div {
   word-wrap: break-word;
}

Could you please post more of your code, specifically what your itemTpl looks like for your list as well as any custom styles that you've implemented for that control.

Brice

[rbahumi]

Thanks for your replay Brice.

I have found what caused the problem: I used the list's 'baseCls' config instead of the 'cls' config.
Took me a quite a while to figure that out, and your example helped eliminating the cause :-).

Thank you.