Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><s>I believe you're looking for <a href="http://www.w3schools.com/cssref/pr_pos_overflow.asp" rel="nofollow noreferrer"><code>overflow: auto</code></a> property. Take a look at this <a href="http://jsfiddle.net/uZhq3/" rel="nofollow noreferrer">fiddle</a>.</p> <p>If you want to achieve the scrollbar like on sample image, you'll have to play around with css, <a href="http://css-tricks.com/custom-scrollbars-in-webkit/" rel="nofollow noreferrer">here</a> is tutorial on how to apply custom style to scrollbar.</p> <p>Btw, if you want to make popup window, you might want to look at <a href="http://fancybox.net/" rel="nofollow noreferrer">Fancybox</a>, which, in my opinion, looks really good and most of work is already done! The only downside might be that you have to use it with jQuery, but it's already used on most of the webpages today.</s></p> <hr> <p><strong>Edit</strong></p> <p>When I've looked at page source, I found the problem in less than a minute. The content of your popup div isn't scrolling to the bottom, it stops for some reason.</p> <p>This question is similar: <a href="https://stackoverflow.com/questions/6258178/bottom-content-cutoff-using-overflow-auto-and-jscrollpane">Bottom content cutoff using overflow: auto; and jscrollpane</a></p> <p>Try and put this code in JavaScript console (<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + (<kbd>J</kbd> in Chrome, <kbd>K</kbd> in Firefox):</p> <pre><code>$("#popupLocations .jspPane").css("top","-800px") </code></pre> <p>It scrolls down to the bottom where it should. I know that this doesn't solve your problem just yet, but I think I've found a solution (I'm not sure because I can't test it myself). But if you look at that other question, the solution is using <code>autoReinitialise:true</code>. You can try it right away by running this in JavaScript console:</p> <pre><code>$('.popupLocations').jScrollPane({ showArrows: true, horizontalGutter: 10, autoReinitialise:true } ); </code></pre> <p>Of course you'll have to put it in your file where you're initializing jScrollPane if you want it to work correctly every time you refresh the page.</p> <p>And why do you have 2 <code>$(document).ready(function()...)</code> and 2 <code>$(function()...</code> (which is the same) definitions in your file? You should put all the code in one function, which will be called when the DOM is loaded. And for the sake of your users UX, try to reduce the images and files, also try to avoid using millions of different js plugins. It took me almost 11s (according to network profiler) to load for the first time and I have 100Mb/s uplink, I can't imagine someone with mobile internet. The webpage makes over 100 requests, a lot of them are 1x1px pngs. If all that is really necessary, you might want to look into compressing and bundling. It depends on what back-end framework you'll be using. I can say that ASP.NET MVC 4 provides very simple bundle manager but I'm sure that PHP or rails provide something similar.</p>
    singulars
    1. This table or related slice is empty.
    1. PODynamically changing the height of a div based on content
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USCommunity
    1. USMarko Grešak
    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. This table or related slice is empty.
    1. COSorry, but that wasn't what I was talking about. I have already achieved the scroll bar effect. That sample image is the one I have created. The DIV is not dynamically changing the height so that it can take in more content from the HTML Document Element. If you look at my sample image, you will see at the bottom where the text is being cutoff, and the scroll bar is not shrinking as to accommodate for such. I need to make it so that the text is not cutoff, and I will not need to go back and forth to change the margin/padding tediously as so.
      singulars
      1. PO
      1. USzsyed92
    2. COAnd yes, thank you for the Popup Window info. But the screenshot is already a popup window, so thus, I have also achieved that as well.
      singulars
      1. PO
      1. USzsyed92
    3. COOh sorry, I thought the link was from some random page... Thanks for correcting the link name, it makes much more sense now. For the popup window, I know that you have it but fancybox auto resizes and does all the work for you, you'll just have to add the content.
      singulars
      1. PO
      1. USMarko Grešak
 

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