CODEWITHSUNDEEP
htmlcss
SLM Productions
SLM Productions

Reputation: 41

Inline-block isn't staying inline

I've got this embedded form, but the thing is: Why does display: inline-block look bad, and leaves the "submit" and "terms" a bit higher than the email field? And HOW CAN I SOLVE THIS?

I've tried the classic "margin-top", but it simply won't work. Let me share you the piece of code I used.

 var coll = document.getElementsByClassName("open-terms");
        var i;

        for (i = 0; i < coll.length; i++) {
        coll[i].addEventListener("click", function() {
            this.classList.toggle("close-terms");
            var content = document.getElementById("terms-wrapper");
            if (content.style.maxHeight){
            content.style.maxHeight = null;
            } else {
            content.style.maxHeight = content.scrollHeight + "px";
            } 
        });
        }
        body {
        font-family: century-gothic, 'AppleGothic';
        }
        #mlist-email {background-color: white; border: white solid 1px; font-size: 12px; font-family: inherit; text-transform: capitalize; padding: 0 22.5px 0 22.5px; height: 45px; font-family: century-gothic, sans-serif; letter-spacing: 0; font-weight: 400; font-size: 14px;}
        #mlist-email:focus {outline: none;}
        #close-chimpy {float: right; margin-right: 5px; letter-spacing: 6px; color: black; text-transform: uppercase;}
        #close-chimpy:hover {color: rgb(181,57,102)}
        #button-wrapper {text-align: center; position: absolute; bottom: 30px; right: 30px;}
        .mlist-trigger {background-color: pink; padding: 20px; font-family: century-gothic, 'AppleGothic'; width: 250px; cursor: pointer; transition: 0.3s;}
        .mlist-trigger:hover {opacity: 0.7;}
        #chimpy-lightbox input[type="email"]::placeholder {color: black;}
        #chimpy-lightbox {font-family: century-gothic, 'AppleGothic'; z-index: 2008; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,0.7); display: none;} 
        @media only screen and (max-width: 374px) {
            #chimpy-lightbox input[type="submit"] {padding: 0 !important; width: 68% !important;}
            .mlist-submit-wrapper {width: 100%; margin-left: 0; padding-top: 15px;} #mlist-email-wrapper {width: 100%; margin-left: 0;}
        }
        .open-terms {cursor: pointer; width: 100%; border: none; color: black; text-align: left; outline: none; font-size: 15px;}
        .close-terms:hover:after, .open-terms:hover:after {color: red;}
        .open-terms:after {content: 'Terms'; color: black; text-transform: uppercase; font-weight: bold; margin-left: 5px;}
        .close-terms:after {content: "Hide"; text-transform: uppercase;}
        .content {padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; background-color: #f1f1f1;}
<link rel="stylesheet" href="https://use.typekit.net/oov2wcw.css">
<form name="mlist-form-validate" method="post" id="mlist-form">
            <div id="mlist-form-wrapper" style="padding-top: 200px; text-align: center;">
                <div id="mc_embed_signup_scroll">
                    <h2 style="text-transform: uppercase; letter-spacing: 6px;">Join</h2>
                    <div class="mlist-email-wrapper" style="display: inline-block; vertical-align: top;">
                        <label id="email-error" style="font-size: 10px; color: #ff0000; text-align: left; float: left; padding-top: 0px; display: none;"></label><br>
                        <input oninvalid=""  type="email" value="" placeholder="email" name="EMAIL" class="required email" id="mlist-email" required><br>
                    </div>
                    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_f206f10b38a504434c650c6bf_5ce815006b" tabindex="-1" value=""></div>
                    <div class="mlist-submit-wrapper" style="display: inline-block;  white-space: nowrap"><input type="submit" value="Submit" name="subscribe" id="mlist-submit" class="button" required><br><a href="javascript:void(0)" class="open-terms"><span></span></a></div>
                    <div class="content" id="terms-wrapper">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    </div>
                </div>
            </div>
        </form>

Upvotes: 0

Views: 52

Answers (1)

devd
devd

Reputation: 703

 var coll = document.getElementsByClassName("open-terms");
        var i;

        for (i = 0; i < coll.length; i++) {
        coll[i].addEventListener("click", function() {
            this.classList.toggle("close-terms");
            var content = document.getElementById("terms-wrapper");
            if (content.style.maxHeight){
            content.style.maxHeight = null;
            } else {
            content.style.maxHeight = content.scrollHeight + "px";
            } 
        });
        }
        body {
        font-family: century-gothic, 'AppleGothic';
        }
        #mlist-email {background-color: white; border: white solid 1px; font-size: 12px; font-family: inherit; text-transform: capitalize; padding: 0 22.5px 0 22.5px; height: 45px; font-family: century-gothic, sans-serif; letter-spacing: 0; font-weight: 400; font-size: 14px;}
        #mlist-email:focus {outline: none;}
        #close-chimpy {float: right; margin-right: 5px; letter-spacing: 6px; color: black; text-transform: uppercase;}
        #close-chimpy:hover {color: rgb(181,57,102)}
        #button-wrapper {text-align: center; position: absolute; bottom: 30px; right: 30px;}
        .mlist-trigger {background-color: pink; padding: 20px; font-family: century-gothic, 'AppleGothic'; width: 250px; cursor: pointer; transition: 0.3s;}
        .mlist-trigger:hover {opacity: 0.7;}
        #chimpy-lightbox input[type="email"]::placeholder {color: black;}
        #chimpy-lightbox {font-family: century-gothic, 'AppleGothic'; z-index: 2008; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,0.7); display: none;} 
        @media only screen and (max-width: 374px) {
            #chimpy-lightbox input[type="submit"] {padding: 0 !important; width: 68% !important;}
            .mlist-submit-wrapper {width: 100%; margin-left: 0; padding-top: 15px;} #mlist-email-wrapper {width: 100%; margin-left: 0;}
        }
        .open-terms {cursor: pointer; width: 100%; border: none; color: black; text-align: left; outline: none; font-size: 15px;}
        .close-terms:hover:after, .open-terms:hover:after {color: red;}
        .open-terms:after {content: 'Terms'; color: black; text-transform: uppercase; font-weight: bold; margin-left: 5px;}
        .close-terms:after {content: "Hide"; text-transform: uppercase;}
        .content {padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; background-color: #f1f1f1;}
<link rel="stylesheet" href="https://use.typekit.net/oov2wcw.css">
<form name="mlist-form-validate" method="post" id="mlist-form">
            <div id="mlist-form-wrapper" style="padding-top: 200px; text-align: center;">
                <div id="mc_embed_signup_scroll">
                    <h2 style="text-transform: uppercase; letter-spacing: 6px;">Join</h2>
                    <div class="mlist-email-wrapper" style="display: inline-block;vertical-align: super;">
                        <label id="email-error" style="font-size: 10px; color: #ff0000; text-align: left; float: left; padding-top: 0px; display: none;"></label><br>
                        <input oninvalid=""  type="email" value="" placeholder="email" name="EMAIL" class="required email" id="mlist-email" required><br>
                    </div>
                    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_f206f10b38a504434c650c6bf_5ce815006b" tabindex="-1" value=""></div>
                    <div class="mlist-submit-wrapper" style="display: inline-block;  white-space: nowrap;vertical-align: middle;"><input type="submit" value="Submit" name="subscribe" id="mlist-submit" class="button" required><br><a href="javascript:void(0)" class="open-terms"><span></span></a></div>
                    <div class="content" id="terms-wrapper">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    </div>
                </div>
            </div>
        </form>

Upvotes: 1

Related Questions