CODEWITHSUNDEEP
htmlcss
ProfK
ProfK

Reputation: 51063

How to expand input to take remaining room in a div

I would like to create a dropdown that drops down a custom panel (div) instead of a list of options. That panel is irrelevant because it is not tied to the layout I am asking about. For the basic drop-down look I have the following:

<style>
    .folder-selection {
        width: 100%;
    }
    .dropdown-button {
        float: right;
    }
</style>

    <div id=container>
        <input type="text" class="folder-selection" />
        <button type="button" class="dropdown-button">...</button>
    </div>

Now I know the float and width 100% are not right, but I have a container div, with an input on the left and a button on the right. The button must remain fixed to the right of the input. If the container is narrow, the input must be narrow, and vice versa, but I want to achieve this without knowing at design time the width of the container.

The container should fit into any width and the input's width should adjust accordingly. Just like a normal select element, where the text portion always fills all the space not taken by the dropdown icon/button at its right.

Upvotes: 1

Views: 1921

Answers (3)

Himanshu Gupta
Himanshu Gupta

Reputation: 561

Below example will help you. Let me know, if you don't want fixed width icon in right so I'll update this code accordingly.

#container {
	position: relative;
	border: 1px solid #ccc;
	padding: 5px 40px 5px 5px;
	margin: 0 0 10px;
}
.folder-selection {
	width: 100%;
	padding: 5px;
	border: none;
	box-sizing: border-box;
	height: 30px;
}
.dropdown-button {
	position: absolute;
	top: 5px;
	right: 5px;
	height: 30px;
}
<div id=container>
 <input type="text" class="folder-selection" />
 <button type="button" class="dropdown-button">...</button>
</div>

Upvotes: 2

Cons7an7ine
Cons7an7ine

Reputation: 738

<style>
.dropdown-button {
    width: 16px;  /*Set width of button*/
}

.folder-selection {
    width: calc(100% - 16px); /*div's width minus button's width*/
}
</style>

<div id=container>
    <input type="text" class="folder-selection" /><!-- this comment is to remove white space between the two elements
--><button type="button" class="dropdown-button">...</button>
</div>

You don't really have to set the width of the button as long as you know its width on runtime.

Upvotes: 1

sajee
sajee

Reputation: 245

This code will help you to position your elements as you expected. 

* {
  box-sizing: border-box;
}

.dropdown-container {
  width: 500px;
  display: table;
  background: orange;
}

.dropdown-container .input-container {
  display: table-cell;
}

.dropdown-container .input-container input {
  width: 100%;
  padding-right: 10px;
}

.dropdown-container .button-container {
  display: table-cell;
  width: 150px;
}

.dropdown-container .button-container button {
  width: 100%;
}
<div class="dropdown-container">
  <div class="input-container">
    <input type="text" class="folder-selection" />
  </div>
  <div class="button-container">
    <button type="button" class="dropdown-button">Drop</button>
  </div>
</div>

Upvotes: -1

Related Questions