1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    104
    Vote Rating
    0
    rbahumi is on a distinguished road

      0  

    Default Unanswered: How to cancel horizontal scroll when user inserts a long word

    Unanswered: How to cancel horizontal scroll when user inserts a long word


    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.

  2. #2
    bricemason's Avatar
    Join Date
    Jan 2008
    Location
    Upstate NY
    Posts
    280
    Answers
    49
    Vote Rating
    44
    bricemason has a spectacular aura about bricemason has a spectacular aura about bricemason has a spectacular aura about

      0  

    Default


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

    ContactList.js
    Code:
    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
    Code:
    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
    Code:
    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:
    Code:
    .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
    Brice Mason
    Front End Developer
    Modus Create

    @bricemason
    bricemason.com

    Sencha Touch Screencasts
    Vimeo - Sencha Touch Channel

    Github Projects:
    Sencha Cordova Builder enables the automatic creation, building, and running of PhoneGap (Cordova) projects with Sencha Touch.

    Am I Sencha Touch Ready? checks your system to determine what you need to do to start Sencha Touch development. If you're having trouble getting up and running, try this out.

    Sencha Tools Bridge allows Sencha SDK Tools to co-exist with Sencha Cmd on the same system.

  3. #3
    Sencha User
    Join Date
    Sep 2012
    Posts
    104
    Vote Rating
    0
    rbahumi is on a distinguished road

      0  

    Default


    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.

Thread Participants: 1