Orz
KPCKevin Powell - Community
•Created by Orz on 8/10/2024 in #front-end
Does a TextArea component affect its siblings? Why does this happen (video)
As you can see, when this is an
input the button next to it is centered in the div. When it's changed to textarea (and that's ALL that changes) suddenly it's out of whack and the button is resting on the bottom. There are no CSS class changes or anything else changing - only the element type.
Is this normal?5 replies
KPCKevin Powell - Community
•Created by Orz on 12/10/2023 in #front-end
Page/container width suddenly increases when content appears, but not due to the content size itself
https://orzcode.github.io/tasker/
This is my Notes app - it works fine on desktop but on mobile, as soon as a note appears on the page, the page/container width seems to overflow by a few rem which causes a horizontal scrollbar to appear. However, this does not seem to be due to the size of the note itself - I've tried testing by making the notes only 2rem in width, and it still happens. It also isn't due to padding on the container as far as I can tell.
But when no notes are present on the page, it stays at a fixed 100vw perfectly!
201 replies
KPCKevin Powell - Community
•Created by Orz on 9/30/2023 in #front-end
Problem with a basic responsive container, which needs a min-height even when empty
https://codepen.io/OrzCode/pen/mdKjpYb
I have a
#content div in the middle section of this Codepen, which holds the content. This #content div is supposed to be 80% height of its parent (the middle cyan/teal section) when empty/to begin with, and should grow to scale to content size.
I can't get it to both: (1) grow with content without overflowing (which is what is currently happening in this codepen), and also (2) have a minimum size even when empty. eg when the #content div is empty, it should still be 80% height/width of the parent box. The #content div disappears entirely if I add code to make the middle section grow based on content.
To clarify, when empty, it serves as a 'shell' into which I will inject JS-based content12 replies