Results 1 to 4 of 4

Thread: How do I display a seamless image composed of multiple images added to table layout?

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    6
    Answers
    1
    Vote Rating
    0
      0  

    Default Answered: How do I display a seamless image composed of multiple images added to table layout?

    Example below:
    Code:
    {
        xtype: 'container',
        width: 128,
        height: 128,
        layout: {
            type: 'table',
            columns: 8
        },
        items: [{
            xtype: 'image'
            width: 16,
            height: 16,
            src: '/images/col0row0.png'
        },{
            xtype: 'image'
            width: 16,
            height: 16,
            src: '/images/col1row0.png'
        },{
            xtype: 'image'
            width: 16,
            height: 16,
            src: '/images/col2row0.png'
        },{
            xtype: 'image'
            width: 16,
            height: 16,
            src: '/images/col3row0.png'
        },{
            xtype: 'image'
            width: 16,
            height: 16,
            src: '/images/col4row0.png'
        },{
            xtype: 'image'
            width: 16,
            height: 16,
            src: '/images/col5row0.png'
        },{
            xtype: 'image'
            width: 16,
            height: 16,
            src: '/images/col6row0.png'
        },{
            xtype: 'image'
            width: 16,
            height: 16,
            src: '/images/col7row0.png'
        },{
            xtype: 'image'
            width: 16,
            height: 16,
            src: '/images/col1row1.png'
        },{
            //etc.
        }]
    }
    There is a 2px gap at the bottom of every row. I tried setting heights, margins, and padding, but nothing worked.

  2. I found out what caused the 2px gap on every row. My page doctype was set to HTML 5: <!DOCTYPE html>.

    The gap does not happen if using HTML 4 doctypes.

  3. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,381
    Answers
    3997
    Vote Rating
    1536
      0  

    Default

    How about cellspacing or cellpadding?
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  4. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    6
    Answers
    1
    Vote Rating
    0
      0  

    Default

    Thanks for the advice, but it still has the 2px gap on every row.

    I tried the layout config below:
    Code:
    layout: {
        type: 'table',
        columns: 8,
        tableAttrs: {
            cellpadding: 0,
            cellspacing: 0
        }
    }

  5. #4
    Sencha User
    Join Date
    Aug 2011
    Posts
    6
    Answers
    1
    Vote Rating
    0
      0  

    Default

    I found out what caused the 2px gap on every row. My page doctype was set to HTML 5: <!DOCTYPE html>.

    The gap does not happen if using HTML 4 doctypes.

Tags for this Thread

Posting Permissions

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