Databases
StackOverflow2013
Postsdbo
POCSS3 columns two item behavior
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS3 columns two item behavior
    primarykey
    data
    text
    <p>Edit: Well this is weird. I was toying around with it and found that if extend the margin to make a .blockData GREATER than 400px (the width of my columns) then it would add the second item underneath as expected. Otherwise it appends the second item to the right of the first creating the unexpected result. I am satisfied with the answer, but it does seem to be a bit of a hack :/. If anyone has an explanation for the behavior below, I would certainly love to hear it.</p> <p>Alright I nearly have what I need thanks to the fine folks at stackoverflow. I have been trying to get CSS3 columns to do my bidding. The problem is actually on chrome. In the following page if there is more than three <code>.blockdata</code> divs in my columned <code>.maincontent</code> container <code>div</code> then it acts as expected, but if there are only two <code>.blockdata</code> divs in it then it ignores my columns and puts them side by side. This only happens in chrome (I have tested with firefox and IE 10) and only with two items. I have posted a fiddle so you can see what I mean.</p> <p><strong>Demo:</strong> <a href="http://jsfiddle.net/NMZhU/" rel="nofollow">http://jsfiddle.net/NMZhU/</a></p> <p>I have a number of divs inside the maincontent div that look like:</p> <pre><code>&lt;div class="blockData"&gt; &lt;a class="listData" href="#"&gt;Activity11&lt;/a&gt; &lt;a class="listDelete" href="#"&gt;&lt;img width="30px" src="http://localhost/view/images/Delete.png"/&gt;&lt;/a&gt; &lt;a class="listEdit" href="#"&gt;&lt;img width="30px" src="http://localhost/view/images/Settings.png"/&gt;&lt;/a&gt; &lt;/div&gt; </code></pre> <p>With css:</p> <pre><code>#mainContent /* The containing div */ { position: absolute; top: 50px; bottom: 50px; margin: 10px; column-width: 400px; -webkit-column-width: 400px; -moz-column-width: 400px; -webkit-column-break-inside : avoid; -moz-column-break-inside : avoid; column-gap: 10px; -webkit-column-gap: 10px; -moz-column-gap: 10px; } .blockData /* The divs inside are all of this class */ { position: relative; width: 380px; height: 30px; padding: 4px; margin: 0px 0px 10px 0; border: 4px outset grey; background: lightgrey; display: inline-block; } </code></pre> <p>If you delete all the .blockData divs except two then you will see my unexpected behavior (in Chrome only). If there is no way around this then I understand, but I want to be sure before I settle for this.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USuser2227713
    1. USuser2227713
    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. This table or related slice is empty.
    1. VO
      singulars
      1. POCSS3 columns two item behavior
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. COwhich version of Chrome? It seems to be working fine for me in Chrome 30.
      singulars
      1. POCSS3 columns two item behavior
      1. USHarry
    2. COIf it is fixed in Chrome 30 then it is probably a bug then.
      singulars
      1. POCSS3 columns two item behavior
      1. USuser2227713
    3. CONormally I go to the About Google Chrome (chrome://chrome) page to check for updates. My current version (as it says) is 30.0.1581.2.
      singulars
      1. POCSS3 columns two item behavior
      1. USHarry
 

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