ben03 Posted April 6, 2018 Share Posted April 6, 2018 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! Link to comment Share on other sites More sharing options...
dsonesuk Posted April 6, 2018 Share Posted April 6, 2018 https://www.w3schools.com/code/tryit.asp?filename=FQ490XSFBW8U Link to comment Share on other sites More sharing options...
ben03 Posted April 6, 2018 Author Share Posted April 6, 2018 Thank you, this is well considered! help is much appreciated Link to comment Share on other sites More sharing options...
dsonesuk Posted April 6, 2018 Share Posted April 6, 2018 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. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now