2

I have a react-toolbox input component with type "number" as following:

<Input
    type="number"
    step="0.01"
    value={itemValue}
    onChange={this.handleInputChange.bind(this, item)}
/>

It displays 2.68

enter image description here

So, is it possible to display it as 2.68% inside the input field

enter image description here

Also, the "%" suffix should be kept displayed whenever the value changes.

Kartal Erkoc
  • 290
  • 1
  • 6
  • 12

1 Answers1

1

React-toolbox's <Input /> is a div with a plain <input> tag as a child - you could always just use some CSS to get what you want, add the appropriate className to your usage of the component.

.rt-input-input {
  position: relative;
  display: inline-block;
}

.rt-input-input::after {
  content: '%';
  font-family: sans-serif;
  width: 1em;
  height: 1em;
  position: absolute;
  top: 50%;
  right: 5px;
  
  transform: translateY(-50%);
}
<div class="rt-input-input">
  <input type="text" value="2.68" />
</div>

Note this won't work on regular input tags, as they have no before/after pseudo-elements

Kartal Erkoc
  • 290
  • 1
  • 6
  • 12
casraf
  • 21,085
  • 9
  • 56
  • 91
  • As react-toolbox's input component class is `.rt-input-input` ; by changing `.input` to `.rt-input-input` in proposed solution solved the problem. Thanks. – Kartal Erkoc Dec 20 '17 at 13:40
  • Ah yes, sorry, I'm just used to CSS modules where you give zero effs about the actual class name :) – casraf Dec 20 '17 at 15:40