Databases
StackOverflow2013
Postsdbo
POSnap container width to width of number of visible thumbnails?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSnap container width to width of number of visible thumbnails?
    primarykey
    data
    text
    <p>See my site here: <a href="http://www.element17.com" rel="nofollow">http://www.element17.com</a>. It may be desirable to change to a different album than the default in order to have more thumbnails available. The <em>Paris</em> album has the most images in it.</p> <p>If you click the "Show Photo Grid" button in the very bottom-right, you'll see the photo/thumbnail grid I've contrived. </p> <p>Right now it scales with the viewport, and I'd like it to continue to do so, but instead of smoothly increasing in size with the viewport I'd like it to only be as wide as the number of thumbnails that currently fit in the viewport, so that there's no empty whitespace to the right of the number of displayed thumbnails. I'd like it to remain 20px from the right of the viewport with any empty space being displayed on the left. </p> <p>How can this be accomplished?</p> <p>The current code follows:</p> <p><strong>HTML</strong></p> <pre><code>&lt;div id="grid_outer"&gt; &lt;div id="grid_inner"&gt; &lt;div class="grid_thumb button"&gt; &lt;span class="thumb_title"&gt;TITLE&lt;/span&gt; &lt;img class="thumb_image" src="image.jpg" alt="TITLE"&gt; &lt;/div&gt; &lt;div class="grid_thumb button"&gt; &lt;span class="thumb_title"&gt;TITLE2&lt;/span&gt; &lt;img class="thumb_image" src="image2.jpg" alt="TITLE2"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>CSS</strong></p> <pre><code>#grid_outer {display:none; position:absolute; background-color:rgba(0,0,0,0.75); right:20px; left:20px; bottom:60px; padding:20px 10px 10px 20px; border-radius:20px; max-height:480px; overflow:hidden;} .grid_thumb {position:relative; float:left; margin:0 10px 10px 0; width:150px; height:150px;} .thumb_image {position:absolute; top:0; left:0; border-radius:5px;} .thumb_title {position:absolute; bottom:0px; left:0px; z-index:100; padding:8px; background:#000; border-radius:0 5px 0 5px;} .button {cursor:pointer;} </code></pre> <p>So I've discovered that if I set the width of <code>#grid_outer</code> to <code>auto</code>, it will behave how I want if there's less than one row of thumbnails, but will stretch to the far left side of the viewport if there is more than one row of items. Can anyone help?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USNaOH
    1. USNaOH
    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
    1. VO
      singulars
      1. POSnap container width to width of number of visible thumbnails?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POSnap container width to width of number of visible thumbnails?
      1. USNaOH
      1. VTBountyStart
    3. VO
      singulars
      1. POSnap container width to width of number of visible thumbnails?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI would venture to say that because element queries don't exist, there's not a way (at least that I know of) to do it with purely CSS. Are you opposed to using JS to do it?
      singulars
      1. POSnap container width to width of number of visible thumbnails?
      1. USChad
 

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