Problem on materialize css text box or textarea

     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

Read More

materialize css default Check box

     When we use the check box the materialize css will convert the design automatically.

Example Program:- (Editor)

Editor is Loading...

Output:-

Advertisement

Read More

with-gap class in materialize css

     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

Read More

Materialize css radio button

     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

Read More

Materialize css Dropdown list

      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

Read More

Textarea with icon materialize css

     The following example can create the textarea with icon using materialize css.

Example Program:- (Editor)

Editor is Loading...

Output:-

Advertisement

Read More

materialize css Textarea

     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

Read More

How to create a text box with icon in materialize css?

     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

Read More

Textbox with placeholder in materialize css

     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

Read More

Text box design in materialize css

     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

Read More

materialize css footer class

     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

Read More

materialize css chip class

     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

Read More

Image card in materialize css

     card-image class is used to create a card with images.

Example Program:- (Editor)

Editor is Loading...

Output:-

Advertisement

Read More

Basic Card in materialize css

     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

Read More

Button with icon in materialize css

     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

Read More