Automatically resize input according to button size?

Question

I have an input and a button in the same div, and want them to be in a single line without any gap in between, regardless of screen size, but cannot get that to happen. The button seems to have a horizontal padding, although I set both padding and margin to none, so % wouldn't be a solution. Also, I would like the button to wrap around its contents, so even if it could work, it wouldn't be the greatest solution. Is there a way to set the location and size of the button and resize the input accordingly with CSS? Or is some JavaScript needed to do this?

Desired Output:

Current Output:

Current code (CSS is insignificant, as it doesn't work)

.chatinp {
  height: 10px;
  width: 100%;
  position: absolute;
  overflow: hidden;
  bottom: 0;
  right: 0;
  size: fixed;
  height: auto;
  border-top: solid;
}

#CHAT {
  font-family: monospace;
  font-size: 20px;
  position: relative;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 95%;
  background: none;
  border: solid 1px #fff;
  padding: none;
  margin: none;
}

#SEND {
  font-family: monospace;
  font-size: 20px;
  position: relative;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 10%;
  background-color: #090;
  border: solid 1px #fff;
  padding: none;
  margin: none;
}

<div class="chatinp">
  <input type="text" name="CHAT" id="CHAT">
  <button name="SEND", id="SEND">SEND</button>
</div>

How will the final output looks like ? Can you draw a picture or something please — Always Helping
– Always Helping, Commented Sep 17, 2020 at 12:48
@CBroe it will be better to use grid ryt? so that we can specify the required space for each item in it. — Sandrin Joy
– Sandrin Joy, Commented Sep 17, 2020 at 12:55
@SandrinJoy grid is basically the two-dimensional version, of what flexbox already offers for one single direction. But the problem here is only in one direction, the width; height does not come into play. So flexbox can do the job as well here. — C3roe
– C3roe, Commented Sep 17, 2020 at 13:13

SeeoX · Accepted Answer · 2020-09-17 14:24:30Z

1

You can use several tools to achieve that :

CSS property float (example below)
- will run even on old browser
- doesn't fit for complex use (in your case, that fine)
CSS Grid Layout
CSS Flex element

Float Example

.chatinp {
  height: 30px;
  width: 100%;
}

#CHAT, #SEND{
  box-sizing: border-box; /* permit the use of border and padding without overstepping the width */
  height: 100%; /* use all of the avaible height given by the parent */
  padding: none;
  margin: none;
  position: relative; /* needed for float */
  float: left; /* make element align from left to right, then top to bottom */
}

#CHAT {
  width: 85%;
  border: 3px solid grey;
}

#SEND {
  width: 15%;
  border: 3px solid green;
}

<div class="chatinp">
  <input type="text" name="CHAT" id="CHAT">
  <button name="SEND" id="SEND">SEND</button>
</div>

edited Sep 17, 2020 at 14:24

answered Sep 17, 2020 at 13:12

SeeoX

6024 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sachaandre · Accepted Answer · 2020-09-17 12:51:25Z

You might need to use flexboxes if I understood your demand.

I added display: flex on parent container (.chatnip) and flex : <value> on child elements to tell them how much space they should take.

There's no gap between the boxes.

.chatinp {
  height: 10px;
  width: 100%;
  position: absolute;
  overflow: hidden;
  bottom: 0;
  right: 0;
  size: fixed;
  height: auto;
  border-top: solid;
  display: flex
}

#CHAT {
  font-family: monospace;
  font-size: 20px;
  position: relative;
  bottom: 0;
  left: 0;
  height: 100%;
  background: none;
  border: solid 1px #fff;
  color: white;
  flex: 9;
}

#SEND {
  font-family: monospace;
  font-size: 20px;
  position: relative;
  bottom: 0;
  right: 0;
  height: 100%;
  background-color: #090;
  border: solid 1px #fff;
  color: white;
  padding: none;
  margin: none;
  flex: 1;
}

<div class="chatinp">
  <input type="text" name="CHAT" id="CHAT">
  <button name="SEND", id="SEND">SEND</button>
</div>

Nitheesh · Accepted Answer · 2020-09-17 12:53:11Z

Since you are making use of flexbox, try to make the most advantage of it. For chatinp class use display: flex and for #CHAT use flex: 1 if needed add a width for #SEND

.chatinp {
  width: 100%;
  position: absolute;
  overflow: hidden;
  bottom: 0;
  right: 0;
  border-top: solid;
  display: flex;
}

#CHAT {
  font-family: monospace;
  font-size: 20px;
  /* position: relative; */
  /* bottom: 0; */
  left: 0;
  height: 100%;
  /* width: 95%; */
  background: none;
  border: solid 1px #fff;
  padding: none;
  margin: none;
  flex: 1;
}

#SEND {
  font-family: monospace;
  font-size: 20px;
  /* position: relative; */
  /* bottom: 0; */
  /* right: 0; */
  /* height: 100%; */
  /* width: 10%; */
  background-color: #090;
  border: solid 1px #fff;
  padding: none;
  margin: none;
}

<div class="chatinp">
  <input type="text" name="CHAT" id="CHAT" />
  <button name="SEND" id="SEND">SEND</button>
</div>

Sandrin Joy · Accepted Answer · 2020-09-17 12:53:18Z

1

I prefer to use grid where you can specify how much portion and number of elements to be placed in a single row

div{
display:grid;
grid-template-columns:80vw auto;/*auto auto , if you don't need any specific space for the items*/
}

<div class="chatinp">
  <input type="text" name="CHAT" id="CHAT">
  <button name="SEND", id="SEND">SEND</button>
</div>

answered Sep 17, 2020 at 12:53

Sandrin Joy

1,17414 silver badges32 bronze badges

Comments

Qual09 · Accepted Answer · 2020-09-17 12:48:14Z

0

add these to your css: (and get rid of height: 100%; from #CHAT)

.chatinp {
  display: flex;
}

#CHAT {
  height: auto;
}

answered Sep 17, 2020 at 12:48

Qual09

841 silver badge6 bronze badges

Collectives™ on Stack Overflow

Automatically resize input according to button size?

5 Answers 5

Float Example

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Float Example

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related