Search code examples
htmlcsscss-grid

Force image to bottom of column when using grid with CSS

I am using a grid with two columns for a chat input box similar to Apple's iphone. The left column has a div for text and grows upward as text expands. However I would like the image in the right hand column to stay anchored to the bottom as shown in picture below but currently, it is anchored (and rises) to the top as you add text and the box expands.

enter image description here

Evidently I can't use position for the image as that does not play well with grid. (Position removes the item from the grid.) I really like Grid cause it has solved the problem of keeping the image to the right, but have this one remaining issue.

How can I keep the image at the bottom of the grid column?

CSS:

.inputContainer {
border-radius: 20px;
  min-height: 30px;
  width: 300px;
  padding: 8px 15px;
  margin-top: 5px;
  margin-bottom: 5px;
  border: solid 2px #EEE;
  display: inline-block; 
position: fixed;
  bottom: 10px;
display: grid; grid-template-columns: 260px 40px;//USING GRID HERE
}
.inputBoxInner {
border-radius: 20px;
  min-height: 30px;
  width: 240px;
  margin-top: 0px;
  margin-bottom: 0px;
height:" auto";
display: inline-block; 
}

html:

<div class = "inputContainer" contentEditable="true"><div class="inputBoxInner" id="newmessage" contenteditable="true" data-placeholder="Start typing"></div><img src="/images/up-arrow-blue-75.png" width="30" height="30  style="float:right;" onclick="sendMessage();"></div></div>

Thanks in advance for any suggestions.

Solution

  • You should use the align-self and justify-self rules on your <img> element.

    Here, I've removed the inline float: right and set the "icon" class on this image. Then I'm using this class to target it in CSS and set its position to bottom-right with value "end" for both those rules.

    .inputContainer {
  border-radius: 20px;
  min-height: 30px;
  width: 300px;
  padding: 8px 15px;
  margin-top: 5px;
  margin-bottom: 5px;
  border: solid 2px #EEE;
  display: inline-block;
  position: fixed;
  bottom: 10px;
  display: grid;
  grid-template-columns: 260px 40px; //USING GRID HERE
}

.inputBoxInner {
  border-radius: 20px;
  min-height: 30px;
  width: 240px;
  margin-top: 0px;
  margin-bottom: 0px;
  height: " auto";
  display: inline-block;
}

.inputContainer .icon {
  align-self: end;
  justify-self: end;
}
    <div class="inputContainer" contentEditable="true">

  <div class="inputBoxInner" id="newmessage" contenteditable="true" data-placeholder="Start typing">
    sample long text sample long text sample long text sample long text sample long text sample long text sample long text sample long text sample long text sample long text
  </div>
  <img class="icon" src="https://s3.amazonaws.com/pics.freeicons.io/uploads/icons/png/4953436661577436996-512.png" width="30" height="30" onclick="sendMessage();">
  
</div>