Adjusting height of InputGroup

[Redirts]

Environment

• Package version(s): N/A
• Browser and OS versions: N/A

Question

What is the proper/correct way to define the height of an InputGroup/TextInput box
I am using style={{height.. but not sure the best way since when I use right and left icons on the input box they don't center vertically...

[adidahiya]

Usually when applying custom styling directly to Blueprint components, the built-in styles may need further adjustment to support all the flexible layout features (like right and left icons centering vertically). Can you explain your use case a little more? Are you looking for an input / textarea to fill a container vertically (that may be its own FR)?

[Redirts]

In order to respect the UI guidelines for our app we need to adjust the height of the InputGroup boxes so that their height is higher than the default height. We are not using text areas.

I created a sandbox to show how I am currently tweaking the height. I exaggerated the height a bit to show the problem with the icons:

https://codesandbox.io/s/blueprint-sandbox-rnq2v

[adidahiya]

In order to respect the UI guidelines for our app we need to adjust the height of the InputGroup boxes so that their height is higher than the default height.

Given that you wish to deviate from the Blueprint design guidelines, you will need to do some more work to customize all the input styling to support your use case. Unfortunately we cannot guarantee that there will not be breaking changes in Blueprint's CSS styles if you do so. Instead of using style={{ height: ... }}, I would recommend creating a custom class, e.g. .my-tall-blueprint-input:

.my-tall-blueprint-input-group {
  > .bp3-icon:first-child {
    height: 100%;
    margin: 0;
    padding: 17px 5px;
  }

  // more customization...
}

[Redirts]

Hi @adidahiya

Thanks for the help. I will try this out. I was already going to use a custom class to do it but for the example I didn't see the point.

Anyway, IMHO I think that these icons should by default in Blueprint CSS be aligned 50% vertically so that it is compatible with input height change.

I understand the Blueprint guidelines are there to ensure consistency with other UI components but there will always be exceptions...for example that is why you provide the large modifiers/props on certain components.

[giladgray]

@Redirts if you are committed to changing base values in BP components, i might suggest compiling the scss yourself and changing the variables directly. $pt-input-height, etc. there are no good docs (https://blueprintjs.com/docs/#core/classes.namespacing is the closest) but i'm doing this currently at my new job 😄