Databases
StackOverflow2013
Postsdbo
POHow can I have a fixed top banner inside a jquery ui dialog?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I have a fixed top banner inside a jquery ui dialog?
    text
    copied!<p>I currently have a jq ui dialog opening with the size of 875x600. I have a top banner with some info that I would like to keep in that fixed position while the user scrolls the content of the dialog. The dialog is also moveable, so the banner has to obviously stay with it.<br> Here is the banner code if you need it. grid_14 is 820px</p> <pre><code>&lt;div class="row" id="PatientHeader"&gt; &lt;div class="grid_14 patientNameHeader"&gt; &lt;div class="column grid_14"&gt; &lt;h2&gt;lastname, firstname&lt;/h2&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="grid_14 patientInfoHeader"&gt; &lt;div class="column grid_6"&gt; &lt;h2&gt;&lt;i&gt;HICN:&lt;/i&gt;&lt;br&gt;&lt;/h2&gt; &lt;/div&gt; &lt;div class="column grid_4"&gt; &lt;h2&gt;&lt;i&gt;DOB:&lt;/i&gt;&lt;br&gt; mm/dd/yyyy&lt;/h2&gt; &lt;/div&gt; &lt;div class="column grid_4"&gt; &lt;h2&gt;&lt;i&gt;Sex:&lt;/i&gt;&lt;br&gt;Female&lt;/h2&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Thanks! </p> <p><strong>UPDATE:</strong><br> I got it staying put with the following code, but if the user moves the dialog or uses the up/down keys, the banner stays in the viewport and not with the dialog. </p> <pre><code>#PatientInfoHeader { background-color: rgba(1, 1, 1, 0.8); box-shadow: 0 0 8px 0 #000000; color: rgba(1, 1, 1, 0.8); height: 138px; padding-top: 0; position: fixed; top: 95px; width: 840px; z-index: 9999; } #ClaimsWrapper{width: 840px; position: absolute;} #ClaimsContent{position: relative; top: 120px;} </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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