Databases
StackOverflow2013
Postsdbo
POList items partially overlapping each other most of the times
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POList items partially overlapping each other most of the times
    primarykey
    data
    text
    <p>On tap handler of a panel I am creating a list(which uses itemTpl), then populating its store with relevant items and then setting it to the container. When this list is shown first item is shown fully and rest all other items below it, overlap each other. This happens 90% of the time not always and if I resize browser or change orientation of device overlapping disappears and all items look proper.</p> <p>Here is my store:</p> <pre><code>var listStore = Ext.create('Ext.data.Store', { fields: ['id','image','name','description'] }); </code></pre> <p>Here is how I am populating the store:</p> <pre><code>var json = Ext.decode(response.responseText); var arr = json.categories; for(var x = 0; x &lt; arr.length; x++) { if(arr[x].id == self.parent.cid){ var itemsArr = arr[x].items; var myitems = []; for(var y = 0; y &lt; itemsArr.length; y++) { myitems.push({"id":itemsArr[y].id, "image":itemsArr[y].image, "name":itemsArr[y].name, "description":itemsArr[y].description}); } listStore.add(myitems); } } </code></pre> <p>Here is how I am creating the list:</p> <pre><code>var itemsList = { xtype: 'list', itemTpl : self.parent.tp, store : listStore, flex : 1, id : 'ilid', layout : 'fit', templateId : 'detailsTemplate_'+self.parent.cid, detailsView : 'myshop.view.'+self.parent.ctype+'Details', direction: 'vertical', listeners: { itemtap: function (list, index, element, record) { var popup = Ext.create(list.detailsView, { rec : record.getData(), tid : list.templateId }); Ext.Viewport.add(popup); popup.show('pop'); } } }; </code></pre> <p>Here is template:</p> <pre><code>&lt;tpl for="."&gt;&lt;div class="tp_1"&gt;&lt;div class="productBox"&gt;&lt;div class="productTitle"&gt;{name}&lt;/div&gt;&lt;div class="productBody"&gt;&lt;img class="productImage" src="{image}"/&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/tpl&gt; </code></pre> <p>Here is how it looks like:</p> <p><img src="https://i.stack.imgur.com/1YCWQ.png" alt="Overlapping list items"></p> <p>Please help!</p> <p>EDIT!!! Here is Template:</p> <pre><code>&lt;tpl for="."&gt; &lt;div class="tp_5"&gt; &lt;div class="productBox"&gt; &lt;div class="productTitle"&gt;{name}&lt;/div&gt; &lt;div class="productBody"&gt;&lt;img class="productImage" src="{image}" width="300"/&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/tpl&gt; </code></pre> <p>and here is related CSS:</p> <pre><code>.productBox { border:1px solid #9a9a9a; } .productTitle { border-bottom:1px solid #9a9a9a; padding:5px 10px 0px 10px; background-color:#ccc; font-weight:bold; font-size: 80%; height:30px; } .productBody { padding:10px; background-color: white; } .productImage { margin-left: auto; margin-right: auto; display: block; } .tp_5 .productBody, .st_5 { background-color : white; } </code></pre> <p><strong>Edit</strong></p> <p>While testing various thing like using flex, providing margins, doing refresh etc I realized that this overlap happens only when the list is loaded for the first time. When I go back to main page and remove it from container</p> <pre><code>hccontainer.remove(Ext.getCmp('ilid'), true); </code></pre> <p>and then again create and put it in container onTap event, it renders fine.</p> <p>Also overlapping happens only second item onwards, first item is always shown fully.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USThinkFloyd
    1. USThinkFloyd
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POList items partially overlapping each other most of the times
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POList items partially overlapping each other most of the times
      1. This table or related slice is empty.
      1. VTUpMod
    1. COAlso show us the CSS for the HTML in your template.
      singulars
      1. POList items partially overlapping each other most of the times
      1. USTitouan de Bailleul
    2. COHey TDeBailleul, I have added template and CSS. Also thanks for reminding me to accept some outstanding answers.
      singulars
      1. POList items partially overlapping each other most of the times
      1. USThinkFloyd
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload