Question

I’ve got an issue with my responsive textarea. It works fine (across different sizes) until the user tries to expand the form (I’ve currently got it locked in size with a height/max-height/width/max-width combo). Is there a solution to this? What am I doing wrong – haven’t seen this issue before.

Album –
https://i.stack.imgur.com/x7Cgt.jpg

Website –
http://pxlprfct.co.uk/

Html

<textarea name="message" id="message" placeholder="Message"></textarea>

Css

form{
    border: none;
    outline: none;
    text-align: center;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    background: black;

    /*Android Hack*/
    margin-top: -1px;
    padding-bottom: 2em;
}

    #message
{
    border: none;
    outline: none;
    color: black;

    display: block;
    background: white;
    padding: 1em;
    margin: auto;
    font-size: 1em;
    margin-bottom: 1em;
    font-family: 'Open Sans', sans-serif;

    height: 12em;
    max-height: 12em;

    width: 70%;
    max-width: 70%;

}

Sorry about the messy code – it’s all been hacked together quickly! 🙂
Thanks in advance!

http://jsfiddle.net/qfYQN/1/

Answer 1

I can’t think of a solid resolution to this issue.

The way I see it, you have two options: Disable the resize css property or use some javascript to reset the margin to auto when the user resizes the box.

css:

 resize:none;

jquery:
Unfortunately there is not an event listener for a text box resizing so this would be the simplest method:

 $('#message').mouseup(function(){
    $(this).css('margin', 'auto');  
 });

http://jsfiddle.net/WLBde/

Otherwise you could set an interval that checks the width of the text box every X seconds and if it is different then reset the margins like above.

Hope this helps!