Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Floated elements remain part of the normal flow of a web page. Therefore, when you expand <code>panelMenu</code> and the height overlaps with <code>&lt;p:schedule&gt;</code>'s parent box, it will affect the position of <code>&lt;p:schedule&gt;</code> and it will cause it to move. The overlap does happen even though you're not seeing it. So, one thing you can do to prevent that is to take <code>panelMenu</code> out of the normal flow of the page by using <code>absolute</code> positioning (within a <code>relative</code> positioned box).</p> <p><strong>Note</strong>: There is no <code>id</code> with the value <code>visits</code> on the xhtml provided. Therefore, I'm going to assume that the rule given was actually for <code>div id="visitsRegisterSecretary"</code> and I have changed <code>#visits</code> to <code>#visitsRegisterSecretary</code> in the CSS. </p> <p>All you have to do is wrap your <code>accordionPanel</code> within the two divs below </p> <pre><code>&lt;div id="panelMenuContainer"&gt; &lt;div id="panelMenu"&gt; &lt;h:form&gt; &lt;p:accordionPanel activeIndex="false"&gt; &lt;p:tab title="#{msg.manage}"&gt; &lt;!--Remainder ommitted --&gt; &lt;/p:accordionPanel&gt; &lt;/h:form&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>and then define the following rules in your stylesheet </p> <pre><code>#panelMenuContainer { position:relative; } #panelMenu { position: absolute; left: 880px; width: 180px; } </code></pre> <p>The <code>left</code> property will cause <code>panelMenu</code> to move accordingly. </p> <p><strong>Additional Notes</strong>: </p> <ol> <li>I'm just guessing the value of <code>left</code> in <code>#panelMenu</code> so change as needed. </li> <li>Also, you can remove the <code>padding-top</code> rule in <code>#visitsRegisterSecretary</code> if you want both <code>&lt;h:forms&gt;</code> to align correctly (assuming that's what you're after).</li> </ol> <p>You can refer to these links for a more in-depth explanation</p> <p><a href="http://css-tricks.com/all-about-floats/" rel="nofollow">All about floats</a></p> <p><a href="http://css-tricks.com/absolute-positioning-inside-relative-positioning/" rel="nofollow">Absolute positioning inside relative positioning</a></p>
 

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