Tips for adjusting the CSS % unit to indicate height rather than width

Question

Tips for adjusting the CSS % unit to indicate height rather than width

I am attempting to create a CSS animated dropdown/expandable component. At present, I have classes for expanded and collapsed states defined as shown:

.expanded {
  margin-top: 0;
}
.collapsed {
  margin-top: -100%;
}

However, when I apply these classes based on the dropdown state, it appears that -100% refers to -100% of the element's width, rather than its height as intended. This results in the dropdown not collapsing fully when the element's height exceeds its width. Is there a way to adjust the dimension to which the % unit points?

If not, what alternative approach would be more effective for animating the expansion/collapse of a container?

Here is an image showing the computed sizes of my collapsed element (with margin-top: -100%): https://i.sstatic.net/lybDS.png

html css css-animations dropdown margin

Answer 1

Answer №1

Your approach seems a bit unconventional. You could consider using the standard max-height method, or even better, utilizing grid.

.dropdown {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s ease-out;
}

 .expanded {
    max-height: 500px; 
}

Although this technique is simple, it does have its limitations as you must determine the maximum height your content will require.

For a more flexible and organized solution, try implementing grid-template-rows

.container {
    display: grid;
    grid-template-rows: 0fr auto;
    transition: grid-template-rows 0.5s ease-out;    
}

.container.expanded {
    grid-template-rows: 1fr auto;
}

Answer 2

Your approach seems a bit unconventional. You could consider using the standard max-height method, or even better, utilizing grid.

.dropdown {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s ease-out;
}

 .expanded {
    max-height: 500px; 
}

Although this technique is simple, it does have its limitations as you must determine the maximum height your content will require.

For a more flexible and organized solution, try implementing grid-template-rows

.container {
    display: grid;
    grid-template-rows: 0fr auto;
    transition: grid-template-rows 0.5s ease-out;    
}

.container.expanded {
    grid-template-rows: 1fr auto;
}

Tips for adjusting the CSS % unit to indicate height rather than width

Answer №1

Similar questions

What is the best way to switch out an image every 5 seconds?

Switch between the table data elements in an .hta document

How can I update the color of table rows after the ng-repeat has been implemented?

How can I implement a search box on my HTML website without relying on Google Custom Search?

Connecting two distinct HTML pages to two disparate CSS files

How to make stylish block buttons with ReactJS and Bootstrap

ASP Table extends into adjacent column

Guide to implementing proportional height for an element using JQuery 3.3.1

Setting the font size base for my npm package: A guide

What is the CSS background-color for the header of a nested table?

Generate selectable values from JSON AJAX response using JavaScript library jQuery

Issue with alignment of sidebar and main content in Bootstrap design

Guide to Including Captions and Spans in a Table

Utilize a single CSS class or theme to style multiple boxes within a stack - Material-UI

Tips for postponing an action until the webpage is fully loaded

What is the best way to ensure that navigation takes up the full width of the screen in pixels when

Dropdown colorization

JavaScript functioning exclusively for specific list items within an unordered list

Resetting a counter with a click event or deactivating it - Using JavaScript

Insert data into a table without any formatting