CODEWITHSUNDEEP
javascriptjqueryhtmlmaterial-designbootstrap-modal
RuwanthaSameera
RuwanthaSameera

Reputation: 113

Material input label is not working properly?

Im fill data into the model and it shown like this way.

enter image description here

after click input field display this way.

after click display this way.

this is blade (model-edit-users)

<div class="md-form col-md">
       <input type="text" id="name" name="name" class="form-control" required>
       <label for="name" class="">User Name</label>
</div>

this is javascript code i used.

$('#users_view_table tbody').on('click', '#editUser', function (e) {
            e.preventDefault();
            var data = oTable.row($(this).parents('tr')).data();
            var dataname = data.name;

            $("#model-edit-users").modal('show');
            $('#model-edit-users').on('shown.bs.modal', function () {
                $('#name').val(dataname);
            });
        });

anyone help me to solve this UI issue

Upvotes: 2

Views: 802

Answers (1)

hasan
hasan

Reputation: 3502

You can try to use <md-input-container> like following

<md-input-container> 
  <label>User Name </label> 
  <input type="text" id="name" name="name" class="form-control" required> 
</md-input-container>

Upvotes: 2

Related Questions