Hey there! I have a quick question - Is it possible to have multiple mdl-sheets on one page that all share the same form?
I tried implementing this but ended up with them overlapping each other instead of displaying next to each other from left to right.
Check out my code here. The issue seems to be in the CSS.
CSS:
/* This CSS was downloaded from https://www.codeseek.co/ */
body {
background: #ECEFF1;
}
.mdl-layout__content {
padding: 24px 12px;
}
.mdl-layout__content h1 {
font-size: 30px;
margin: 0 0 .3em;
}
.mdl-sheet__container {
right: 32px;
bottom: 32px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.mdl-sheet {
position: relative;
background: #FF5722;
float:left;
width: 60px;
height: 60px;
border-radius: 50%;
cursor: pointer;
-webkit-transition: all 180ms;
transition: all 180ms;
}
.mdl-sheet .mdl-sheet__content {
display: none;
}
.mdl-sheet__icon {
color: #fff;
position: static;
top: 50%;
left: 50%;
-webkit-transform: translate(-12px, -12px);
transform: translate(-12px, -12px);
font-size: 24px;
width: 24px;
height: 24px;
line-height: 24px;
}
.mdl-sheet--opened {
background: #fff;
color: #263238;
border-radius: 2px;
width: 240px;
height: auto;
min-height: 150px;
max-height: 80vh;
overflow-y: auto;
}
.mdl-sheet--opened .mdl-sheet__icon {
display: none;
}
.mdl-sheet--opened .mdl-sheet__content {
display: block;
}