Avoid enlarge the text box height when key in value

user_12708003 0
Viewed 49

My problem is the text box height is changed when I key in the text/value inside the text box. And I don't want to. Here is my code

<div class="twoColumnsSettings">
  <div>
    <label>Voltage</label><br>
    <input class="textBox" type="text" value="6.00" />
  </div>
  <div>
    <label>Voltage Limit</label><br>
    <input class="textBox" type="text" value="6.00" />
  </div>
  <div>
    <label>Current</label><br>
    <input class="textBox" type="text" value="6.00" />
  </div>
  <div>
    <label>Current Limit</label><br>
    <input class="textBox" type="text" value="6.00" />
  </div>
</div>

.twoColumnsSettings {
  display: grid;
  grid-row-gap: 8%;
  grid-template-columns: 50% 50%;
  width: 80%;
  margin: 0 auto;
  padding-left: 5%;
  text-align: left;
}

.textBox {
  width: 87.5%;
  height: 100%;
  font-size: 1.8vw;
}

.dropDownbox {
  width: 87.5%;
}

I set the height/Width in % is I want the size changes when the window/app size is changing.

css html
1 Answers

You can use VH and VW properties for size. (Responsive Units)

Viewport Height (vh) — This unit is based on the height of the viewport. A value of 1vh is equal to 1% of the viewport height.

Viewport Height (vh) — This unit is based on the height of the viewport. A value of 1vh is equal to 1% of the viewport height.

* Viewport = the browser window size. If the viewport is 50cm wide, 1vw = 0.5cm.

Example:

*{
  padding:0px;
  margin:0px;
}
#test{
  background-color:black;
  width:100vw;
  height:100vh;
}
<div id="test">
</div>


It attains full width and height of viewport
Make sure to add,

<meta name="viewport" content="width=device-width, initial-scale=1.0">

A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling.

user_109155340
Related