Question

I have a button :

<a  data-role="button" data-transition="none"
data-theme="b" onclick="ShowInput();" data-icon="forward" data-iconpos="left">
</a>

By clicking on the button, the input slide down:

function ShowInput() {
    $('#IdIn').slideDown("slow");
}

My input:

<input placeholder="xxx" name="NameIn" id="IdIn" value="" type="text">

The slidedown works, but do not see the placeholder ‘xxx’ of the input

why?

Answer 1

The problem here is that the placeholder disappears if the input element is not big enough to contain it. And it doesn’t reappear if you should change the height later, and this is what is happening when you use slideDown().

I’m not sure if this is a chrome-specific bug, or if the behaviour is expected. However, it seems to work if you redraw the element by removing the style attribute when the animation is complete: http://jsfiddle.net/QYp9Y/

$('#IdIn').slideDown("slow", function() {
    $(this).removeAttr('style').show();
});