Html Question posted in
Some basic documentation can be found here.

Html – <input> font size keeps changing its width

So basically I have this

#calculator {
  background-color: #212121;
  border-radius: 10px;
  overflow: hidden;
  display: inline-block;
}

#functionality {
  width: 100%;
  height: 100%;
  margin: 15px 5px 5px 15px;
  overflow: hidden;
}

#display_calc {
  max-width: 91%;
  width: 91%;
  height: 70px;
  background-color: #1a1a1a;
}

#display {
  min-width: 100%;
  max-width: 100%;
  height: 100%;
  font-size: 50px;
  background-color: rgba(0, 50, 0, 5);
  color: white;
  border: none;
}
<div id="calculator">
  <div id="functionality">
    <div id="display_calc">
      <input id="display">
    </div>
  </div>
</div>

When I change the font size from display, the width gets very wide. I tried many things but nothing helps.

I tried putting many restrictions to the divs but the max width of the input does not work.

Tags:

3

Answers


  1. 0

    As far as I understood your question, I think you are using min-width and max-width for #display. That is something wrong I see. Simply use width : 100%. Also include box-sizing property as a good practice.

    #display {
  width: 100%;
  height: 100%;
  font-size: 50px;
  background-color: rgba(0, 50, 0, 5);
  color: white;
  border: none;
  box-sizing: border-box;
}

    Try this and let me know if it helps. Thanks

    Login or Signup to reply.
  2. 0

    If you’re trying to fit the input to screen width, removing display: inline-block; from #calculator worked fine.
    But If you wanna keep display inline you can add width: 100%; to #calculator

    Login or Signup to reply.
  3. 0

    The combination of inline-block and percentage width is what create the issue. You need to define a width (or max-width on the inline-block element)

    #calculator {
  background-color: #212121;
  border-radius: 10px;
  display: inline-block;
  width: 100%; /* or max-width: 100%; */
}

#functionality {
  margin: 15px 5px 5px 15px;
}

#display_calc {
  height: 70px;
  background-color: #1a1a1a;
}

#display {
  max-width: 100%;
  height: 100%;
  font-size: 50px;
  background-color: rgba(0, 50, 0, 5);
  color: white;
  border: none;
}
    <div id="calculator">
  <div id="functionality">
    <div id="display_calc">
      <input id="display">
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search