MDL mdl-layout-spacer forcing content to next line

Question

This is a pretty basic Material Design Lite question, but this has been driving me crazy. In the following example from the MDL examples website, the div with class mdl-layout-spacer nicely positions the elements after it to the right of the containing div. Note the calendar icon is at the right:

<!-- Event card -->
<style>
    .demo-card-event.mdl-card {
        width: 256px;
        height: 256px;
        background: #3E4EB8;
    }

    .demo-card-event>.mdl-card__actions {
        border-color: rgba(255, 255, 255, 0.2);
    }

    .demo-card-event>.mdl-card__title {
        align-items: flex-start;
    }

    .demo-card-event>.mdl-card__title>h4 {
        margin-top: 0;
    }

    .demo-card-event>.mdl-card__actions {
        display: flex;
        box-sizing: border-box;
        align-items: center;
    }

    .demo-card-event>.mdl-card__actions>.material-icons {
        padding-right: 10px;
    }

    .demo-card-event>.mdl-card__title,
    .demo-card-event>.mdl-card__actions,
    .demo-card-event>.mdl-card__actions>.mdl-button {
        color: #fff;
    }
</style>
<div class="demo-card-event mdl-card mdl-shadow--2dp">
    <div class="mdl-card__title mdl-card--expand">
        <h4> Featured event:<br> May 24, 2016<br> 7-11pm </h4>
    </div>
    <div class="mdl-card__actions mdl-card--border"> <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
      Add to Calendar
    </a>
        <div class="mdl-layout-spacer"></div> <i class="material-icons">event</i> </div>
</div>

Now to the problem. I have tried the mdl-layout-spacer technique in a few different situations in my site, but it only seems to be working for icons in the site header. See in this pic how the badge icon is on the right:

I want to be able to use this technique in cards, but it doesn't seem to work. I created a JSFiddle example using the following html. Using the mdl-layout-spacer, I would expect the word "today" to be positioned to the right of the containing div, but as you can see it goes down to the next line.

Am I missing something? Should I be able to use the spacer like intended or do I need to discard this ambition?

<body>
    <div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
        <main class="mdl-layout__content">
            <div class="mdl-grid">
                <div class="full-width-card hover-card mdl-cell mdl-cell--12-col-desktop mdl-cell--12-col-tablet mdl-card mdl-shadow--2dp" style="min-height:100px;">
                    <div class="mdl-card__supporting_text">
                        <a class="no-decoration" href="#"> <span style="display:inline-block;">
                    username
                  </span> <span style="display:inline-block;">
                    <i class="material-icons">acct_icon</i>
                  </span> </a>
                        <!-- spacer -->
                        <div class="mdl-layout-spacer"></div>
                        <!-- --><span style="display:inline-block;">today</span> </div>
                </div>
            </div>
        </main>
    </div>
</body>

Rahul Sagore · Accepted Answer · 2017-02-21T09:05:23.437

No, that's not true. mdl-layout-spacer class is not specific to icons. Check this codepen example I have created. I have used text instead of icon and it's working fine.

In the card example, you have used styles:

.demo-card-event>.mdl-card__actions {
    display: flex;
    box-sizing: border-box;
    align-items: center;
}

This is the code that is pushing the element to the right. Checkout this JsFiddle I used the same css to fix your example.

Edited: Your example is not working because, your element does not have display: flex css. So just add this css to the parent class:

.mdl-card__supporting_text {
    display: flex;
}

MDL mdl-layout-spacer forcing content to next line

1 Answers1