1

here is the source code used for the portion of radio button. if I add materialize.min.css, then the radio button is not working on any browser. if I just put this code in online tester without put css file in. the code is working. what is going on for the radio button while using materialize css design?

<div class="row">
<form class="col s12">
  <h1 class="grey-text text-lighten-5">Tool Inventory Report</h1>
  <div class="row">
        <div class="input-field col s8">
          <p class="grey-text text-lighten-5"><b>Type:</b></p>
          <input name="grp1" type="radio" id="alltools" /><label for="alltools">All Tools</label>
          <input name="grp1" type="radio" id="handtool" /><label for="handtool">Hand Tool</label>
          <input name="grp1" type="radio" id="gardentool" /><label for="gardentool">Garden Tool</label>
          <input name="grp1" type="radio" id="ladder" /><label for="ladder">Ladder</label>
          <input name="grp1" type="radio" id="powertool" /><label for="powertool">Power Tool</label>
        </div>
        <div class="input-field col s4">
          <p class="grey-text text-lighten-5"><b>Customer Search:</b></p>
          <input type="text" class="form-control" placeholder="Enter Keyword" id="search" style="max-width: 80%; width: 60%;">
          <button class="btn btn-info btn-sm" type="submit">Search</button>
        </div>
  </div>
</form></div>
user3842385
  • 55
  • 11
  • 2
    Remove the `.input-field` class from `
    ` and they should work. From the [Docs](http://materializecss.com/forms.html) _This is only used in our Input and Textarea form elements._
     – vanburen Nov 16 '17 at 23:36

0 Answers0