How do I make text right below small canvas?

[Ethan Long]

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

[mitchellsimoens]

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.

[Ethan Long]

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.

[Ethan Long]

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...

            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>',

[Ethan Long]

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>',