CODEWITHSUNDEEP
htmlcss
pythonian 23
pythonian 23

Reputation: 395

Automatically resize input according to button size?

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:

Desired Output

Current Output:

Gap in buttonButton going to the next line

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>

Upvotes: 1

Views: 1104

Answers (5)

SeeoX
SeeoX

Reputation: 604

You can use several tools to achieve that :

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>

Upvotes: 1

Sandrin Joy
Sandrin Joy

Reputation: 1169

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>

Upvotes: 1

Nitheesh
Nitheesh

Reputation: 19986

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>

Upvotes: 1

sachaandre
sachaandre

Reputation: 21

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>

Upvotes: 1

Qual09
Qual09

Reputation: 84

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

.chatinp {
  display: flex;
}

#CHAT {
  height: auto;
}

Upvotes: 0

Related Questions