CODEWITHSUNDEEP
javascriptjqueryhtmlcsssvg
Andrew Robinson
Andrew Robinson

Reputation: 258

Working out auto resizing text box with svg

I'm making a website, which is almost complete, I simply need to finish the contact section. I've made a cool little design for the inputs and they work well, for the most part. But now I'm making a textarea, which should be similar, but isn't. I am using the autosize plugin, just give it a quick google search and you will find out what it is. It does well in sizing the text box, though it makes it very weird with positioning. Alongside that, I'm making an attempt to resize the svg line animation that surrounds it along with the textarea. I've posted a codepen here. As you can see, the animation works well on the input box, but it doesn't work at all on the textarea box. I can make it animate on focus myself, but for now my worry lies with resizing to always just barely surround the textarea.

Here's some code:

<div class="svg-wrapper-input">
  <svg height="60" width="277" xmlns="http://www.w3.org/2000/svg">
    <rect class="shape-input" height="60" width="277" />
    </svg>
    <input class="text" placeholder="E-Mail Address">
    </input>
</div>

<div class="svg-wrapper-input">
    <svg class="textarea" height="200" width="277" xmlns="http://www.w3.org/2000/svg">
    <rect class="shape-input" height="200" width="277" />
    </svg>
    <textarea class="text message" placeholder="Message"></textarea>
</div>

body {
  background: #161616;
}

.shape-input {
    fill: transparent;
    stroke-dasharray: 279 394;
    stroke-dashoffset: 337;
    /*stroke-dasharray: 320;
    stroke-dashoffset: -474;*/
    stroke-width: 2px;
    stroke: #19f6e8;
    -webkit-animation: 0.8s draw-out-input ease forwards;
    -moz-animation: 0.8s draw-out-input ease forwards;
    -o-animation: 0.8s draw-out-input ease forwards;
    animation: 0.8s draw-out-input ease forwards;
}

.svg-wrapper-input {
    height: 60px;
    margin: 0 auto;
    padding: 5px 0;
    width: 277px;
    display: block;
    text-decoration: none;
}

input {
    outline: none;
    border: 0px;
    background: transparent;
    letter-spacing: 2px;
    padding-left: 25px;
    padding-right: 25px;
    width: 227px;
}

@keyframes draw-in-input {
    0% {
        stroke-dasharray: 279 394;
        stroke-dashoffset: -337;
    }
    100% {
        stroke-dasharray: 760;
        stroke-dashoffset: 0;
    }
}

@keyframes draw-out-input {
    0% {
        stroke-dasharray: 760;
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dasharray: 279 394;
        stroke-dashoffset: -336;
    }
}

.svg-wrapper:hover .shape {
    -webkit-animation: 0.5s draw-in ease forwards;
    -moz-animation: 0.5s draw-in ease forwards;
    -o-animation: 0.5s draw-in ease forwards;
    animation: 0.5s draw-in ease forwards;
}

.input-active {
    -webkit-animation: 0.8s draw-in-input ease forwards;
    -moz-animation: 0.8s draw-in-input ease forwards;
    -o-animation: 0.8s draw-in-input ease forwards;
    animation: 0.8s draw-in-input ease forwards;
}

.text {
    color: #fff;
    font-family: 'Montserrat';
    font-size: 16px;
    letter-spacing: 8px;
    line-height: 60px;
    position: relative;
    top: -64px;
    margin: 0;
}

textarea {
    border: 0;
    outline: none;
    background: transparent;
    padding-left: 25px;
    letter-spacing: 2px !important;
    padding-right: 25px;
    padding-top: 25px;
    width: 227px;
    top: -202px !important;
    resize: none;
    overflow: auto;
    line-height: 20px !important;
}

$(".svg-wrapper-input > input").focus(function () {
    $( this ).siblings("svg").children(".shape-input").toggleClass("input-active");
});

$(".svg-wrapper-input > input").focusout(function () {
    $( this ).siblings("svg").children(".shape-input").toggleClass("input-active");
});

autosize($('textarea'));
$('.message').keydown(function(){
    var msgHeight = $('.message').height();
    $('.textarea').attr( 'height', msgHeight );
    $('.textarea > .shape').attr( 'height', msgHeight );
});

EDIT: For some reason autosize is not working in codepen demo, if you want to see it in action, here's a link to the actual site.

ANOTHER EDIT: I got the codepen to work, I also updated the code so It looks nicer, but still does not work right. Please help.

Upvotes: 0

Views: 502

Answers (1)

Matt Kenefick
Matt Kenefick

Reputation: 1206

There are a few things wrong here... well, not necessarily wrong, but not working together. One is the positioning of the textarea combined with the wrapper. It's getting the sizing correct, but you're forcing it out of position.

Highlight the element with the code inspector and watch what it does. You'll see the size seemingly change properly but it's out of position which makes it seem off. The fix for that would be a position change.

Scroll all the way down in the CSS to see the changes. http://codepen.io/mattkenefick/pen/LZWYQZ

/**
 * Modifications to make it fit
 */
.svg-wrapper-input {
  position: relative;
}

.svg-wrapper-input textarea {
  position: absolute;
  top: 0 !important;
}

Make the absolute environment revolve arond the wrapper and force the textarea to the top. There are many ways to skin this cat, but this should do the trick.

Upvotes: 1

Related Questions