Material-design-lite: Full width search (as in MD spec)

Created on 13 Jul 2016 · 4Comments · Source: google/material-design-lite

The MDL search should behave as desceribed in the MD styleguide - please see examples here.

I've already seen the issue #192 which has been closed. The "layout demo page" mentioned there is not available (404). I don't see there also any solution. I think we should consider reopening it.

Such component like examples shown in the MD spec would be not only "nice to have" but rather an important feature. For now an existing one is buggy (sometimes overlaps other objects when width is small). It's also limited - it doesn't give a nice user experience when write long phrases inside. My comments are about the trunk version.

It would be really great to have something like this example (an animated GIF demo).

In meantime could you please advice how to make the existing solution 100% width (I mean "search" as in examples here)? I tried simple CSS modifications, but I'm not sure that there is some easy way to do it.

The issue #192 has been closed with annotation that it could be reopened. Could you please back to this topic?

Source

baldram

Most helpful comment

As an FYI we will be implementing Full-Width text fields as in

as part of #4479. So when we ship that you could do something like what's done on https://design.google.com/icons/ e.g.

screen shot 2016-07-14 at 15 19 30

traviskaufman on 14 Jul 2016

👍5

All 4 comments

We can address this post-V2 launch. While it is important, doing this _well_ is also its own challenge. We could perhaps squeeze it in pre-launch if things fall together.

V1 won't be getting this kind of thing, it is up to developers to build on their own. If you want to see how this can be implemented in V1 you can try reverse-engineering the implemetation I built here. While I am using completely custom components, the implementation itself will work just fine in V1 (since it is nearly a direct-port of what I did have under V1.)

Garbee on 14 Jul 2016

👍1

@Garbee Thank you. Your argumentation is absolutely right. "Own" solution in this case is ok.
To avoid inventing the wheel I wanted to ensure first how to handle this issue. Then I will try to analyse and use your solution or I will build it directly in GWT since I use MDL in this context.
The search feature "done well" in V2 would be definitely an advantage.
Thanks!

baldram on 14 Jul 2016

As an FYI we will be implementing Full-Width text fields as in

as part of #4479. So when we ship that you could do something like what's done on https://design.google.com/icons/ e.g.

screen shot 2016-07-14 at 15 19 30

traviskaufman on 14 Jul 2016

👍5

Superceded by https://github.com/material-components/material-components-web/issues/50