Digital Technology New

     In materialize css textbox or textarea always shown in active mode if you clear the text box or text area values dynamically. If you want to deactivate the controller, just you can remove the active class while clear the text or textarea. Example     $("#txtincome").val("");     $("#txtincome").next().removeClass("active"); Problem       In the following example you can see the problem, first type any text on the Name text box, and try to click the " remove value" button, the text box is still in the active mode. Name      You can solve this problem using the following example program. Example Program:- (Editor) Editor is Loading... Output:- Advertisement

     When we use the check box the materialize css will convert the design automatically. Example Program:- (Editor) Editor is Loading... Output:- Advertisement

     Radio Button with-gap class, this class is used to create the radio button filled with gap in selected radio buttons.     <input class="with-gap" name="grp1" type="radio" id="r1">     <label for="r1">with-gap Class 1</label>     <input class="with-gap" name="grp1" type="radio" id="r2">     <label for="r2">with-gap Class 2</label> Example Program:- (Editor) Editor is Loading... Output:- Advertisement

     Materialize css have default class for radio button design, and no need to apply any special class. The materialize css will take the style when you define radio button.     <input name="grp1" type="radio" id="r1">     <label for="r1">Radio 1</label>     <input name="grp1" type="radio" id="r2">     <label for="r2">Radio 2</label> Example Program:- (Editor) Editor is Loading... Output:- Advertisement

      In materialize css we can easy to create the drop down list, when we use dropdown list in materialize css we should need to initiate the dropdown list in document ready.   <div class="input-field">     <select>       <option value="">Choose your option</option>       <option value="1">India</option>       <option value="2">USA</option>       <option value="3">Gujarath</option>     </select>     <label>Choose your place</label>   </div> <script> $(document).ready(function() { $('select').material_select(); });   </script> Example Program:- (Editor) Editor is Loading... Output:- Advertisement

     The following example can create the textarea with icon using materialize css. Example Program:- (Editor) Editor is Loading... Output:- Advertisement

      materialize-textarea   and  input-field  class is used to create a textarea in materialize css.      <textarea id="txta1" class="materialize-textarea"></textarea> Example Program:- (Editor) Editor is Loading... Output:- Advertisement

     If we want to add special icon in materialize css we need to import the following plugin.  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> Example Program:- (Editor) Editor is Loading... Output:- Advertisement

      placeholder is the very important in text boxes, because we can give the label inside the textbox.placeholder in materialize css, placeholder is used to show the what you need to enter in the text box without any label box. when you start typing inside the textbox the placeholder text is hide. Example Program:- (Editor) Editor is Loading... Output:- Advertisement

     Text Boxes are designed suitable for mobile also, it appear user friendly. And we can use this materialize css text box using just call  input-field class.         <div class="input-field col s6">             <input id="first_name" type="text" class="validate">             <label for="first_name">Name</label>         </div> Example Program:- (Editor) Editor is Loading... Output:- Advertisement

     Materialize css have some footer classes for creating footer contents, like sitemap notes copyright note and etc. Example Program:- (Editor) Editor is Loading... Output:- Advertisement

      chip class is used to create tags, with or without images. Also we can place close button to remove tag. Example Program:- (Editor) Editor is Loading... Output:- Advertisement

      card-image class is used to create a card with images. Example Program:- (Editor) Editor is Loading... Output:- Advertisement

     Materialize css have some classes for creating cards, card is used to highlight some words on the website or blog. Example Program:- (Editor) Editor is Loading... Output:- Advertisement

     We can place icon inside the button by write a class. Example <a class="waves-effect waves-light btn">Drop<i class="material-icons right">invert_colors</i></a> <a class="waves-effect waves-light btn">E-Mail<i class="material-icons right">email</i></a> Example Program:- (Editor) Editor is Loading... Output:- Advertisement