I have a set of material design cards that look fine on their own, but when I put them inside a Core Drawer Panel, it looks like div heights are getting fixed. I'm trying to find a solution for the way they're getting compacted vertically.
This is what it looks like outside the Core Drawer Panel:
This is what 3 cards look like inside the Core Drawer Panel (not showing that actual left-hand drawer, but that looks fine):
Here's a simplified version of my code (polymer imports not displayed):
<head>
<style>
#mainDiv {
background-color: transparent;
overflow: scroll;
}
#mainDiv * {
font-family: 'Roboto', sans-serif;
background: #eee;
height: 100%;
width: 100%;
padding: 40px;
margin: 0;
color: #2E2E3C;
line-height: 24px;
-webkit-font-smoothing: antialiased;
}
#mainDiv * {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
text-rendering: optimizeLegibility;
}
#mainDiv *::-moz-selection {
color: #CFD8DC;
background: #009688;
}
#mainDiv * ::selection {
color: #CFD8DC;
background: #009688;
}
#mainDiv * ::-webkit-scrollbar {
width: 10px!important;
background: #FAFAFA;
}
#mainDiv * ::-webkit-scrollbar-track {
background: rgba(255, 255, 255, .08);
}
#mainDiv * ::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .2);
}
/* End defaults*/
#mainDiv .card {
display: block;
vertical-align: top;
width: 350px;
position: relative;
overflow: hidden;
margin: 10px;
background: #FFF;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
color: #272727;
border-radius: 2px;
}
#mainDiv .card .title {
line-height: 48px;
font-size: 24px;
font-weight: 300;
}
#mainDiv .card .content {
padding: 20px;
font-weight: 300;
border-radius: 0 0 2px 2px;
}
#mainDiv .card p {
margin: 0;
}
#mainDiv .card .action {
border-top: 1px solid rgba(160, 160, 160, 0.2);
padding: 20px;
}
#mainDiv .card a {
color: #ffab40;
margin-right: 20px;
-webkit-transition: color 0.3s ease;
transition: color 0.3s ease;
text-transform: uppercase;
text-decoration: none;
}
#mainDiv .card .image {
position: relative;
}
#mainDiv .card .image img {
border-radius: 2px 2px 0 0;
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
}
#mainDiv .card .image .title {
position: absolute;
bottom: 0;
left: 0;
padding: 20px;
color: #FFF;
}
#mainDiv .checkBoxSpan {
float: right;
}
</style>
</head>
<body>
<core-drawer-panel>
<div drawer>
<!— bunch of dropdown menus —>
</div drawer>
<div main id="mainDiv" layout vertical>
<div class="card">
<div class="content">
<span class="title">Card title</span>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
<div class="action">
<a href='#'>This is a link</a>
<a href='#'>This is a link</a>
</div>
</div>
</core-drawer-panel>
</body>
For reference, the material card code is from here: http://materialdesignblog.com/10-material-design-cards-for-web-in-css-html/
I don't know if it's the same in core-drawer-panel, but in paper-drawer-panel, you will have to use a paper-scroll-header-panel or paper-header-panel surrounding your content, because the drawer and main panel have a fixed height of 100%. It works like this:
I also suggest you remove the attribute
drawerat the closing</div>tag.Please see the documentation for more information: paper-header-panel docs