Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I checked your site, which btw is pretty nice, to check the sizing problem. I noticed some things so, here are my suggestions and explanation.</p> <p>The fancybox behaves like a container div so it adjusts to the children divs contents. <code>fancybox-skin</code> has two immediate children divs <code>fancybox-outer</code> and <code>fancybox-title fancybox-title-inside-wrap</code></p> <pre><code>&lt;div class="fancybox-skin" style="padding: 0px; width: auto; height: auto;"&gt; &lt;div class="fancybox-outer"&gt; &lt;div class="fancybox-inner" style="overflow: visible; width: 493px; height: 323px;"&gt; &lt;img class="fancybox-image" src="/photos/Places/Garden of the Gods/IMG_0345.jpg" alt=""&gt; &lt;/div&gt; &lt;a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class="fancybox-title fancybox-title-inside-wrap" style="height: auto;"&gt; ... &lt;/div&gt; &lt;/div&gt; </code></pre> <p>The <code>fancybox-title fancybox-title-inside-wrap</code> has <code>height: auto;</code> set. So it keeps adjusting to comments given inside it, by increasing its height, which causes problems to your image height. To fix this set its style as <code>height: 200px;</code>. Try to put <code>!important</code> if it does not work. Since all this is dynamic, check css and javascript both.</p> <p><strong>Update</strong></p> <p>As per your comment, height is set to auto every time you call fancybox.update(). So you need to modify your fancybox options, to prevent auto resizing. Here is what you can do :</p> <pre><code>$("a.yourlink").fancybox({ 'width' : 500, 'height' : 200, 'autoScale' : false, //if using older fancybox 'autoSize' : false, //if using newer fancybox 'autoDimensions' : false, }); </code></pre> <p>You should look into the options given <a href="http://fancyapps.com/fancybox/#docs" rel="nofollow">here</a> for fancybox 2.0+ . </p>
    singulars
    1. This table or related slice is empty.
    1. POFancybox Resize to fit content, without title
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USuser568109
    1. USuser568109
    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. PO
      1. This table or related slice is empty.
      1. VTBountyClose
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThis works to fix the initial re-sizing problem. If I set the title div to height:0px !important; then the picture resizes appropriately as I would like it to do. However, when I set the height to auto afterwards in order to expand the div to fit the content, then the entire thing resizes again. If I turn off auto-sizing, and manually call an update and then set the title height to auto, it still resizes, even though resizing was turned off. It seems that $.fancybox.update(); turns auto-resizing on again or something?
      singulars
      1. PO
      1. USJoe Cole
    2. COThank for taking a look at this question even though it did not solve the problem. I have awarded the bounty anyway. If you do have other ideas that work, post a new answer, and if it solves the problem, I will add much more bounty.
      singulars
      1. PO
      1. USSamuel Liew
    3. COThat is unfortunate that height gets set to auto each time fancybox.update() is called. I would love to just ignore auto resizing, but I need it to size correctly at first, then show the title, then prevent any further auto sizing... and it doesn't seem any of the current fancybox options allow that.
      singulars
      1. PO
      1. USJoe Cole
 

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