[Toolbar] Text Inputs inside of a Toolbar will extend below the input

[jmuel]

Specifically, the Input's description will be completely below the toolbar. I'm not sure if it's correct to create a new element for this or to add options to the existing Input element.

The overflow here is the "The summoner you wish to look up" text.

[jmuel]

Hmm, looking through the google specs, this might be best as a search bar. I didn't see any search bar components already done, I might try my hand at building one.

[fourcube]

+1

@jmuel are you working on this one already?

[jmuel]

I didn't get started on it because I wasn't sure what the direction on it should be. If anyone's interested in this I can probably get it done quickly, I just need to know what other people would find valuable. IIRC this was the behavior I was looking at.
http://www.google.com/design/spec/patterns/search.html#search-in-app-search

[fourcube]

Yes, that is exactly what I would expect of a SearchField. I have worked around this by applying a custom css class on top of the TextField inside my search bar.

[shaurya947]

@jmuel @fourcube trying to clean up some stale issues. What's the status on this?

[fourcube]

@shaurya947, since I was able to fix it with CSS in my project it's no longer an issue for me.

[Sabst]

@fourcube could you please share your workaround?

[fourcube]

I applied an additional CSS class (.search) to the <TextField /> element. I'm not 100% sure, but I think the problem was related to the line-height of mui-text-field-hint. It should be the same as the height of the surrounding mui-text-field.

Less:

.search {

  &.mui-text-field {
    height: 64px;
    width: auto;
  }

  div.mui-text-field-hint {
    line-height: 64px;
    padding-top: 2px;
  }
}

[Sabst]

Thanks!
The similar workaround I applied in the meantime is to wrap the text-field in a dedicated row of the grid layout.