Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[aspect-ratio] Latest aspect ratio broke aspect-ratio classes

See original GitHub issue

https://github.com/carbon-design-system/carbon/pull/5255/files

The bx--aspect-ratio-1x1 class no longer does anything.

reproduction:

Go here: https://carbon-website-hxvmb5n2c.now.sh/data-visualization/chart-types

Add the css rule:

.bx--aspect-ratio--1x1 {
    padding-bottom: 100%;
}

This is the rule that was being applied before we updated Carbon.

Issue Analytics

State:
Created 3 years ago
Comments:5 (5 by maintainers)

Top GitHub Comments

1reaction

vpiconecommented, May 1, 2020

@joshblack I’m still not sure why the aspect ratio worked until recently, but definitely agree the base class should have been there from the start.

0reactions

joshblackcommented, May 1, 2020

@vpicone to clarify, this was always the intended usage of these classes going back to the first implementation of this package. It is not a new requirement or sudden dependency.

Top Results From Across the Web

aspect-ratio - CSS-Tricks

When content breaks out of the ratio. Simply put, if you have an element with an aspect ratio and the content is so...

aspect-ratio - CSS: Cascading Style Sheets - MDN Web Docs

The aspect-ratio CSS property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and...

Aspect Ratio - Tailwind CSS

Utilities for controlling the aspect ratio of an element. ... Tailwind lets you conditionally apply utility classes in different states using variant ...

aspect-ratio - QuirksBlog - QuirksMode

The script that runs in this page changes the value of --aspectRatio . The trick here is that percentual padding is calculated relative...

The Complete Guide to Understanding Video Aspect Ratios

Today, we are going to break down what exactly video aspect ratios are, commonly used ratios, and video resolutions, as well as the...