Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Based on your fiddle, I see that there are a few errors that need to be handled correctly.</p> <p>First, changing the <code>display</code> value of an element will have the same result as readding the element, why no transitions will ever be triggered. To solve this, you will need to make sure that the <code>input</code> has the same display value both before and after focus (for example <code>block</code> in this case).</p> <p>Secondly, you are adding transitions to the container div and not the actual input element that you are changing the height of. Transitions are not inherited if that is what you are assuming. You should thus move the transition to <code>.name</code> instead.</p> <p>Thirdly, animation should only be applied between to distinct values, especially when working with input elements who have a tendency to render rather strange between different browsers. In this case, you can for example set the height of <code>.name</code> to <code>1em</code> or similar.</p> <p>Lastly, for some reason you first set the height of <code>.pullDown</code> to 150px, but then you immediately after overwrites this to 276px. If you want the div to change size when the field is in focus, this is not the way to do this (actually, it's currently not possible to select the parent of an element with CSS). Comma separated selectors are entirely disjunct from each other. A solution to this can be to replace the <code>height</code> attribute with a <code>min-height</code>. This will ensure that the div expands to fit the form if it grows larger than the div.</p> <p><a href="http://jsfiddle.net/ZVjQG/4/" rel="nofollow">Here's a fiddle to help you out</a></p> <p>Hopefully this will help!</p>
    singulars
    1. This table or related slice is empty.
    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.
 

Querying!

 
Guidance

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