Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add extra classes to min-vh-* #40567

Open
2 tasks done
pythonistical opened this issue Jun 19, 2024 · 2 comments
Open
2 tasks done

Add extra classes to min-vh-* #40567

pythonistical opened this issue Jun 19, 2024 · 2 comments
Assignees

Comments

@pythonistical
Copy link

Prerequisites

Proposal

Increase the scope of class min-vh-*. From only having min-vh-100, it should also include-

  • min-vh-75
  • min-vh-50
  • min-vh-25

Motivation and context

The inadequacy of the min-vh-* class is reflected in this Stack Overflow question-https://stackoverflow.com/questions/78636386/min-vh-50-is-not-behaving-as-expected-in-bootstrap-css
Ultimately the answer was given in the comments which concluded that Bootstrap doesn't define min-vh-50.

The motivation behind this change is to avoid the alignment problems and confusion that can occur without these classes as demonstrated above.

@julien-deramond
Copy link
Member

This topic has been partially discussed in several previous issues, such as issue #29697 and issue #29488. While these issues aren't exactly the same, they are in a similar vein. At that time, the decision was made not to include this feature in the framework.

I'll defer to @mdo, who has more historical context on this matter, to decide whether we should close this feature request.

In the meantime, without adding this to the framework by default, you can define the missing classes using our Utility API.

$utilities: map-merge(
  $utilities,
  (
    "min-viewport-height":
    (
      property: min-height,
      class: min-vh,
      values: (25: 25vh, 50: 50vh, 75: 75vh)
    ) 
  )
);

It will generate the missing classes mentioned in the description of this issue:

.min-vh-25 {
  min-height: 25vh !important;
}
.min-vh-50 {
  min-height: 50vh !important;
}
.min-vh-75 {
  min-height: 75vh !important;
}

@pythonistical
Copy link
Author

pythonistical commented Jun 20, 2024

@mdo @julien-deramond I have noticed, that the same excuse was given in all such feature requests that 'not enough people have requested it', the same reason is once again despite even a SO issue stemming from this. I think the feature should be added to the core as it's not as rare as we think.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants