Databases
StackOverflow2013
Postsdbo
POshow/hide with CSS
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POshow/hide with CSS
    primarykey
    data
    text
    <p>Hello<br> I'm making a mailbox for my website and I want it to show/hide with CSS3 I know there are few tutorial etc on how to do it, but I tried to do it a bit differently. I'm getting a good result, however there is one issue. When I hover on an item the item<code>:hover</code> height are not changing together with the text: </p> <p><strong>styles.css:</strong> </p> <pre><code>.mailbox_item { width: 440px; height: 20px; margin: 0 auto; border-bottom: 1px solid #ccc; overflow: hidden; } .mailbox_item:hover { min-height: 100px; overflow: visible; display: block; -webkit-transition: all 0s ease-in-out; -moz-transition: all 0s ease-in-out; -o-transition: all 0s ease-in-out; -ms-transition: all 0s ease-in-out; transition: all 0s ease-in-out; } .mailbox_item_top { min-height: 20px; line-height: 13px; } .mailbox_item_body { min-height: 20px; } </code></pre> <p><strong>item.php</strong> </p> <pre><code>&lt;div class="mailbox_item"&gt; &lt;div class="mailbox_item_top"&gt; &lt;h2 class="titleannouncement"&gt;Test Announcement&lt;/h2&gt; &lt;span class="mail_author"&gt;0&lt;/span&gt; &lt;/div&gt; &lt;div class="mailbox_item_body"&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus lacinia dui at mattis. Donec vitae tellus congue leo egestas tincidunt a eget lorem. Fusce et varius velit. In sollicitudin porta arcu, vel convallis mauris varius ut. Aenean id risus a ante mattis bibendum. Sed mollis ipsum ac metus fringilla eget imperdiet urna laoreet. Quisque tincidunt, purus eu vulputate pulvinar, metus arcu malesuada ante, vitae vehicula ipsum lectus ac libero. Cras in ligula at urna tincidunt tempor. Nam sodales lectus a sem sodales congue. Suspendisse ut ultricies nunc. Aenean blandit tempor ipsum lacinia tincidunt. Mauris ut ipsum non dolor luctus volutpat. Cras quis enim at lacus placerat dictum ut et elit. Vestibulum porta varius dui, rutrum gravida orci semper sit amet. Nam ornare iaculis velit, sit amet euismod felis pulvinar et. Nam sed ipsum eget elit adipiscing tristique.&lt;/p&gt; &lt;/div&gt; &lt;div class="newsdate"&gt; &lt;span class="newsdatetext"&gt;2011-04-30 06:54:05&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>and here is what I'm getting:</p> <p><a href="http://filmuz.com/test.PNG" rel="nofollow">Normal state</a> - this is as intended</p> <p>on :hover - the <code>min-height</code> value in mailbox_item:hover stays the same and doesn't get higher when the text gets bigger</p> <p><a href="http://filmuz.com/test1.PNG" rel="nofollow">on Hover</a></p> <p>I know that I can use <code>overflow:hidden;</code> so the text wont overlap the other window but I wanted to show that there is more text. How can I force the <code>min-height</code> value to change if there is more text? </p> <p>thanks in advance</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USandyb
    1. USTomasz Golinski
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POshow/hide with CSS
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POshow/hide with CSS
      1. USTomasz Golinski
      1. VTFavorite
    1. COThe provided HTML does not match the screen shots you have linked. Could you edit the HTML in your question to include the "Contact Us" line as well please?
      singulars
      1. POshow/hide with CSS
      1. USandyb
    2. COIf you could post a [JS Fiddle demo](http://jsfiddle.net/) that demonstrates/reproduces your problem that'd be appreciated, and useful.
      singulars
      1. POshow/hide with CSS
      1. USDavid Thomas
    3. CO[Here is a demo](http://jsfiddle.net/CFEKD/) of the problem as I understand it. Please amend if this is not correct.
      singulars
      1. POshow/hide with CSS
      1. USandyb
 

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