Chris's public fiddles
-
Bottom aligning items in a fixed height container
Bottom aligning items in a fixed height container. Required for certificates where user's name might move into multiple lines and part of the content has to move up to accomodate without affecting the rest of the certificate.
-
-
padding-inline issue below 450px screen width.
2023-12-05 Issue where font-size changes at one breakpoint and the padding-inline is controled by a custom css property (variable) but we're getting the wrong padding below 450px. This fiddle doesn't show the problem so must be an issue with the activbase css.
-
CSS Variables and Media Query
Sample showing a media query working. NOTE: SCSS interpret
-
-
Fixed Dialogue with THREE expandable
This case is NOT working. A single red area that can be populated with blue items and scrollbars are introduced to red area when not enough space to contain the blue items. Red area covers full expandable area.
-
Fixed Dialogue with single expandable
This case is working. A single red area that can be populated with blue items and scrollbars are introduced to red area when not enough space to contain the blue items. Red area covers full expandable area.
-
Playing with fixed layout with truncation
Playing with fixed layout one dynamic width column and text that truncates.
-
Elipses and Flexbox
can elipises be applied to text when it is in a flexbox item in the same way it does in a standard block container?
-
z8ryk6ft
No-Library (pure JS), HTML, CSS, JavaScript
-
Full Height Flex Columns
Prototyped for user list in popup box (Assign Items list). Container of flex container must have a height set.
-
f1adkr5m
No-Library (pure JS), HTML, SCSS, JavaScript
-
e5bz3cfo
No-Library (pure JS), HTML, SCSS, JavaScript
-
npeqj4ha
jQuery Slim 3.4.1, HTML, SCSS, JavaScript
-
3j46thkz
No-Library (pure JS), HTML, SCSS, JavaScript
-
Section Icons and Breadcrumb Bar
Revisit Breadcrumb and Section Icons bar in Activbase to render them in a single flex.
-
QueryUI Accordion Replacement
Replacement without the bloat of QueryUI. (Started 2022-09-01)
-
gn6hewLp
No-Library (pure JS), HTML, SCSS, JavaScript
-
Line Height and Margin Bottom
Show how matching standard LH and MB makes alignment nice in some cases.
-
Card Containers wtih bottom panel
Items inside a card naturally flow downwards but the last item - marked with .bottom will be bottom aligned. Created 2022-08-31