The MDL card is not properly aligned at the top of its parent element

I am currently utilizing the mdl framework to design my web application.

<div class="demo-card-wide mdl-card mdl-shadow--2dp mdl-cell mdl-cell--top mdl-cell--6-col">
...
<div class="demo-card-wide mdl-card mdl-shadow--2dp mdl-cell mdl-cell--top mdl-cell--6-col">
...
<div ng-init="showLmsSwitch()" class="demo-card-wide mdl-card mdl-shadow--2dp mdl-cell  mdl-cell--6-col  mdl-cell--top">
...

These three cards shown in the image are part of my design.

https://i.sstatic.net/wSmae.png

The third card (steuerung logitech media server) at the bottom is supposed to align at the top due to the class mdl-cell--top, but it does not. Does anyone have an explanation for this behavior?

Appreciate any help in advance!

htmlcssmaterial-designmaterial-design-lite

Answer №1

The arrangement of all three cards in your design appears to be in the same 'row'. The first card occupies 6 columns out of the 12 available in that row, followed by the second card taking up the remaining 6 columns. As a result, the third card is allocated another 6 columns but due to space constraints, it shifts to the next row.

To address this issue and achieve the desired layout, you will need to utilize multiple mdl-grid elements:

<div class="mdl-grid">
  <div class="mdl-grid mdl-cell--6-col">
    <div class="mdl-cell mdl-cell--12-col">Content</div>
    <div class="mdl-cell mdl-cell--12-col">Content</div>
  </div>
  <div class="mdl-cell--6-col">Content
  </div>
</div>

You can view the updated version of your pen here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with animated underline not appearing after link is selected

Utilizing Bootstrap and SCSS to tailor my CSS file, I've implemented a nav-link with the following style: .sidebar .nav-pills .nav-link:hover, .sidebar .nav-pills .show > .nav-link { @extend %underline-link; background: linear-gradient(120d ...

cssbootstrap-4sass

When using Firefox, the -moz-transform:scale property allows you to scale the image without impacting its original dimensions

While resizing icons on a sprite sheet by scaling the image with CSS works fine in Chrome, Firefox seems to scale the graphic correctly but it still takes up the same space as the unscaled version. Even though I found -moz-focus-inner which removed some p ...

cssfirefox

Assign ratings to values based on stars

I am currently facing an issue with implementing a star rating system on my web application. The problem lies in retrieving previously rated values and displaying them as blinking stars. For example, if a user had previously rated something with 4 stars, t ...

jqueryasp.netcss

Tips on altering the "nav item" class in order to modify the background color

In my scss file, I currently have the following styling: .nav-pills .nav-link, .nav-pills .show > .nav-link { background: linear-gradient(120deg, #ddd 65%, #eee 65%); } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: ...

cssbootstrap-4sass

Shifting the entire page from left to right and back again

I am in search for a template that moves the page from left to right. If anyone can guide me on how to create this effect or provide a JavaScript example, I would greatly appreciate it. ...

javascriptjqueryhtml

Utilize jQuery to toggle the visibility of subrows on demand

I am currently working on a problem and utilizing jQuery for the solution. Unfortunately, I do not have any code to share at the moment. Initially, only the Master Rows (with classes term1_master and term2_master) should be visible. When the "Show" link ...

javascriptjqueryhtml

Using d3.js to dynamically change the color of svg elements based on their data values

I was searching for a way to dynamically color SVG rectangles based on values from a dataset. If I were to create rectangles for each data entry, how could I adjust the rectangle's color according to the data value? Here is what I currently have: // ...

javascripthtmlcssd3.jssvg

Guide to redirecting traffic from one domain to another while preserving the path component

I am looking to create a redirection from one subdomain to another while keeping the same path intact. I am using a blogging platform and do not have access to a server, but I can modify the global head section of my blog. Currently, I am able to redirec ...

htmlhttp-redirectblogstumblr

Adding a border to the input field in Bootstrap for enhanced styling and visibility

Looking to replicate the border style on an input element as shown in this image: https://i.sstatic.net/a2iwZ.png The current code I have is producing a different result. Can anyone assist me in achieving the desired border style? <!DOCTYPE html> ...

jquerytwitter-bootstrapcss

What is preventing me from opening this local html page without an IIS Server?

Currently immersed in a passion project that can be found at https://github.com/loganhenson/jsrpg This project has been a collaborative effort with a friend, utilizing Visual Studio Professional for development and testing it on my local IIS server. Init ...

javascripthtmlasp.netgoogle-chromebrowser

How can I submit the "names" of cities instead of the "id" in a dependent dropdown select?

I've encountered an issue while trying to change the code from "${region.code}" to "${region.name}". regOpt += `<option value='${region.code}'> ${region.altName}</option>`; My objective is to display the names of the regions ins ...

javascripthtmljsonajaxdropdown

Combining the classes "col" and "col-3" simultaneously

I am utilizing the "col" class to generate 7 equal columns, with a responsive design that features two rows - one with 4 columns and the other with 3. Here is my code: <div class="row mt-20"> <div class="col col-3"> <img ...

htmlbootstrap-4

How to efficiently pass multiple inputs from an HTML form to a controller in AngularJS using a single ng

Currently, I have multiple input text boxes in my HTML and I need to send their values to my controller to add them to an object. The challenge I'm facing is figuring out how to pass more than one value using just one ng-model. In my HTML code, I have ...

javascripthtmlangularjscontroller

The process of creating a functional search bar in Django

I created a search bar, but I am facing an issue where no titles appear until I start typing. Once I type in one title, all the titles suddenly appear. How can I fix this problem? index.html def index(request): query = request.GET.get('srh' ...

pythonhtmldjango

"Enhance Your Website with Custom jQuery Preloaders

Currently, I am facing a challenge while developing a website. Specifically, I am struggling with resolving the issue of a blank page being displayed. The website that I am working on involves functionality where swiping right triggers data insertion into ...

javascriptjqueryhtmljquery-mobilepreloader

When hovering over one item, it causes a hover effect on an item in a SEPARATE container

My goal is to create a unique interaction between links and images, where hovering over a link will transform the corresponding image below it, and vice versa. I have been searching for solutions but have only found methods that work when all items are wit ...

htmlcss

Tips on ensuring a div covers the entire page even when a scrollbar is present

<div id="outer_product_wrapper" style="display: none;"> <div id="outer_inner_product_wrapper"> <div id="inner_product_wrapper"> Test </div> </div> </div> I&apo ...

htmlcss

Require checkboxes in AngularJS forms

Currently, I have a form that requires users to provide answers by selecting checkboxes. There are multiple checkboxes available, and AngularJS is being utilized for validation purposes. One essential validation rule is to ensure that all required fields a ...

javascripthtmlangularjscheckbox

Adjust the color of a label based on a set threshold in Chart.js

Can anyone help me with my Chart.js issue? Here is a link to the chart: https://i.sstatic.net/RL3w4.gif I am trying to change the color of the horizontal label when it falls between 70.00 - 73.99. Does anyone know if there's a specific option for th ...

javascriptcssgraphchart.js

Menu with a full-width fluid input field using semantic-ui

I am trying to create a fixed top menu with an image on the left, an input to its right, and another input on the far right. My goal is to have the center input stretch to fill all remaining space between the image and the other input. Although I would no ...

csssemantic-ui