Databases
StackOverflow2013
Postsdbo
POJQueryUi accordion overlapping page footer when accordion is expanded
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJQueryUi accordion overlapping page footer when accordion is expanded
    primarykey
    data
    text
    <p>I have a JQueryUI accordion that is going below my footer when the accordion is expanded. Here is my screen shot. <img src="https://i.stack.imgur.com/Yrvx1.png" alt="Footer issue"></p> <p>Normally the footer stays at the bottom of the page but when the accordions are expanded they go below the footer line.</p> <p>Here is the footer code</p> <pre><code> &lt;div id="divfooter"&gt; &lt;div id="containerfooter"&gt; &lt;div id="divfooter1" class="floatleft textleft"&gt; &lt;h5 class="textwhite"&gt;Need Help ?&lt;/h5&gt; &lt;a href="http://support.somewhere.com/" target="_blank" class="textgrey"&gt;Browse the Knowledge Base&lt;/a&gt; &lt;br /&gt; &lt;a href="http://users.com/downloads/Support/QuickSupport.exe" target="_blank" class="textgrey"&gt;Remote Support&lt;/a&gt; &lt;/div&gt; &lt;div id="divfooter2" class="floatleft textleft"&gt; &lt;h5 class="textwhite"&gt;Phone COUNTRY COUNTRY PHONE&lt;/h5&gt; &lt;a href="mailto:Please help me with the following problem:" class="textgrey"&gt;Email Support&lt;/a&gt; &lt;br /&gt; &lt;a href="../Home/Contact" class="textgrey"&gt;Contact&lt;/a&gt; &lt;/div&gt; &lt;div id="divfooter3" class="floatleft textleft"&gt; &lt;h5 class="textwhite"&gt;Licensing and Terms&lt;/h5&gt; &lt;a href="../Home/SubscriptionDetails" class="textgrey"&gt;Your Subscription details&lt;/a&gt; &lt;br /&gt; &lt;a href="../Home/Terms" class="textgrey"&gt;Terms and Conditions&lt;/a&gt; &lt;/div&gt; &lt;div id="divfooter4" class="floatleft textcenter textwhite"&gt; &lt;h6&gt;Copyright © 1998 - &lt;script type="text/javascript"&gt;var d = new Date(); document.write(d.getFullYear()); &lt;/script&gt; . All Rights Reserved.&lt;/h6&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>And the CSS</p> <pre><code>#divfooter { position:absolute; bottom:0; width:1080px; height:120px; /* Height of the footer */ background:#191814; /*left:-0px;*/ } #containerfooter { width: 1080px; margin: 0px auto; padding: 10px; } </code></pre> <p>Here is the scripts for the accordion</p> <pre><code>&lt;script type="text/javascript"&gt; $(function () { $("#accordion,#accordion1, #accordion2, #accordion3 ").accordion({ collapsible: true, active: 0 });//active 0 makes the first div default to open // Hover states on the static widgets $("#dialog-link, #icons li").hover( function () { $(this).addClass("ui-state-hover"); }, function () { $(this).removeClass("ui-state-hover"); } ); }); $(function () { $("#subAccordion").accordion({ collapsible: true, active: false }); // Hover states on the static widgets $("#dialog-link, #icons li").hover( function () { $(this).addClass("ui-state-hover"); }, function () { $(this).removeClass("ui-state-hover"); } ); }); &lt;/script&gt; </code></pre> <p>My accordions are 4 accordions with the last having a sub-accordion. In other pages the footer is fine. The page will simply push the footer down if there is more content than screen height. How can I get it to do this on the page with the accordions?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USWillNZ
    1. USWillNZ
    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. COCan you post the code for the accordions?
      singulars
      1. POJQueryUi accordion overlapping page footer when accordion is expanded
      1. USapaul
    2. COHi @apaul34208, The code for the accordions are the same as the code from here http://jqueryui.com/accordion/ I wont post it as they are huge
      singulars
      1. POJQueryUi accordion overlapping page footer when accordion is expanded
      1. USWillNZ
    3. COdoes the js look like this: `$(function() {$( "#accordion" ).accordion();});` ?
      singulars
      1. POJQueryUi accordion overlapping page footer when accordion is expanded
      1. USapaul
 

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