Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

mdl-stepper not making responding to overflow

Tags:

html

css

The issue I am having which you can see via codepen.io is no matter what I do, I can't get the mdl-stepper to make its height the same as the content inside.

enter image description here

There seems to be no real getmdl.io for this.

CSS (I know this is the issue)

/**
 * 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; } }
like image 348
RussellHarrower Avatar asked Oct 18 '22 09:10

RussellHarrower

2 Answers

HTML change 

     /** 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 Change Add height property to define height for mdl-stepper class

    .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;}

Experiment with css height for mdl-stepper and mdl-step to figure out final element look and feel. Avoid inline styling with !important

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

like image 111
pratikpawar Avatar answered Oct 21 '22 04:10

pratikpawar

Working Demo: 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>

And yes the actual problem is occurring from that CSS file. You have to copy that all CSS in your Style.css and then change the following CSS as below (because it's occur stepper mod horizontal width style).

#Change This#

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

#To This#

/* 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 !important rule is used for overriding the previously assigned CSS declarations

#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>

NOTE: In case of <embed> snippet doesn't work check the working link.

like image 32
RïshïKêsh Kümar Avatar answered Oct 21 '22 04:10

RïshïKêsh Kümar
Sign in to Comment

Related questions

How to make the input type="number" to not accept number with leading zeros?
How to make href in button inside collapse
scrollbar of parent div overlaps child div
angular 2 handle click on link inside iframe
Internal Linking to children in a list
Get value of invalid html5 date input
Setting focus on table row elements
Snapping Drag and Drop Items in JavaScript
Smoothscroll doesn't work in chrome but works in other browsers
Flexbox margins in a grid [duplicate]
How to TRULY vertically center text with flexbox?
Favicon in EDGE
Font Awesome icons dropdown
Star rating using Font Awesome doesn't work properly on Edge and IE
How to achieve this without using a photo editor?
Can I get VS Code to syntax-highlight JsRender templates?
Browser refresh behaviour
How not to validate HTML5 text box with required attribute
Textarea resizes and triggers best_in_place blur event
&thinsp;, &ensp;, &emsp; alternatives in Safari browser

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!