Adaptive input width css

Question

I'm having a problem with the text input, can it be made 'adaptive'? If I add the input are width, there will be too much unnecessary space in the left side. Again, if it's not wide enough, you can't see the whole input.

        input[type="text"]{
        max-width: 50px;
        border: none;
        background: transparent;
        font-size: 20px;
        color: whitesmoke;
        padding: 5px;
        font-weight: bold;
        }

<input type="text" id="answer5" disabled="disabled"/>

Is there a way to make the area 'adaptive'? So if the answer is just 1, the text in the right is closer to the number, and if the answer is longer, you could see the whole answer.

thanks

@MDHesari added a small explanation; Is there a way to make the area 'adaptive'? So if the answer is just 1, the text in the right is closer to the number, and if the answer is longer, you could see the whole answer. — Daniel
– Daniel, Commented Feb 23, 2020 at 21:53
Is there a reason you're not using a span? Why the input field as it is disabled? — Robin V.
– Robin V., Commented Feb 23, 2020 at 21:53
@RobinV. That just prints the calculation of inputs that you have given beforehand. — Daniel
– Daniel, Commented Feb 23, 2020 at 22:08

Andy Hoffman · Accepted Answer · 2020-02-23 21:58:48Z

1

You can handle this using a flex container and flex-grow: 1 for the child element which should take up the most available space.

.container {
  display: flex;
  align-items: center;
}

.container [type="text"] {
  flex-grow: 1;
  margin: 0 .5em;
}

input[type="text"] {
  border: none;
  background: transparent;
  padding: 5px;
  font-weight: bold;
  border: 1px solid #333;
  padding: .5em.75em;
}

<div class="container">
  <label for="textInput" class="first">The following number:</label>
  <input type="text" id="textInput">
  <span class="result">is numeric</span>
</div>

jsFiddle

answered Feb 23, 2020 at 21:58

Andy Hoffman

19.2k5 gold badges50 silver badges68 bronze badges

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

Comments

Mohamad Fazel Hesari · Accepted Answer · 2020-02-23 21:56:23Z

0

do not use max-width and instead use width with percent or px. that will make the element adaptive.

answered Feb 23, 2020 at 21:56

Mohamad Fazel Hesari

1168 bronze badges

Comments

Robin V. · Accepted Answer · 2020-02-23 22:16:57Z

0

You can set the default width to correspond with that of 1 character (depends on font-settings). Then update on every keypress:

$(".answer").keypress(function() {
  this.style.width = ((this.value.length + 1) * 12) + 'px';
})

JSFiddle

If you don't enter data into the field manually but set it through code, you can use change. This will work for both situations but will only visible when focus is not on the input-field anymore:

$(".answer").change(function() {
    this.style.width = ((this.value.length + 1) * 12) + 'px';
})

edited Feb 23, 2020 at 22:16

answered Feb 23, 2020 at 22:09

Robin V.

1,55219 silver badges31 bronze badges

Collectives™ on Stack Overflow

Adaptive input width css

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related