CODEWITHSUNDEEP
htmlcssmaterialize
Sachin
Sachin

Reputation: 70

Materialize - Modal is shrinking in mobile device

I have done this program with materialziecss library.

MY Model IS like this first

But when I try to focus on that and try to type something it looks like this

I don't know when I am typing on them it shrinks down. The code I used in this is below: 

<div id="modal2" class="modal  modal-fixed-footer">
    <div class="modal-content">

        <h5 class="text-center" style="color:#33383b; font-weight:bold;">Fill your details</h5>
        <br>
        <form>
            <center>
                <div class="input-field col-md-8">
                    <input id="last_name" type="text" class="validate">
                    <label for="last_name">&nbsp; &nbsp;First Name</label>
                </div>
            </center>
            <center>
                <div class="input-field col-md-8">
                    <input id="last_name" type="text" class="validate">
                    <label for="last_name">&nbsp; &nbsp;Last Name</label>
                </div>
            </center>
            <center>
                <div class="input-field col-md-8">
                    <input id="last_name" type="text" class="validate">
                    <label for="last_name">&nbsp; &nbsp;Email</label>
                </div>
            </center>
            <center>
                <div class="input-field col-md-8">
                    <input id="last_name" type="password" class="validate">
                    <label for="last_name">&nbsp; &nbsp;Password</label>
                </div>
            </center>
            <center>
                <div class="input-field col-md-8">
                    <input id="dob" type="text" class="datepicker">
                    <label for="dob">&nbsp; &nbsp; Date Of Birth</label>
                </div>
            </center>
        </form>
    </div>
    <div class="modal-footer">
        <div class="text-center">
            <button class="modal-action btn waves-effect waves-green">SignUp</button>
            <button class="modal-action modal-close btn waves-effect waves-green">Close</button>
        </div>
    </div>
</div>

and styling I have done is below: 

#modal2{
    width:100% !important;
}

Upvotes: 0

Views: 422

Answers (1)

Raold
Raold

Reputation: 1493

You have to also set max-width: 100%. If you want to have full screen modal try this:

#modal2 {
 max-width: 100%;
 width: 100%;
 max-height: 100%;
 height: 100%;
}

This should work, if not try add !important.

Upvotes: 1

Related Questions