Jump to content
ben03

Can Input field fill remaining width?

Recommended Posts

Hi,

  I am attempting to create a form control with an input field in the centre, and plus/minus buttons either side. The buttons have an absolute position set so they remain at either edge of the parent container, with the input (ideally) adjusting in with to make up the remaining width. Only in practice it doesn't. I can't really set a width to the input as it needs to adjust the width to for different screen widths. The code: 

 

.responsive-container{position: relative; width: 100%;}

.minus-button{position: absolute; left: 0; width: 40px;}

input{position: absolute; left: 40px; right: 40px; width: auto;}

.plus-button{position: absolute; right: 0; width: 40px;}
<div class="responsive-container">
	<a class="minus-button">-</a>
	<input>
	<a class="plus-button">+</a>
</div>

 

Hopefully you can see what I am trying to achieve here. If I set the input to 100% width, it goes beyond the container because it has been budged by 40px. Setting it's width to auto doesn't seem to fill the space correctly. Any pointers here appreciated!

Share this post


Link to post
Share on other sites

You should never consider using position: absolute; it removes these elements from flow of the remaining elements, and usually causes more issues later on.

The 3px padding and negative 3px margin are the same as the border width + padding of the input element. By using width: 100% these property sizes are added as a addition to 100& width, causing scrollbars to appear. The same size negative margin counteracts this increased width.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×