无论我做什么我都不能让mdl-stepper使其高度与内部的内容相同.
似乎没有真正的getmdl.io.
CSS(我知道这是问题)
/** * mdl-stepper - A Material Design lite Stepper component polyfill. * @version v1.1.6 * @author Alexandre Thebaldi <ahlechandre@gmail.com>. * @link https://github.com/ahlechandre/mdl-stepper * *//* MDL Stepper *//** * mdl-stepper - A Material Design lite Stepper component polyfill. * @version v1.1.6 * @author Alexandre Thebaldi <ahlechandre@gmail.com>. * @link https://github.com/ahlechandre/mdl-stepper * *//* STEPPER *//* GRID *//* SHADOWS *//** * mdl-stepper - A Material Design lite Stepper component polyfill. * @version v1.1.6 * @author Alexandre Thebaldi <ahlechandre@gmail.com>. * @link https://github.com/ahlechandre/mdl-stepper * *//* Animation *//* KEYFRAMES *//* disPLAY FLEX *//* Shadows *//** * mdl-stepper - A Material Design lite Stepper component polyfill. * @version v1.1.6 * @author Alexandre Thebaldi <ahlechandre@gmail.com>. * @link https://github.com/ahlechandre/mdl-stepper * * @contributor Michael Haschke <http://michael.haschke.biz/> *//** * mdl-stepper - A Material Design lite Stepper component polyfill. * @version v1.1.6 * @author Alexandre Thebaldi <ahlechandre@gmail.com>. * @link https://github.com/ahlechandre/mdl-stepper * *//* STEPPER *//* GRID *//* SHADOWS *//** * mdl-stepper - A Material Design lite Stepper component polyfill. * @version v1.1.6 * @author Alexandre Thebaldi <ahlechandre@gmail.com>. * @link https://github.com/ahlechandre/mdl-stepper * *//* Animation *//* KEYFRAMES *//* disPLAY FLEX *//* Shadows *//** * mdl-stepper - A Material Design lite Stepper component polyfill. * @version v1.1.6 * @author Alexandre Thebaldi <ahlechandre@gmail.com>. * @link https://github.com/ahlechandre/mdl-stepper * */@-webkit-keyframes FadeIn { 0% { opacity: 0; } 100% { opacity: 100; } }@-moz-keyframes FadeIn { 0% { opacity: 0; } 100% { opacity: 100; } }@-o-keyframes FadeIn { 0% { opacity: 0; } 100% { opacity: 100; } }@keyframes FadeIn { 0% { opacity: 0; } 100% { opacity: 100; } }@-webkit-keyframes FadeInFromBottom { 0% { height: 0; padding-top: 84px; background-color: white; color: white; } 25% { color: white; } }@-moz-keyframes FadeInFromBottom { 0% { height: 0; padding-top: 84px; background-color: white; color: white; } 25% { color: white; } }@-o-keyframes FadeInFromBottom { 0% { height: 0; padding-top: 84px; background-color: white; color: white; } 25% { color: white; } }@keyframes FadeInFromBottom { 0% { height: 0; padding-top: 84px; background-color: white; color: white; } 25% { color: white; } }/* STEPPER */.mdl-stepper { position: relative; Font-family: "Roboto",sans-serif; background-color: white; display: block; Box-shadow: 0px 3px 1px -2px rgba(0,0.2),0px 2px 2px 0px rgba(0,0.14),0px 1px 5px 0px rgba(0,0.12); padding: 24px 0; max-wIDth: 720px; wIDth: 100%; border-radius: 2px; } .mdl-stepper > li { List-style: none; }/* STEPPER ON SMALL SCREENS */@media only screen and (max-wIDth: 375px) { .mdl-stepper { wIDth: 100vw; } .mdl-grID .mdl-cell .mdl-stepper { margin-left: -16px; } }/* STEPPER VERTICAL ONLY */.mdl-stepper:not(.mdl-stepper--horizontal) > .mdl-step:not(:last-child):after { content: ''; position: absolute; top: 50px; left: 37px; wIDth: 1px; height: calc(100% - 24px); background-color: rgba(0,0.1); }.mdl-stepper:not(.mdl-stepper--horizontal) > .mdl-step:not(:last-child).is-active:after { height: calc(100% - 12px); }.mdl-stepper:not(.mdl-stepper--horizontal) .mdl-step__label:hover,.mdl-stepper:not(.mdl-stepper--horizontal) .mdl-step__label:active,.mdl-stepper:not(.mdl-stepper--horizontal) .mdl-step__label:focus { background-color: rgba(0,0.06); }/* STEP */.mdl-step { position: relative; height: 460px; } .mdl-step:not(.is-active) { height: initial !important; } .mdl-step:not(:last-child) { margin-bottom: 24px; } .mdl-step:not(:last-child).is-active { margin-bottom: 36px; } .mdl-step .mdl-step-error-message { display: none; } .mdl-step > * { -webkit-animation: FadeIn 0.5s ease-in-out; -moz-animation: FadeIn 0.5s ease-in-out; -ms-animation: FadeIn 0.5s ease-in-out; animation: FadeIn 0.5s ease-in-out; }/* STEP ACTIVE */.mdl-step.is-active .mdl-step__Title { Font-weight: bold; }.mdl-step.is-active .mdl-step__content { display: block; }.mdl-step.is-active .mdl-step__label-indicator { background-color: #2196F3; color: white; }.mdl-step.is-active .mdl-step__actions { -webkit-display: flex; -moz-display: flex; -ms-display: flex; display: flex; justify-content: flex-start; } .mdl-step.is-active .mdl-step__actions [data-stepper-next] { order: 1; margin-right: 8px; } .mdl-step.is-active .mdl-step__actions [data-stepper-cancel] { order: 2; } .mdl-step.is-active .mdl-step__actions [data-stepper-skip] { order: 3; margin-left: auto; } .mdl-step.is-active .mdl-step__actions [data-stepper-back] { order: 4; margin-left: auto; }/* STEP MOD COMPLETED */.mdl-step--completed .mdl-step__label-indicator { background-color: #2196F3; }/* STEP MOD ERROR */.mdl-step--error .mdl-step__Title { color: #F44336; }.mdl-step--error .mdl-step-error-message { display: block; color: #F44336; Font-weight: normal; }.mdl-step--error .mdl-step__label-indicator { background-color: #F44336 !important; Font-weight: bold; }/* STEP MOD OPTIONAL *//* STEP MOD TRANSIENT */.mdl-step--transIEnt .mdl-step__content { overflow: hIDden !important; }.mdl-step__label { position: relative; -webkit-display: flex; -moz-display: flex; -ms-display: flex; display: flex; cursor: pointer; margin-bottom: 8px; padding: 12px 24px 24px 24px; align-items: center; }/* STEP LABEL MOD WITH SUBLABEL */.mdl-step__label--with-sublabel { align-items: baseline; }/* STEP Title */.mdl-step__Title { -webkit-display: flex; -moz-display: flex; -ms-display: flex; display: flex; flex-flow: column nowrap; order: 2; wIDth: 100%; }/* STEP Title MESSAGE */.mdl-step__Title-message { position: absolute; Font-size: 12px; opacity: .7; Font-weight: 400; top: 28px; }/* STEP LABEL INDICATOR */.mdl-step__label-indicator { -webkit-display: flex; -moz-display: flex; -ms-display: flex; display: flex; order: 1; background-color: rgba(0,0.3); border-radius: 100%; color: white; margin-right: 12px; margin-bottom: auto; } .mdl-step__label-indicator > :first-child { -webkit-display: flex; -moz-display: flex; -ms-display: flex; display: flex; Font-size: 15px; wIDth: 28px; height: 28px; align-items: center; justify-content: center; }/* STEP CONTENT */.mdl-step__content { display: none; height: calc(100% - 132px); wIDth: inherit; overflow: auto; margin-left: 64px; margin-right: 24px; }/* STEP ACTIONS */.mdl-step__actions { display: none; padding-top: 16px; height: 48px; margin-left: 64px; margin-right: 24px; } .mdl-step__actions [data-stepper-next].mdl-button--raised.mdl-button--colored { background-color: #2196F3; Box-shadow: none; }/* STEP TRANSIENT */.mdl-step__transIEnt { position: absolute; top: 72px; left: 64px; z-index: 2; -webkit-display: flex; -moz-display: flex; -ms-display: flex; display: flex; wIDth: calc(100% - 88px); height: calc(100% - 132px); Transition: 0.3s all ease-in-out; }/* STEP TRANSIENT OVERLAY */.mdl-step__transIEnt-overlay { content: ''; position: absolute; z-index: 3; wIDth: 100%; height: 100%; top: 0; background-color: rgba(255,255,0.8); }/* STEP TRANSIENT LOADER */.mdl-step__transIEnt-loader { z-index: 4; margin: auto; }/* STEPPER MOD HORIZONTAL */@media only screen and (min-wIDth: 841px) { .mdl-stepper--horizontal { -webkit-display: flex; -moz-display: flex; -ms-display: flex; display: flex; flex-direction: row; align-items: baseline; max-wIDth: 840px; padding: 0; min-height: 576px; /* HORIZONTAL STEP */ /* HORIZONTAL STEP LABEL */ /* HORIZONTAL STEP CONTENT */ /* HORIZONTAL STEP ACTIONS */ /* STEPPER MOD HORIZONTAL + MOD liNEAR */ } .mdl-stepper--horizontal:before { content: ''; background-color: transparent; wIDth: 100%; min-height: 84px; Box-shadow: 0px 2px 1px -1px rgba(0,0px 1px 1px 0px rgba(0,0px 1px 3px 0px rgba(0,0.12); position: absolute; top: 0; left: 0; } .mdl-stepper--horizontal > .mdl-step { position: static; -webkit-display: flex; -moz-display: flex; -ms-display: flex; display: flex; justify-content: center; align-items: initial; margin-top: 0 !important; margin-bottom: 0 !important; height: initial; max-height: 84px; overflow: hIDden; /* STEP MOD COMPLETED */ } .mdl-stepper--horizontal > .mdl-step.is-active.mdl-step--transIEnt:before { content: attr(data-step-transIEnt-message); -webkit-animation: FadeInFromBottom 0.3s cubic-bezIEr(0,0.99); -moz-animation: FadeInFromBottom 0.3s cubic-bezIEr(0,0.99); -ms-animation: FadeInFromBottom 0.3s cubic-bezIEr(0,0.99); animation: FadeInFromBottom 0.3s cubic-bezIEr(0,0.99); position: absolute; padding-left: 24px; display: flex; Font-size: 16px; justify-content: flex-start; align-items: center; wIDth: calc(100% - 24px); height: 84px; background-color: white; top: 0; left: 0; z-index: 9; } .mdl-stepper--horizontal > .mdl-step .mdl-step__transIEnt { top: 0; left: 0; wIDth: 100%; height: 100%; } .mdl-stepper--horizontal > .mdl-step:not(:first-child):not(:last-child) { margin: auto auto; } .mdl-stepper--horizontal > .mdl-step:not(:last-child) { flex: 1; } .mdl-stepper--horizontal > .mdl-step:not(:last-child):after { content: ''; position: relative; flex: 1; top: 42px; wIDth: 168px; margin-left: -12px; height: 1px; background-color: rgba(0,0.1); } .mdl-stepper--horizontal > .mdl-step.mdl-step--completed .mdl-step__Title > .mdl-step__Title-text { Font-weight: bold; } .mdl-stepper--horizontal .mdl-step__label { top: -48px; flex: initial; margin: 0; padding: 24px; min-height: 132px; Transition: 0.025s border-radius linear; } .mdl-stepper--horizontal .mdl-step__label:hover { background-color: rgba(0,0.06); } .mdl-stepper--horizontal .mdl-step__label:active { padding: 12px; margin: 12px; border-radius: 100%; } .mdl-stepper--horizontal .mdl-step__label > .mdl-step__Title { wIDth: initial; } .mdl-stepper--horizontal .mdl-step__label > .mdl-step__Title > * { max-wIDth: 120px; white-space: nowrap; overflow: hIDden; text-overflow: ellipsis; } .mdl-stepper--horizontal .mdl-step__label > .mdl-step__Title > .mdl-step__Title-message { position: relative; top: 0; line-height: 14px; } .mdl-stepper--horizontal .mdl-step__label > .mdl-step__label-indicator { margin-top: auto; } .mdl-stepper--horizontal .mdl-step > .mdl-step__content { position: absolute; top: 84px; left: 0; wIDth: calc(100% - 48px); height: calc(100% - 192px); margin: 24px; } .mdl-stepper--horizontal .mdl-step > .mdl-step__actions { position: absolute; top: calc(100% - 84px); left: 0; margin: 0; padding: 24px; wIDth: calc(100% - 48px); } .mdl-stepper--horizontal .mdl-step > .mdl-step__actions [data-stepper-next] { order: 4; margin-left: 8px; margin-right: 0; color: #2196F3; background-color: transparent; } .mdl-stepper--horizontal .mdl-step > .mdl-step__actions [data-stepper-cancel] { order: 3; margin-left: auto; } .mdl-stepper--horizontal .mdl-step > .mdl-step__actions [data-stepper-skip] { order: 2; margin-left: auto; } .mdl-stepper--horizontal .mdl-step > .mdl-step__actions [data-stepper-back] { order: 1; margin-left: 0; margin-right: auto; } .mdl-stepper--horizontal.mdl-stepper--linear > .mdl-step:not(.mdl-step--completed):not(.is-active) .mdl-step__Title > .mdl-step__Title-text { opacity: .5; } } 什么
解决方法 工作演示： https://codepen.io/kumarrishikesh12/pen/jLNQRz<script async src="https://production-assets.codepen.io/assets/embed/ei.Js"></script><p data-height="265" data-theme-ID="dark" data-slug-hash="jLNQRz" data-default-tab="result" data-user="kumarrishikesh12" data-embed-version="2" data-pen-title="jLNQRz" >See the Pen <a href="https://codepen.io/kumarrishikesh12/pen/jLNQRz/">jLNQRz</a> by Rishikesh kumar (<a href="https://codepen.io/kumarrishikesh12">@kumarrishikesh12</a>) on <a href="https://codepen.io">CodePen</a>.</p>
是的Actuall问题是从那个CSS文件发生的,你必须复制你的Style.CSS中的所有CSS然后更改下面的CSS如下(Bcoz它发生步进Mod水平宽度样式)
改变这个
/* STEPPER MOD HORIZONTAL */@media only screen and (min-wIDth: 841px) { .mdl-stepper--horizontal { -webkit-display: flex; -moz-display: flex; -ms-display: flex; display: flex; flex-direction: row; align-items: baseline; max-wIDth: 840px; padding: 0; min-height: 576px; /* HORIZONTAL STEP */ /* HORIZONTAL STEP LABEL */ /* HORIZONTAL STEP CONTENT */ /* HORIZONTAL STEP ACTIONS */ /* STEPPER MOD HORIZONTAL + MOD liNEAR */ } 对此
/* STEPPER MOD HORIZONTAL */@media only screen and (min-wIDth: 901px) { .mdl-stepper--horizontal { -webkit-display: flex; -moz-display: flex; -ms-display: flex; display: flex; flex-direction: row; align-items: baseline; max-wIDth: 900px; padding: 0; min-height: 1100px; /* HORIZONTAL STEP */ /* HORIZONTAL STEP LABEL */ /* HORIZONTAL STEP CONTENT */ /* HORIZONTAL STEP ACTIONS */ /* STEPPER MOD HORIZONTAL + MOD liNEAR */ } NOTE: Here Use
!importantrule is used for overrIDing the prevIoUsly assigned CSS declarations
HTML
<div > <header > <div > <!-- Title --> <span >IPET</span> <!-- Add spacer,to align navigation to the right --> <div ></div> <div > <label for="fixed-header-drawer-exp"> <i >search</i> </label> <div > <input type="text" name="sample" ID="fixed-header-drawer-exp" /> </div> </div> <button ID="demo-menu-lower-right" > <i >chat</i> </button> <ul for="demo-menu-lower-right"> <li >Some Action</li> <li >Another Action</li> <li >Disabled Action</li> <li >Yet Another Action</li> </ul> </div> </header> <main > <section> <div > <div > <!-- markup --> <ul ID="ipet-stepper"> <li > <span > <span > <span >Your information</span> <span >Edit this step later</span> </span> <span ><span >1</span> </span> </span> <div > <div > <div > <h2 >Your Profile information</h2> </div> <div > </div> <div > <div ID="fb" > <div ID="status"></div> <button ID="loginFB" onClick="testAPI();"> Continue with Facebook </button> </div> <!--- Google Api ---> <div ID="Google" > <button ID="Googlelogin" onClick="onSuccess()"> Continue with Google </button> </div> </div> <div ID="gSignInWrapper"> </div> <div ID="name"></div> <script>(function () { startApp();});</script> <div > <div > <h2 >Your Profile</h2> </div> <div > <div > <div ID="profile" ></div> </div> <div > <form action="#"> <div > <div > <input type="text" ID="firstname"> <label for="firstname">First name</label> </div> <div > <input type="text" ID="lastname"> <label for="lastname">Last name</label> </div> <!--- Birthday / Address Form ---> <div > <i ID="bdayicon" >cake</i> </div> <div > <input type="date" ID="date"> </div> <div > <input ID="gender" name="gender" value="" type="text" tabIndex="-1"/> <label for="gender">Gender</label> <ul ID="gendermenu" for="gender"> <li >F - Female</li> <li >M - Male</li> <li >X - Intersex</li> </ul> </div> <!--- Main contact ---> <div > <i ID="mainphoneicon" >phone</i> </div> <div > <input type="text" pattern="[0-9]{10}" ID="phone"> <label for="phone">Phone</label> <span >Digits only</span> </div> <div > <i ID="addressicon" >home</i> <div data-mdl-for="addressicon"> Your home address </div> </div> <div > <input type="text" ID="streetline"> <label for="streetline">Home Address</label> <div data-mdl-for="streetline"> <p>Your address will be used to notify members that your pet has gone missing. </p> <small>You can also choose to notify members in your current area (because you're active or on holIDays) <br>We will never give out your personal address to any 3rd party or user. </small> </p> </div> </div> <div > </div> <div > <input type="text" ID="suburb"> <label for="suburb">Suburb</label> </div> <div > </div> <div > <input type="text" pattern="-?[0-9]*{4}?" maxlength="4" name="zipcode" ID="zip"> <label for="zip">Post Code</label> <span >InvalID ZIPCODE</span> </div> <div > <input type="text" ID="state" maxlength="3"> <label for="state">State</label> </div> <div > <input ID="country" name="country" value="" type="text" tabIndex="-1"/> <label for="country">Country</label> <ul ID="countrymenu" for="country"> </ul> </div> <div ></div> <div > </div> <div > <textarea name="aboutme" rows= "3" type="text" ID="aboutme"></textarea> <label for="aboutme">About Me</label> </div> </div> </form> </div> </div> </div> </div> <div > <button data-stepper-next> Continue </button> <button data-stepper-cancel> Cancel </button> </div> </li> <li > <span > <span > <span >Your Pets</span> </span> <span ><span >2</span> </span> </span> <div ></div> <div > <button data-stepper-next> Continue </button> <button data-stepper-cancel> Cancel </button> </div> </li> <li > <span > <span > <span >Emergency Contacts</span> <span >Who should we contact if your pet goes missing?</span> </span> <span ><span >3</span> </span> </span> <div ></div> <div > <button data-stepper-next> Continue </button> <button data-stepper-cancel> Cancel </button> </div> </li> </ul> </div> </div> </section> <footer > <div > <div > <ul > <li><a href="#">Help</a></li> <li><a href="#">Privacy and Terms</a></li> <li><a href="#">User Agreement</a></li> </ul> </div> <div > <a href="#top"> Back to top <i >expand_less</i> </a> </div> </div> </footer> </main> </div> 总结NOTE: In Case Of
<embed>Snippet Doesn’t Not Work CheckWorking link
以上是内存溢出为你收集整理的html – mdl-stepper没有响应溢出全部内容，希望文章能够帮你解决html – mdl-stepper没有响应溢出所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）