Allow styling of the Hint div itself

[ghost]

Describe the solution you'd like I'd like an option that allows us to further style the Hint component itself, currently, I don't see a way of doing it so it remains at the fixed width which doesn't fit the current styling of my page

Describe alternatives you've considered Tried wrapping it around with a div to style the width

[ejmudi]

You could place the Hint component in a container div and specify the width you want on the container div.

The Hint component will have the same width with your container.

[ghost]

@ejmudi Not really a solution. As shown in this example

<div className={style.test}>
  <Hint options={options} allowTabFill={true}>
    <input
    value={formik.values.company}
    onChange={formik.handleChange}
    className={style.inputGeneral}
    name="company"
    type='text'
    />
  </Hint>
</div>

Wrapping the Hint in a div with this class

.test {
  background-color:black;
  width: 200%
}

Results in this

The idea is for the Hint input to match the input above it

[smartoryu]

You could place the Hint component in a container div and specify the width you want on the container div.

The Hint component will have the same width with your container.

I see you already putting an inline style with 100% width on the input, but the div wrapper with className "rah-input-wrapper" is not so the width from our own div is not inherited. Should I fix it for you?

@ejmudi Not really a solution. As shown in this example

<div className={style.test}>
  <Hint options={options} allowTabFill={true}>
    <input
    value={formik.values.company}
    onChange={formik.handleChange}
    className={style.inputGeneral}
    name="company"
    type='text'
    />
  </Hint>
</div>

Wrapping the Hint in a div with this class

.test {
  background-color:black;
  width: 200%
}

Results in this

The idea is for the Hint input to match the input above it

My current workaround is overwriting the style using the same className this wrapper used (rah-input-wrapper)

[ejmudi]

@smartoryu Sure, you can please go ahead and create a PR.

[ejmudi]

This is mostly likely resolved now by https://github.com/ejmudi/react-autocomplete-hint/pull/32 Closing!