Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Automatically Resize Input According To Button Size?

Post a Comment
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

Solution 1:

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;
}
<divclass="chatinp"><inputtype="text"name="CHAT"id="CHAT"><buttonname="SEND"id="SEND">SEND</button></div>

Solution 2:

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;
}
<divclass="chatinp"><inputtype="text"name="CHAT"id="CHAT"><buttonname="SEND", id="SEND">SEND</button></div>

Solution 3:

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;
}
<divclass="chatinp"><inputtype="text"name="CHAT"id="CHAT" /><buttonname="SEND"id="SEND">SEND</button></div>

Solution 4:

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*/
}
<divclass="chatinp"><inputtype="text"name="CHAT"id="CHAT"><buttonname="SEND", id="SEND">SEND</button></div>

Solution 5:

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

.chatinp {
  display: flex;
}

#CHAT {
  height: auto;
}

Post a Comment for "Automatically Resize Input According To Button Size?"