How do I auto resize the display text to fit the textbox, because some longer text do not display completely, please help with a solution, I have tried width="auto" but it didn't work. Here's my code:
<form style="width: 1000px; padding-left: 20px;" method = "POST" action = "addprocess.php"> <fieldset style="border: solid 1px; padding: 0 10px 10px 10px;"> <legend align="center" style="width: auto !important; border: none;">Semester Courses</legend><br> <label style="font-family: verdana; font-size: 27px;">Please select one elective course from the options below</label> <div class="row"> <label style="font-family: verdana; font-size: 25px;"> Electives </label> <div class="col-auto"> <div class="input-group"> <input type="text" id="display" class="form-control" aria-label="Text input with dropdown button" readonly width="auto"> <div class="input-group-btn"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Click to Select </button> <div class="dropdown-menu dropdown-menu-right"> <button type="button" class="dropdown-item" value="Evolutionary Ecology">BIOL 8803</button> <div role="separator" class="dropdown-divider"></div> <button type="button" class="dropdown-item" value="Advanced Evolutionary Biology">BIOL 8805</button> <div role="separator" class="dropdown-divider"></div> <button type="button" class="dropdown-item" option value="Evolutionary Genetics">BIOL 8809</button> </div> </div> </div> </div> </div> <br><br> <button class="btn btn-primary" type="submit">Submit</button>         <button class="btn btn-primary" type="reset">Reset</button> </fieldset> </form> <script type="text/javascript"> var buttons = document.querySelectorAll('.dropdown-item') var textbox = document.getElementById('display') for (let i=0; i < buttons.length; i++) { buttons[i].addEventListener("click", function(e) { textbox.value = e.target.value }) } </script> 
