CODEWITHSUNDEEP
htmlcss
Neabfi
Neabfi

Reputation: 4741

Keep float element at the bottom

There is my code : https://jsfiddle.net/a4Le1jkz/.

HTML

<div class="form-container">
<form action="#" method="#" id="form">
    <input type="image" src="http://image.noelshack.com/fichiers/2015/34/1439918200-send.png" alt="Send" id="send" class="send" />
    <div class="twrap">
        <textarea name="message" id="message" rows=1></textarea></div>
   </form>
</div>

CSS

.form-container {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    position: absolute;   
    width: 100%; 
    color: white; 
    top: auto;
    bottom: 0; 
    overflow: hidden; 
    padding: 10px;
}
.form-container .twrap {
    overflow: hidden;
    padding-right: 10px;
}

.form-container textarea {
    width: 100%;
    height: 30px;
    line-height: 30px;
    max-height: 120px;
    font-size: 1.2em;
    resize : none;
}

.form-container .send {
    padding: 3px;
    height: 30px;
    float: right;
}

I'd like to keep the image at the bottom of the textarea even though the user presses Enter. The textearea has to continue to adjust its width.

The image is floating so I don't know how to keep it at the bottom.

Upvotes: 4

Views: 132

Answers (4)

Yandy_Viera
Yandy_Viera

Reputation: 4380

Using flexbox you will easily achieve what you want like this:

/*!
	Autosize 3.0.8
	license: MIT
	http://www.jacklmoore.com/autosize
*/
! function (e, t) {
    if ("function" == typeof define && define.amd) define(["exports", "module"], t);
    else if ("undefined" != typeof exports && "undefined" != typeof module) t(exports, module);
    else {
        var o = {
            exports: {}
        };
        t(o.exports, o), e.autosize = o.exports
    }
}(this, function (e, t) {
    "use strict";

    function o(e) {
        function t() {
            var t = window.getComputedStyle(e, null);
            "vertical" === t.resize ? e.style.resize = "none" : "both" === t.resize && (e.style.resize = "horizontal"), u = "content-box" === t.boxSizing ? -(parseFloat(t.paddingTop) + parseFloat(t.paddingBottom)) : parseFloat(t.borderTopWidth) + parseFloat(t.borderBottomWidth), i()
        }
        function o(t) {
            var o = e.style.width;
            e.style.width = "0px", e.offsetWidth, e.style.width = o, v = t, l && (e.style.overflowY = t), n()
        }
        function n() {
            var t = window.pageYOffset,
                o = document.body.scrollTop,
                n = e.style.height;
            e.style.height = "auto";
            var i = e.scrollHeight + u;
            return 0 === e.scrollHeight ? void(e.style.height = n) : (e.style.height = i + "px", document.documentElement.scrollTop = t, void(document.body.scrollTop = o))
        }
        function i() {
            var t = e.style.height;
            n();
            var i = window.getComputedStyle(e, null);
            if (i.height !== e.style.height ? "visible" !== v && o("visible") : "hidden" !== v && o("hidden"), t !== e.style.height) {
                var r = document.createEvent("Event");
                r.initEvent("autosize:resized", !0, !1), e.dispatchEvent(r)
            }
        }
        var r = void 0 === arguments[1] ? {} : arguments[1],
            d = r.setOverflowX,
            s = void 0 === d ? !0 : d,
            a = r.setOverflowY,
            l = void 0 === a ? !0 : a;
        if (e && e.nodeName && "TEXTAREA" === e.nodeName && !e.hasAttribute("data-autosize-on")) {
            var u = null,
                v = "hidden",
                f = function (t) {
                    window.removeEventListener("resize", i), e.removeEventListener("input", i), e.removeEventListener("keyup", i), e.removeAttribute("data-autosize-on"), e.removeEventListener("autosize:destroy", f), Object.keys(t).forEach(function (o) {
                        e.style[o] = t[o]
                    })
                }.bind(e, {
                    height: e.style.height,
                    resize: e.style.resize,
                    overflowY: e.style.overflowY,
                    overflowX: e.style.overflowX,
                    wordWrap: e.style.wordWrap
                });
            e.addEventListener("autosize:destroy", f), "onpropertychange" in e && "oninput" in e && e.addEventListener("keyup", i), window.addEventListener("resize", i), e.addEventListener("input", i), e.addEventListener("autosize:update", i), e.setAttribute("data-autosize-on", !0), l && (e.style.overflowY = "hidden"), s && (e.style.overflowX = "hidden", e.style.wordWrap = "break-word"), t()
        }
    }
    function n(e) {
        if (e && e.nodeName && "TEXTAREA" === e.nodeName) {
            var t = document.createEvent("Event");
            t.initEvent("autosize:destroy", !0, !1), e.dispatchEvent(t)
        }
    }
    function i(e) {
        if (e && e.nodeName && "TEXTAREA" === e.nodeName) {
            var t = document.createEvent("Event");
            t.initEvent("autosize:update", !0, !1), e.dispatchEvent(t)
        }
    }
    var r = null;
    "undefined" == typeof window || "function" != typeof window.getComputedStyle ? (r = function (e) {
        return e
    }, r.destroy = function (e) {
        return e
    }, r.update = function (e) {
        return e
    }) : (r = function (e, t) {
        return e && Array.prototype.forEach.call(e.length ? e : [e], function (e) {
            return o(e, t)
        }), e
    }, r.destroy = function (e) {
        return e && Array.prototype.forEach.call(e.length ? e : [e], n), e
    }, r.update = function (e) {
        return e && Array.prototype.forEach.call(e.length ? e : [e], i), e
    }), t.exports = r
});
autosize($('#message'));
.form-container {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    position: absolute;
    width: 100%;
    color: white;
    top: auto;
    bottom: 0;
    overflow: hidden;
    padding: 10px;
}
#form {
    display: flex;
    align-items: flex-end;
}
.form-container .twrap {
    overflow: hidden;
    padding-right: 10px;
    flex-grow: 1;
}
.form-container textarea {
    width: 100%;
    height: 30px;
    line-height: 30px;
    max-height: 120px;
    font-size: 1.2em;
    vertical-align: middle;
    resize : none;
}
.form-container .send {
    padding: 3px;
    height: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-container">
    <form action="#" method="#" id="form">
        <div class="twrap">
            <textarea name="message" id="message" rows=1></textarea>
        </div>
        <input type="image" src="http://image.noelshack.com/fichiers/2015/34/1439918200-send.png" alt="Send" id="send" class="send" />
    </form>
</div>

Here a working jsfiddle to play with.

Upvotes: 2

Beauceron
Beauceron

Reputation: 624

You have to place the .send in position: absolute; bottom:10px; right:15px

and set the width of the textarea to make sur they don't overlap.

Here a update to your JsFiddle: https://jsfiddle.net/a4Le1jkz/1/

Edit: here a update: https://jsfiddle.net/a4Le1jkz/7/ i set width: 100% to the textarea and i add to the .twrap padding-right equal to the place i need for the image at the right.

Upvotes: 3

War10ck
War10ck

Reputation: 12508

Are you set on using float: right or would you be open to display: inline-block;. With a little tweaking, I was able to get this to work using the display option. 

/*!
	Autosize 3.0.8
	license: MIT
	http://www.jacklmoore.com/autosize
*/
!function(e,t){if("function"==typeof define&&define.amd)define(["exports","module"],t);else if("undefined"!=typeof exports&&"undefined"!=typeof module)t(exports,module);else{var o={exports:{}};t(o.exports,o),e.autosize=o.exports}}(this,function(e,t){"use strict";function o(e){function t(){var t=window.getComputedStyle(e,null);"vertical"===t.resize?e.style.resize="none":"both"===t.resize&&(e.style.resize="horizontal"),u="content-box"===t.boxSizing?-(parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)):parseFloat(t.borderTopWidth)+parseFloat(t.borderBottomWidth),i()}function o(t){var o=e.style.width;e.style.width="0px",e.offsetWidth,e.style.width=o,v=t,l&&(e.style.overflowY=t),n()}function n(){var t=window.pageYOffset,o=document.body.scrollTop,n=e.style.height;e.style.height="auto";var i=e.scrollHeight+u;return 0===e.scrollHeight?void(e.style.height=n):(e.style.height=i+"px",document.documentElement.scrollTop=t,void(document.body.scrollTop=o))}function i(){var t=e.style.height;n();var i=window.getComputedStyle(e,null);if(i.height!==e.style.height?"visible"!==v&&o("visible"):"hidden"!==v&&o("hidden"),t!==e.style.height){var r=document.createEvent("Event");r.initEvent("autosize:resized",!0,!1),e.dispatchEvent(r)}}var r=void 0===arguments[1]?{}:arguments[1],d=r.setOverflowX,s=void 0===d?!0:d,a=r.setOverflowY,l=void 0===a?!0:a;if(e&&e.nodeName&&"TEXTAREA"===e.nodeName&&!e.hasAttribute("data-autosize-on")){var u=null,v="hidden",f=function(t){window.removeEventListener("resize",i),e.removeEventListener("input",i),e.removeEventListener("keyup",i),e.removeAttribute("data-autosize-on"),e.removeEventListener("autosize:destroy",f),Object.keys(t).forEach(function(o){e.style[o]=t[o]})}.bind(e,{height:e.style.height,resize:e.style.resize,overflowY:e.style.overflowY,overflowX:e.style.overflowX,wordWrap:e.style.wordWrap});e.addEventListener("autosize:destroy",f),"onpropertychange"in e&&"oninput"in e&&e.addEventListener("keyup",i),window.addEventListener("resize",i),e.addEventListener("input",i),e.addEventListener("autosize:update",i),e.setAttribute("data-autosize-on",!0),l&&(e.style.overflowY="hidden"),s&&(e.style.overflowX="hidden",e.style.wordWrap="break-word"),t()}}function n(e){if(e&&e.nodeName&&"TEXTAREA"===e.nodeName){var t=document.createEvent("Event");t.initEvent("autosize:destroy",!0,!1),e.dispatchEvent(t)}}function i(e){if(e&&e.nodeName&&"TEXTAREA"===e.nodeName){var t=document.createEvent("Event");t.initEvent("autosize:update",!0,!1),e.dispatchEvent(t)}}var r=null;"undefined"==typeof window||"function"!=typeof window.getComputedStyle?(r=function(e){return e},r.destroy=function(e){return e},r.update=function(e){return e}):(r=function(e,t){return e&&Array.prototype.forEach.call(e.length?e:[e],function(e){return o(e,t)}),e},r.destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],n),e},r.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],i),e}),t.exports=r});
autosize($('#message'));
.form-container {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    position: absolute;   
    width: 100%; 
    color: white; 
    top: auto;
    bottom: 0; 
    overflow: hidden; 
    padding: 10px;
}
		
.form-container .twrap {
    overflow: hidden;
    padding-right: 10px;
    display: inline-block;
    width: 90%;
}

.form-container textarea {
    width: 100%;
    height: 30px;
    line-height: 30px;
    max-height: 120px;
    font-size: 1.2em;
    vertical-align: middle;
    resize : none;
}

.form-container .send {
    padding: 3px;
    height: 30px;
    display: inline-block;
    vertical-align: bottom;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-container">
    <form action="#" method="#" id="form">
        <div class="twrap">
            <textarea name="message" id="message" rows=1></textarea>
        </div><input type="image" src="http://image.noelshack.com/fichiers/2015/34/1439918200-send.png" alt="Send" id="send" class="send" />
   </form>
</div>

The following changes were made:

HTML:

The <div class="twrap"> was moved before the input.

CSS:

display: inline-block; and width: 90% were added to the .form-container .twrap CSS.

display: inline-block; and vertical-align: bottom; were added to the .form-container .send CSS. In addition, float: right; was also removed from this CSS.

Upvotes: 2

shadowfox
shadowfox

Reputation: 505

Personally, I would just use a table instead of divs. The table cell can have a vertical-align:bottom CSS value.

<div class='form-container'>
    <form action="#" method="#" id="form">
        <table style='width:100%'>
            <tr>
                <td class="twrap"><textarea name="message" id="message"></textarea></td>
                <td style='vertical-align:bottom'><input type="image" src="http://image.noelshack.com/fichiers/2015/34/1439918200-send.png" alt="Send" id="send" class="send" /></td>
            </tr>
        </table>
    </form>
</div>

Upvotes: 0

Related Questions