material-design-lite

How to format select box with Material Design Lite?

by

This worked pretty well for me (using fuel as an example): <link rel=”stylesheet” href=”https://fonts.googleapis.com/icon?family=Material+Icons”> <link rel=”stylesheet” href=”https://code.getmdl.io/1.3.0/material.indigo-pink.min.css”> <script src=”https://code.getmdl.io/1.3.0/material.min.js”></script> <div class=”mdl-textfield mdl-js-textfield mdl-textfield–floating-label”> <select class=”mdl-textfield__input” id=”octane” name=”octane”> <option></option> <option value=”85″>85</option> <option value=”87″>87</option> <option value=”89″>89</option> <option value=”91″>91</option> <option value=”diesel”>Diesel</option> </select> <label class=”mdl-textfield__label” for=”octane”>Octane</label> </div> No libraries or anything needed just the standard MDL CSS and JavaScript.

Centered form with material design lite

by

How about using “mdl-layout-spacer”: See codepen <div class=”mdl-grid”> <div class=”mdl-layout-spacer”></div> <div class=”mdl-cell mdl-cell–4-col”>This div is centered</div> <div class=”mdl-layout-spacer”></div> </div> Or if you prefer a css solution: Add an extra class to the grid containing the column to be centered. See codepen <div class=”mdl-grid center-items”> <div class=”mdl-cell mdl-cell–4-col”>This div is centered</div> </div> .mdl-grid.center-items { justify-content: center; … Read more