Angular md-grid-list does weird stuff

Hello everyone,

I am busy with a small dashboard for a small application that we are building and I am stuck on something weird.

The md-grid-list get extra padding to the bottom which I don’t want to happen.

On the picture you will see that the right and left sidebar gain extra height because of the center block.
Somehow it kicks up the padding automaticly ( which is calculated by ng-material )

Does somebody know how to stop this behavior ?

Best regards.
Wouter.

Could you please post the corresponding code (html and css) for this?

2 Likes

html :

<div class="container">
	<div class="secureContent">

	<div class="title">Welkom bij retailmanager</div>
	<div class="subtitle">De Retailmanager is een samenwerking van enkele retail specialisten die vanuit eigen expertise de uitdaging van de huidige retailmarkt als uitgangspunt heeft genomen. De traditionele winkelvloer ondergaat steeds meer en vaker een metamorfose.</div>
	<br>

	{{ homes.length }}

		<!-- <div layout="row"> -->
			
			<!-- <div id="left_banner" layout="column" flex="20"></div> -->
			<md-grid-list class="gridje" md-gutter-gt-md="20px" md-gutter-md="10px" md-gutter-sm="8px" md-cols-xs="6" md-cols-sm="6" md-cols-md="6" md-cols-gt-md="7" md-row-height="3:4">


				<md-grid-tile id="left_banner" md-rowspan="{{ Math.ceil(homes.length / 4) }}"></md-grid-tile>
				<md-grid-tile class="Tegel" ng-repeat="home in homes|limitTo:4" ng-init='this["imgsrc"] = home.imgurl' ng-mouseover='this["imgsrc"] = home.imgurlover' ng-mouseout='this["imgsrc"] = home.imgurl'> 
						<div class="Tegel Tegel--is-image" ng-click="clickMe(home.link)" style="background-image: url({{ imgsrc }}); background-size: 100% 100%;">
						</div>
						<p class="Tegel Tegel--is-icon-naam">{{ home.kop }}</p>
				</md-grid-tile>
				<md-grid-tile id="right_banner" md-rowspan="{{ Math.ceil(homes.length / 4) }}"   md-colspan-xs="1" md-colspan-md="1" md-colspan-sm="1" md-colspan-gt-md="2"></md-grid-tile>
				<md-grid-tile class="Tegel" ng-repeat="home in homes.slice(4,homes.length)" ng-init='this["imgsrc"] = home.imgurl' ng-mouseover='this["imgsrc"] = home.imgurlover' ng-mouseout='this["imgsrc"] = home.imgurl'> 
					<div class="Tegel Tegel--is-image" ng-click="clickMe(home.link)" style="background-image: url({{ imgsrc }}); background-size: 100% 100%;">
					</div>
					<p class="Tegel Tegel--is-icon-naam">{{ home.kop }}</p>
				</md-grid-tile>

				</md-grid-list>
			<!-- <div id="right_banner" layout="column" flex="30" layout-xs="10"></div> -->
		<!-- </div> -->
	</div>
</div>

CSS :

/**
 * File :main.css;
 * Author : Wouter van Marrum;
 * Link : http://www.concept-core.nl;
 */
body[ng-cloak] {
    display:none;
}

body {
    animation: fadein 3s;
    -moz-animation: fadein 3s; /* Firefox */
    -webkit-animation: fadein 3s; /* Safari and Chrome */
}

/* Home dashboard buttons */
.container {
    margin-left:5px;
    margin-right:5px;
}

#left_banner,#right_banner{
    background: #D4EDFC !important;
    border-radius: 0px;
}

.Tegel .Tegel--is-image {
    outline: none;
    height: 63.5%;
    width: 86%;
    border-radius: 5px;
    border: 2px solid white;
    background-repeat: no-repeat;
}
.Tegel .Tegel--is-image:hover {
    border: 2px solid navy;
}
.Tegel--is-link {
    display:block;
}
.Tegel--is-link:hover {
    color: #23527c;
    text-decoration: underline;
}

.Tegel .Tegel--is-icon-naam {
    display:none;
}

.Tegel--is-kop {
    margin-top: 75%;
    font-family: 'OpenSans-semibold';
    font-size: 18px;
    text-transform: uppercase;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
}
.Tegel--is-text {
    font-family: 'OpenSans';
    font-size: 12px;
    color: white;
    text-align: center;
}

img.responsive-fill {
    width : 100%;
    height: inherit;
}
img.responsive-shrink {
    max-width : 100%;
    height: auto;
}

md-content {
    background: transparent;
}

md-grid-tile {
    transition: all 300ms ease-out 50ms;
}


/*.gridje {
    height: 400px;
}*/

.gridje .menuTile {
    box-sizing: border-box;

}

#container{
    width:100%;
    height:100%;
}

.image_tile{
    width: 100%;
    height:33.33%;
}

.tile_title {
    width: 100%;
    height:33.33%;
}

.description_tile{
    width:100%;
    height:33.33%;
}

#tegelkop{
    margin-top:0px;
    transform: translateX(0%) translateY(50%);
}


#title{
    font-family: OpenSans-light;
    text-align: left;
    color: #0555a2;
}

#title div {
    width: 100%;
    font-family: OpenSans-light;
    color: #0555a2;
    font-size: 39px;
}

#left_banner,#right_banner{
    background: #D4EDFC !important;
    border-radius: 0px;
}

#home_icons{
    height: 95%;
    width:100%;
    margin-left:0px;
    margin-top:9%;
}

/*large screen*/

@media screen
    and (min-width: 1750px) {

    .gridje {
        /*width: 600px;*/
        height: 800px;
    }

    .gridje .menuTile {
        border-radius: 8px;
        background-size: 100% 100%;
    }

    .gridje .menuTile:hover {
        -webkit-box-shadow:inset 0px 0px 0px 4px navy;
        -moz-box-shadow:inset 0px 0px 0px 4px navy;
        box-shadow:inset 0px 0px 0px 4px navy;
    
    }
}

/*small screen*/

@media screen 
    and (max-width: 1749px){

    .gridje {
        /*width: 400px;*/
        height: 400px;
    }

    .gridje .menuTile {
        border-radius: 5px;
        background-size: 100% 100%;

    }

    .gridje .menuTile:hover {
        -webkit-box-shadow:inset 0px 0px 0px 2px navy;
        -moz-box-shadow:inset 0px 0px 0px 2px navy;
        box-shadow:inset 0px 0px 0px 2px navy;
    
    }

}


/*smaller screen*/
@media screen 
    and (max-width: 850px)
    and (min-width: 715px){
    .gridje {
        /*width: 400px;*/
        height: 200px;
    }

    .gridje .menuTile {
        border-radius: 3px;
        background-size: 100% 100%;

    }

    .gridje .menuTile:hover {
        -webkit-box-shadow:inset 0px 0px 0px 1px navy;
        -moz-box-shadow:inset 0px 0px 0px 1px navy;
        box-shadow:inset 0px 0px 0px 1px navy;
    
    }

    #tegelkop{
        font-size:11px;
    }

    #tegeltext{
        font-size:8px;
    }
}


/* End home dashboard buttons !*/

@media screen and (max-width: 600px) {
    .Tegel .Tegel--is-icon-naam {
        display:block;
        position:absolute;
        margin-top: 58.5%;
    }

    .Tegel .Tegel--is-image {
        border: 0;
    }
    .Tegel .Tegel--is-image:hover {
        border: 0;
    }
}

/* End of media queries*/

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.