Overflow utilities
Halfmoon comes with responsive utility classes which can be used to set the overflow, overflow-x or overflow-y of elements.
Commenting
|
New message!
Jane Doe just sent you a new message.
|
Halfmoon comes with responsive utility classes which can be used to set the overflow, overflow-x or overflow-y of elements.
The class names for the overflow utilities come in the the following formats:
The {breakpoint} can be sm, md, lg, or xl. If the breakpoint is not provided, the element will be affected on all screen sizes (including extra small screens). On the other hand, if it is provided, the element will be affected only for that breakpoint and up.
The {value} can be one of the following:
{value} | Description |
---|---|
auto | Sets overflow or overflow-x or overflow-y to auto |
scroll | Sets overflow or overflow-x or overflow-y to scroll |
hidden | Sets overflow or overflow-x or overflow-y to hidden |
These classes are particularly useful when combined with the sizing utilities (opens in new tab), such as in this example (opens in new tab). You can see some of these classes in action in the example below:
<!-- Overflow auto -->
<div class="overflow-auto w-200 h-100"> <!-- w-200 = width: 20rem (200px), h-100 = height: 10rem (100px) -->
<div class="w-300 h-200"> <!-- w-300 = width: 30rem (300px), h-200 = height: 20rem (200px) -->
...
</div>
</div>
<!-- Overflow-x scroll, overflow-y hidden -->
<div class="overflow-x-scroll overflow-y-hidden w-200 h-100"> <!-- w-200 = width: 20rem (200px), h-100 = height: 10rem (100px) -->
<div class="w-300 h-200"> <!-- w-300 = width: 30rem (300px), h-200 = height: 20rem (200px) -->
...
</div>
</div>
<!-- Overflow-x hidden, overflow-x scroll -->
<div class="overflow-x-hidden overflow-y-scroll w-200 h-100"> <!-- w-200 = width: 20rem (200px), h-100 = height: 10rem (100px) -->
<div class="w-300 h-200"> <!-- w-300 = width: 30rem (300px), h-200 = height: 20rem (200px) -->
...
</div>
</div>
<!-- Overflow-y hidden, overflow-y auto on medium screens and up (width > 768px) -->
<div class="overflow-y-hidden overflow-y-md-auto w-250 h-200"> <!-- w-250 = width: 25rem (250px), h-200 = height: 20rem (200px) -->
<div class="h-250"> <!-- h-250 = height: 25rem (250px) -->
...
</div>
</div>
In the above example, the inner boxes are given larger widths and heights than the outer containers, and then the overflow, overflow-x and/or overflow-y is set using the utility classes described on this page.
Please note that multiple classes (for different breakpoints) can be used on the same element, to control the overflow differently based on the screen size. This is shown in the fourth container above, where the overflow-y is set to auto only on medium screens and up (width > 768px). Otherwise, it is set to hidden.
Our goal is to make Halfmoon the go-to framework for building dashboards and tools on the web. We are already working on things like a form validator, number input, datepicker, multi-select (think Select2 without jQuery), tabs component, JSX docs, and so much more. You can learn more in the project roadmap.
However, we need your help to grow. So if you truly believe in our goal, please consider supporting us through Patreon.
The following is the highest tier, with a maximum of 1 sponsor.
(Also seen at the top of the page)
The following is the normal tier, with a maximum of 10 sponsors.
AYCD
Automation Done Right
Sponsor (9 available)
Halfmoon needs your support! Become a sponsor to place an image and description of your product here. Click here
The following people have generously decided to support Halfmoon.
Become a backer on Patreon .