1. #1
    Sencha User Ethan Long's Avatar
    Join Date
    Feb 2012
    Posts
    70
    Answers
    2
    Vote Rating
    1
    Ethan Long is on a distinguished road

      0  

    Default Answered: How do I make text right below small canvas?

    Answered: How do I make text right below small canvas?


    This might be a html question, anyway, how can I structure text right under smaller canvas in dataview?

    I tried table to have canvas in row 1 and text in row 2, but it spans to the whole width of screen and width attributes is not working... Thanks!
    caro.jpg

  2. Managed to do it by this:



    itemTpl: '<div class="x-inner" width=220 style="float:left" id="longfan{index}"><img src="{prevUrl}" height="' + 90 + '" width="' + 120 + '" style="padding:5px; margin:' + spacingDistance + 'px; background: white; -webkit-box-shadow: 3px 3px 7px rgba(33,33,33,.7);' + 'border-radius:6px;"></img><div align="center" style="font-size:1.2em;">{name}</div></div>',

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,074
    Answers
    3500
    Vote Rating
    854
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    The <div> wrapping the <canvas> and the <div> wrapping the text, do they have display defined in your CSS? Technically <div>s should stack by default.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User Ethan Long's Avatar
    Join Date
    Feb 2012
    Posts
    70
    Answers
    2
    Vote Rating
    1
    Ethan Long is on a distinguished road

      0  

    Default


    No css defined for them. I even added <br>, still not working as desired. The text will be lower but still on the right hand side of the canvas.

  5. #4
    Sencha User Ethan Long's Avatar
    Join Date
    Feb 2012
    Posts
    70
    Answers
    2
    Vote Rating
    1
    Ethan Long is on a distinguished road

      0  

    Default


    I think the key is how to use 'float', after I remove 'float:left', the text appears under the canvas but each canvas/text takes entire row...

    Code:
                itemTpl: '<canvas height="' + 100 + '" width="' + 200 + '" id="gallery-dwg-#{index}"' +                     ' style="padding:' + spacingDistance + 'px; margin:' + spacingDistance + 
                                'px; background: white; float: left; -webkit-box-shadow: 3px 3px 7px rgba(33,33,33,.7);' +
                                'border-radius:4px;"></canvas><div>{name}</div>',

  6. #5
    Sencha User Ethan Long's Avatar
    Join Date
    Feb 2012
    Posts
    70
    Answers
    2
    Vote Rating
    1
    Ethan Long is on a distinguished road

      0  

    Default


    Managed to do it by this:



    itemTpl: '<div class="x-inner" width=220 style="float:left" id="longfan{index}"><img src="{prevUrl}" height="' + 90 + '" width="' + 120 + '" style="padding:5px; margin:' + spacingDistance + 'px; background: white; -webkit-box-shadow: 3px 3px 7px rgba(33,33,33,.7);' + 'border-radius:6px;"></img><div align="center" style="font-size:1.2em;">{name}</div></div>',

Thread Participants: 1