2017-07-15 41 views
5

Witam, więc problem, który widzę, można zobaczyć poprzez codepen.io jest bez względu na to, co robię Nie mogę uzyskać mdl-steppera, aby jego wysokość była taka sama jak zawartość w środku.mdl-stepper nie reaguje na przepełnienie

enter image description here

Wydaje się, że żaden prawdziwy getmdl.io do tego.

CSS (wiem, że to jest problem)

/** 
* mdl-stepper - A Material Design Lite Stepper component polyfill. 
* @version v1.1.6 
* @author Alexandre Thebaldi <[email protected]>. 
* @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 <[email protected]>. 
* @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 <[email protected]>. 
* @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 <[email protected]>. 
* @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 <[email protected]>. 
* @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 <[email protected]>. 
* @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 <[email protected]>. 
* @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, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 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, 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, 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, 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, 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, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 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, 0, 0.99); 
     -moz-animation: FadeInFromBottom 0.3s cubic-bezier(0, 0, 0, 0.99); 
     -ms-animation: FadeInFromBottom 0.3s cubic-bezier(0, 0, 0, 0.99); 
     animation: FadeInFromBottom 0.3s cubic-bezier(0, 0, 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, 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, 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; } } 

Co

+0

Wysokość MDL-stepper wydaje się być taka sama jak zawartość w niej zawartych w codepen ...czy możesz być bardziej konkretny/skoncentrować problem tylko na odpowiednim kodzie i lepiej opisać oczekiwane i rzeczywiste zachowanie? – WookieCoder

+0

@ WookieCoder, jeśli otworzysz go w widoku pełnej strony i przewiń na sam dół, zobaczysz problem. wewnętrzna-div wydaje się unosić ponad out-the-div i nie czynić jej auto-wysokością – RussellHarrower

+0

@WookieCoder Dodałem obrazek i podświetliłem go – RussellHarrower

Odpowiedz

2

Demo pracy: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" class="codepen">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>


I tak Actuall Problem występuje z tego pliku CSS, musisz skopiować że wszystkie CSS w swojej Style.css a następnie zmienić następujących CSS jak poniżej (Bcoz Jego wystąpić szerokość krokowy Mod poziome Style)

Zmień Ten

/* 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 */ } 

Do tej

/* 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 */ } 

UWAGA: Tutaj Użyj !important reguła służy do nadrzędnych wcześniej przypisanych deklaracje CSS


HTML

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header bodyflow"> 

     <header class="mdl-layout__header"> 

      <div class="mdl-layout__header-row" style="padding-right:100px; width:100% !important;"> 
       <!-- Title --> 
       <span class="mdl-layout-title">IPET</span> 
       <!-- Add spacer, to align navigation to the right --> 
       <div class="mdl-layout-spacer"></div> 
       <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right"> 
        <label class="mdl-button mdl-js-button mdl-button--icon" for="fixed-header-drawer-exp"> 
         <i class="material-icons">search</i> 
        </label> 
        <div class="mdl-textfield__expandable-holder"> 
         <input class="mdl-textfield__input" type="text" name="sample" id="fixed-header-drawer-exp" /> 
        </div> 


       </div> 
      <button id="demo-menu-lower-right" 
        class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"> 
      <i class="material-icons">chat</i> 
      </button> 
      <ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right" 
       for="demo-menu-lower-right"> 
      <li class="mdl-menu__item">Some Action</li> 
      <li class="mdl-menu__item">Another Action</li> 
      <li class="mdl-menu__item">Disabled Action</li> 
      <li class="mdl-menu__item">Yet Another Action</li> 
      </ul> 
      </div> 

     </header> 


     <main class="mdl-layout__content"> 


     <section> 

    <div class="mdl-grid"> 
     <div class="mdl-cell mdl-cell--12-col"> 
     <!-- markup --> 
     <ul class="mdl-stepper mdl-stepper--linear mdl-stepper--horizontal" style="display:inline-block;height:100% !important;overflow:inherit !important;"id="ipet-stepper"> 
      <li class="mdl-step mdl-step--editable"> 
      <span class="mdl-step__label"> 
      <span class="mdl-step__title"> 
       <span class="mdl-step__title-text">Your Information</span> 
       <span class="mdl-step__title-message">Edit this step later</span> 
      </span> 
       <span class="mdl-step__label-indicator"><span class="mdl-step__label-indicator-content">1</span> 
      </span> 
      </span> 
      <div class="mdl-step__content" style="display:inline-block;height:100% !important; overflow:inherit !important;"> 
        <div class="mdl-card-fullwide mdl-card"> 
         <div class="mdl-card__title"> 
          <h2 class="mdl-card__title-text">Your Profile Information</h2> 
         </div> 
         <div class="mdl-card__supporting-text mdl-grid mdl-cell mdl-cell--12-col" style="padding:0px;"> 
         </div> 

         <div class="mdl-grid"> 
          <div id="fb" class="mdl-cell mdl-cell--6-col"> 
             <div id="status"></div> 
             <button id="loginFB" class="loginBtn loginBtn--facebook" onClick="testAPI();"> 
             Continue with Facebook 
             </button> 
          </div> 




          <!--- GOOGLE API ---> 
          <div id="google" class=" mdl-cell mdl-cell--6-col"> 
            <button id="googlelogin" class="loginBtn loginBtn--google" onClick="onSuccess()"> 
            Continue with Google 
            </button> 
          </div> 

         </div> 
         <div id="gSignInWrapper"> 
         </div> 
         <div id="name"></div> 
         <script>(function() { startApp();});</script> 

         <div class="mdl-card__supporting-text mdl-grid"> 
            <div class="mdl-card__title"> 
             <h2 class="mdl-card__title-text">Your Profile</h2> 
            </div> 

        <div class="mdl-card__supporting-text mdl-grid"> 

            <div class="mdl-cell mdl-cell--4-col"> 
             <div id="profile" class="dropzone" style="margin-left: -14px;"></div> 
            </div> 
            <div class="mdl-cell mdl-cell--8-col" style=" 
    margin-left: 7x;"> 

             <form action="#"> 
              <div class="mdl-grid"> 

               <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--6-col"> 
               <input class="mdl-textfield__input" type="text" id="firstname"> 
               <label class="mdl-textfield__label" for="firstname">First Name</label> 
               </div> 

               <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--6-col"> 
               <input class="mdl-textfield__input" type="text" id="lastname"> 
               <label class="mdl-textfield__label" for="lastname">Last Name</label> 
               </div> 

              <!--- Birthday/Address Form ---> 

              <div class="mdl-textfield mdl-js-textfield mdl-cell mdl-cell--1-col"> 
               <i id="bdayicon" class="material-icons">cake</i> 
              </div> 

              <div class="mdl-textfield mdl-js-textfield mdl-cell mdl-cell--5-col tenpadtop"> 
               <input class="mdl-textfield__input" type="date" id="date"> 
              </div> 


              <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--6-col getmdl-select getmdl-select__fix-height"> 
               <input class="mdl-textfield__input" id="gender" name="gender" value="" type="text" tabIndex="-1"/> 
               <label class="mdl-textfield__label" for="gender">Gender</label> 
               <ul id="gendermenu" class="mdl-menu mdl-menu--bottom-left mdl-js-menu" for="gender"> 
               <li class="mdl-menu__item">F - Female</li> 
               <li class="mdl-menu__item">M - Male</li> 
               <li class="mdl-menu__item">X - Intersex</li> 
               </ul> 
              </div> 


              <!--- Main contact ---> 
              <div class="mdl-textfield mdl-js-textfield mdl-cell mdl-cell--1-col"> 
               <i id="mainphoneicon" class="material-icons">phone</i> 
              </div> 

              <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--11-col"> 
               <input class="mdl-textfield__input" type="text" pattern="[0-9]{10}" id="phone"> 
               <label class="mdl-textfield__label" for="phone">Phone</label> 
               <span class="mdl-textfield__error">Digits only</span> 
              </div> 


              <div class="mdl-textfield mdl-js-textfield mdl-cell mdl-cell--1-col"> 
               <i id="addressicon" class="material-icons">home</i> 
               <div class="mdl-tooltip" data-mdl-for="addressicon"> 
                Your home address 
               </div> 
              </div> 

              <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--11-col"> 
               <input class="mdl-textfield__input" type="text" id="streetline"> 
               <label class="mdl-textfield__label" for="streetline">Home Address</label> 
               <div class="mdl-tooltip tooltip-fullwidth" 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 class="mdl-textfield mdl-js-textfield mdl-cell mdl-cell--1-col"> 
              </div> 

              <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--11-col"> 
               <input class="mdl-textfield__input" type="text" id="suburb"> 
               <label class="mdl-textfield__label" for="suburb">Suburb</label> 
              </div> 

              <div class="mdl-textfield mdl-js-textfield mdl-cell mdl-cell--1-col"> 
              </div> 


              <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--4-col"> 
               <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*{4}?" maxlength="4" name="zipcode" id="zip"> 
               <label class="mdl-textfield__label" for="zip">Post Code</label> 
               <span class="mdl-textfield__error">Invalid ZIPCODE</span> 
               </div> 


              <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--4-col"> 
               <input class="mdl-textfield__input" type="text" id="state" maxlength="3"> 
               <label class="mdl-textfield__label" for="state">State</label> 
               </div> 

               <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--3-col getmdl-select getmdl-select__fix-height"> 
               <input class="mdl-textfield__input" id="country" name="country" value="" type="text" tabIndex="-1"/> 
               <label class="mdl-textfield__label" for="country">Country</label> 
               <ul id="countrymenu" class="mdl-menu mdl-menu--bottom-left mdl-js-menu" for="country">  
               </ul> 
               </div> 

               <div class="mdl-layout-spacer"></div> 

               <div class="mdl-textfield mdl-js-textfield mdl-cell mdl-cell--1-col"> 
               </div> 

               <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--11-col"> 
               <textarea name="aboutme" class="mdl-textfield__input" rows= "3" type="text" id="aboutme"></textarea> 
               <label class="mdl-textfield__label" for="aboutme">About Me</label> 
               </div> 


              </div> 
             </form> 

            </div> 




          </div> 
        </div> 
      </div> 
      <div class="mdl-step__actions"> 
       <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next> 
        Continue 
        </button> 
       <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel> 
        Cancel 
        </button> 
      </div> 
      </li> 
      <li class="mdl-step"> 
      <span class="mdl-step__label"> 
      <span class="mdl-step__title"> 
       <span class="mdl-step__title-text">Your Pets</span> 
      </span> 
       <span class="mdl-step__label-indicator"><span class="mdl-step__label-indicator-content">2</span> 
      </span> 
      </span> 
      <div class="mdl-step__content"></div> 
      <div class="mdl-step__actions"> 
       <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next> 
        Continue 
        </button> 
       <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel> 
        Cancel 
        </button> 
      </div> 
      </li> 
      <li class="mdl-step"> 
      <span class="mdl-step__label"> 
      <span class="mdl-step__title"> 
       <span class="mdl-step__title-text">Emergency Contacts</span> 
       <span class="mdl-step__title-message">Who should we contact if your pet goes missing?</span> 
      </span> 
       <span class="mdl-step__label-indicator"><span class="mdl-step__label-indicator-content">3</span> 
      </span> 
      </span> 
      <div class="mdl-step__content"></div> 
      <div class="mdl-step__actions"> 
       <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next> 
        Continue 
        </button> 
       <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel> 
        Cancel 
        </button> 
      </div> 
      </li> 
     </ul> 

     </div> 
    </div> 

    </section> 


     <footer class="android-footer mdl-mini-footer"> 
      <div class="mdl-mini-footer--right-section"> 
      <div class="mdl-mini-footer--left-section"> 
      <ul class="mdl-mini-footer__link-list"> 
          <li><a href="#">Help</a></li> 
          <li><a href="#">Privacy and Terms</a></li> 
          <li><a href="#">User Agreement</a></li> 
      </ul> 
      </div> 

      <div class="mdl-mini-footer--right-section"> 
       <a class="mdl-typography--font-light" href="#top"> 
       Back to Top 
       <i class="material-icons">expand_less</i> 
       </a> 
      </div> 
      </div> 
     </footer> 
     </main> 
</div> 

UWAGA: W razie <embed> urywek Nie Nie Kontrola pracy Working Link

+0

Jest to w zasadzie odpowiedź tylko na link. Podaj szczegóły zmian w odpowiedzi. –

+0

Okkzz teraz mój telefon komórkowy aktualizuję wkrótce –

2

zmiana HTML

 /** remove inline css height and overflow it will enable scroll **/ 
    <ul class="mdl-stepper mdl-stepper--linear mdl-stepper--horizontal" style="display:inline-block;"id="ipet-stepper"> 
     <li class="mdl-step mdl-step--editable"> 
     <span class="mdl-step__label"> 
     <span class="mdl-step__title"> 
      <span class="mdl-step__title-text">Your Information</span> 
      <span class="mdl-step__title-message">Edit this step later</span> 
     </span> 
      <span class="mdl-step__label-indicator"><span class="mdl-step__label-indicator-content">1</span> 
     </span> 
     </span> 
     /** remove inline css height and overflow it will enable scroll **/ 
     <div class="mdl-step__content" style="display:inline-block;"> 

CSS Zmień Dodaj właściwość height, aby określić wysokość dla klasy MDL-krokowy

.mdl-stepper { 
    position: relative; 
    font-family: "Roboto", sans-serif; 
    background-color: white; 
    display: block; 
    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); 
    padding: 24px 0; 
    max-width: 720px; 
    width: 100%; 
    border-radius: 2px; 
    /**height property based on device screen height you could define it as required **/ 
    height : 80vh;} 

Eksperyment z wysokości CSS dla MDL-stepper i MDL kroku wymyślić ostateczny wygląd i sposób działania elementu. Unikać inline stylizacji z !important

https://codepen.io/anon/pen/ayoPRZ