Text Input: Feature request

design material
#1

Notice the cursor in search field below

Screen Shot 2016-05-05 at 4.44.02 PM.png2526×1116 83.7 KB

I could not use floating label in the navbar because it takes extra height which was making other elements feel shorter. So I went with simplest textinput.

I don’t know much about material design specifications. But, sites like gaming.youtube.com and google plus beta version use material type search bar. The current textinput available in material is awesome for forms. But for search, a textinput with complete border looks more apt.

If you guys consider it as a valid request please add it. I am also willing to contribute if needed.

#2

Hi @Nishant_Gaurav, a more traditional looking input field (with borders) is actually already supported in Material but it is documented yet. To convert a material look input field to a traditional input field you just need to add an additional class .form-control-default, and it does not work with floating labels so you may also need to remove .form-group-label on its parent .form-group if necessary as well.

A very simple example would look like:

<div class="form-group">
    <label>...</label>
    <input class="form-control form-control-default" ...>
</div>

Hope this helps.

1 Like
#3

Hey @Nishant_Gaurav, Can you please share the source code of the header section ? I’m trying to implement the same search option

Thanks

#4

<form class="col-lg-4 col-lg-offset-3 col-md-5 col-md-offset-2 col-sm-6 col-sm-offset-1 col-xs-7" role="search" action="{% url 'search' %}"> <div class="form-group-brand"> <input class="form-control form-control-default " placeholder="Search" type="text"> </div> </form>