Q-Input Strange Behavior Height Change IOS



  • If I set the height of q-input in the class & input-class I can get the input to look the way I want it to. However, when I select the input number field to start typing, a larger blue border appears:

    6338e13b-e669-4362-b656-98406df6fa75-image.png

    2ba77690-8bea-4feb-a7f8-a51e97ce57c5-image.png

    Here’s the component:

    <template>
      <div>
        <q-input
          class="number-picker"
          input-class="number-picker-input"
          v-model="number"
          hide-bottom-space="true"
          dense
          outlined
          rounded
          bg-color="neutral"
          items-aligned
          pattern="[0-9]*"
          maxlength="3"
        />
      </div>
    </template>
    
    <script>
    export default {
      props: ['number'],
      watch: {
        number: function (newNumber, oldNumber) {
          this.$emit('number-changed', newNumber)
        }
      }
    }
    </script>
    
    <style>
    .number-picker {
      width: 50px;
      height: 30px;
      font-size: 13px;
    }
    .number-picker-input {
      height: 30px;
      text-align: center;
    }
    </style>
    
    

    Any tips?


Log in to reply