CODEWITHSUNDEEP
css
koc
koc

Reputation: 955

How set textarea and 2 div in same line where textarea is responsible width but not overflow

I want to make my textarea like as facebook. Where in same line display a textarea, a upload icon and a emoticons icon.

Now, I want my textarea will be responsible width And 2 icon will be fixed 25px width.

Here is in my example fiddle textarea overflow my 2 icon But I want they will not be overflow.

How can it possible without CSS media query and div contenteditable?

Upvotes: 0

Views: 102

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

Your markup and style could be simplified

Fork: http://jsfiddle.net/s0e5ks6n/3/

CSS

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.maintbox {
    position:relative;
    width: 100%;
}

#frm textarea{
    min-height: 25px;
    border: 2px solid #ccc;
    width:100%;
    resize: none;
    margin: 0;
    padding-right:60px;
}

#right {
    position:absolute;
    top: 0px;
    right:0px;
    height: 35px;
    line-height: 35px;
    width: 60px;
    z-index:1;
}

#right img {
  cursor:pointer;
  vertical-align: middle;
}

Markup

<form action="" id="frm">
      <textarea placeholder="Type here..."> </textarea>

      <div id="right">
          <img src="https://cdn3....png" alt="" />
          <img src="http://s...png" />
     </div>
</form>

Final result

enter image description here

Upvotes: 1

Related Questions