CODEWITHSUNDEEP
javascriptandroidjqueryhtmlcss
Chris Clark
Chris Clark

Reputation: 397

How do I make a div fixed for Mobile, but on click fill the viewport with scroll

Our customer wants the ability to fill out a "Contact Us" form that will be on the right side of the screen next to the content of the page on Desktop/tablet.

However in mobile, they want that to be a div or a button on the bottom of the screen (fixed) that is always clickable for the user. Once clicked, this form will fill the screen and need to be scroll-able so the customer can fill out the form and submit.

Here is the picture showing the issue. Notice how even if I scroll down. Only the amount of the div that fits in the 80vh will ever be displayed Fixed Position Issue

CSS

.bottomDiv {
    position: fixed !important; 
    bottom:0px !important; 
    width: 100% !important; height: 77px;
    border-radius: 8px;
}

Jquery

    $(window).on("resize load", function () {
        var width = $(window).width();
        if (width < 600)
        {
            $('#divContactSticky').addClass("bottomDiv");
            $('#divContactSticky').on('click', FillScreen);
        }
        else {
            $('#divContactSticky').removeClass("bottomDiv");
            $('#divContactSticky').unbind("click");
        }
    });

    var FillScreen = function () {
        if ($('#divContactSticky').height == '80vh')
        {
            $('#divContactSticky').unbind("click");
        }
        else {
            $('#divContactSticky').css('height', '80vh');
        }

    };
    function CancelForm() {
        if ($('#divContactSticky').height == '80vh') {
            $('#divContactSticky').css('height', '77px');
            $('#divContactSticky').on('click', FillScreen);
        }
        else {

        }
    }

HTML

<div id="divContactSticky" class="large-3 right columns float-right">
            /// <div> this is the 'Contact' portion that is in blue</div>
            <form id="emailForm" action="../api/email" method="post">
                <p>Name*</p>
                <input id="Name" maxlength="25" required />
                <p>Company</p>
                <input id="Company" maxlength="25" />
                <p>Phone</p>
                <input id="Phone" maxlength="14" />
                <p>Email*</p>
                <input id="Email" maxlength="50" required />
                <p>Comments/Questions*</p>
                <textarea id="EmailBody" maxlength="400" required</textarea>
                <input type="reset" value="Cancel" onclick="CancelForm()" css="button-right" />
                <input type="submit" value="Submit" css="button-right" />
            </form>
    </div>

Upvotes: 0

Views: 48

Answers (1)

Gauri Bhosle
Gauri Bhosle

Reputation: 5473

You can add style="overflow-y:auto" to divContactSticky. So it will remain of same height as you mentioned 80vh but it will also add scroll to your div.

Upvotes: 1

Related Questions