CODEWITHSUNDEEP
javascripthtml
Sinla
Sinla

Reputation: 37

Resizing a textbox to fit text

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;">&emsp;Electives&ensp;</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>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
    <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>

Upvotes: 0

Views: 2413

Answers (2)

OwChallie
OwChallie

Reputation: 15559

Another option is to change the width of the textbox after you assign a value to it.

textbox.style.width = textbox.scrollWidth + 'px';

This option will not reset, however and will remain the size of the largest text selected.

Upvotes: 0

brk
brk

Reputation: 50291

You can do it by setting the size attribute.

 textbox.setAttribute('size',e.target.value.length);


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
    textbox.setAttribute('size', e.target.value.length);

  })
}
<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;">&emsp;Electives&ensp;</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>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
    <button class="btn btn-primary" type="reset">Reset</button>
  </fieldset>
</form>

Upvotes: 2

Related Questions