Dynamically resize width of textbox with screen size using javascript

Question

I have a textbox(input control) which I want to resize as per screen size using javascript. Is their a way to do it. Thanks for the help.

I have tried giving static width using document.getElementById, but not able to resize it dynamically as per webpage size.

Devashish · Accepted Answer · 2019-07-08 06:47:13Z

2

This code will set the width of the input equal to the width of the screen (dynamic and on resize):

$(document).ready(function() {
      var windowWidth = window.innerWidth
      $('#myInput').width(windowWidth)
      $(window).resize(function() {
        windowWidth = window.innerWidth
        $('#myInput').width(windowWidth)
      })
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="myInput">

answered Jul 8, 2019 at 6:47

Devashish

1,3102 gold badges11 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ishaan Gupta Over a year ago

Thank you very much. It helps alot, just one question though when applying "window.innerwidth" it's adding a scroll bar as the control width is to the size of window. Is their a way to correct this, maybe assigning width equal to some other control?

Devashish Over a year ago

Yes.. if you want to make the scroll bar disappear, just subtract some small amount from the windowWidth variable. For example, try this: var windowWidth = window.innerWidth - 100. Adjust the 100 according to your liking and until the scroll bar has disappeared. There are also many more methods to make it disappear.

Devashish Over a year ago

@ishaanGupta Also, you're welcome. Please mark the answer as "accepted" if it worked for you! Thanks!

ishaan Gupta Over a year ago

Code works perfectly, just a small addition i did according to my requirement, was instead of setting width equal to window, I assigned width of another textbox "var windowWidth = $("#input2").width()" to it so both of them are in perfect sync while resizing the window. Still Thank you very much for guiding me through the process.

Collectives™ on Stack Overflow

Dynamically resize width of textbox with screen size using javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related