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!
102 Replies
I've been pulling my hair out trying to solve it
do you have margin on your body?
Thanks so much for asking!
No, I don't. I have margin set to 0 at the top of the css, via a global reset (
*)
Just scanned the rest of it too - only a couple of small vertical margins. Certainly no margins on the notes
I used Vite to bundle it up, so I wish I could link to the stylesheet, I mean I can, but it's condensed into one big ball of continuous CSS thanks to ViteAre you also using box-sizing border-box in your reset ?
And what about the container the notes are rendered into
Yes! I am
Hmm that’s very strange
Good question here too. I tried some
max-width on those, to no effectAre you using any pseudo elements ?
Yes, I suppose - and a
dialog, but I don't think that affects it...
The pseudo elements aren't on the notes though
and the thing only bulges out horizontally when a note is present
(it might be doing this on desktop too, technically, but you only notice it on mobile)Your pseudo elements don’t get border box sizing unless your reset is *, *::before, *::after. Just trying to narrow down where the space may be coming from
Using any vw or vh versus dvw dvh ?
pretty much all of them are vw/vh yes - I did try whacking
max-width: 100dvw on the container
but to no availAre you using media queries?
Sounds like the problem is on mobile only
That's a good line of thinking.
Begrudgingly (I hate having to resort to them) yes I am. But nothing that should affect it though (famous last words right)
I know this doesn't mean much without you knowing the full CSS/project
but as an example
The problem looks like when the note is rendered, the whole container shifts over, including the template that takes the notes , and creates the horizontal scrolling
Yes you're right, and one key thing I noticed is the footer (where the github logo is) gets pushed below the full container
it's easily noticable as there'll be a tiny section below the container where the black sidebar cuts off
(if you scroll up/down, this should happen to you too)
Is there a gap in bw the sidebar and the other container? What does your html look like?
Is it body >> sidebar and container or body>> container with sidebar and main ?
https://github.com/orzcode/tasker/blob/main/index.html
that's the HTML there FYI (I didn't fully get your 2nd question, but maybe this sheds some light)
GitHub
tasker/index.html at main · orzcode/tasker
Todo / Notes project. Contribute to orzcode/tasker development by creating an account on GitHub.
so it's
body > 'full page container' > other elements (nav which is the sidebar, header which is top right, and main which is the main)
What is the dialog element ? And groupPopup ? I need to look at this on my computer , not keeping it straight on mobile haha
yeah so sorry, it must be confusing.
The dialog element is when you tap a note - it brings up a dialog with a larger version of the note, and you can edit the note this way
the groupPopup is nothing major - that's part of the form, when you click the group button, it pops up
to select a group
a tiny little bubble
Ohh gotcha. Does your main have any padding or margin? It’s like it’s fine when it’s empty but if there’s no width on it it won’t take box-sizing, so when there is an element inside that takes up space it adds the padding to that element. Maybe try putting width 100% on the main ?
Or the mains direct child div
Yep, I did try that too. No dice. Also no padding (well there is, but only 1 rem - and it's removed for mobile via MQ)
Hm hm hm
I tried several "max-width: 100%" on those 'main' containers (there's technically two, I think)
but good point about the difference between having no content and having some content
Is there a gap along the inline axis? You could try 100% - 2rem or whatever the gap is
The inline axis 🧐
I could try
100% - 2rem as a MQ for the #main I guess?
Seems like a workaround for an issue though, and it might affect layout in other ways, but could try.Like the x axis. Gap between containers. I’ll have to look on my computer tmrw to understand your markup better . Is your css in that repo ?
My css is indeed in that repo!
It's all in there, but it has been compiled with Vite, so the CSS is a big continuous ball of CSS, isntead of being laid out normally
I can provide that though
Well gap isn’t taken into account so anything you have with gap needs to use a calc to take it into consideration. Not necessarily a workaround.
I do have gap in those containers yeah
but
gap is only between items afaik
so it wouldn't add extra space around
I.E : since it's a single column on mobile, the only gap should be verticalI’ll think on this and take a look tmrw if you haven’t solved by then right so on the parent container where you have gap defines it would need to be 100% - gap. The gap goes vertically between the two but affects the x-axis/inline-axis
Makes it wider then if you had no gap
Just to clarify - gaps only exist on smaller child elements, and the 'main' (where the notes are), but not on the overall page container
and if the mobile view puts the notes into single column, meaning there is only a vertical gap, would
100% - gap make any difference?
seeing as we're dealing with a horizontal shift not a vertical one
I very much appreciate the help though and happy to wait!There’s no gap between the sidebar element and the container holding the notes? I think we are confusing axes with one another. I’ll take a look tmrw so we can be on the same page about what has gap and where
Correct! AFAIK.
#main has a gap, but #main isn't the page container, it's just the container for the area where the notes are
But yes thanks for your time - no sweat - enjoy your day
I gotta go too, so thanks again for the help and would love to discuss this tomorrow 🙂@Orz you want it to be like this?
Basically, yes!
except without being cut off, of course
(the note)
do you want the scrolling container to be the bottom right cell, right? Or you want the whole page to scroll?
For the width of the note, you have some funky way to calculate the size that triggers overflow. I think you should approach it differently. This is a bandaid
notice how I add another token for min size in the grid-template-columns
thanks so much for this!
Do you mind if i review this tomorrow? You've been a big help
Actually, I tried it just now by adding that token you mentioned - by jove, it works!
😆
I'd love your debrief when you have time. Including your thoughts about how I should've approached it differently, and how you came up with this etc. But yeah I can see how that might've been the problem - i suppose i should've looked at that too
Got it working then?! Love me a minmax(), grid is so awesome! Those fr units are so helpful so that gaps don’t cause overflow !
Yes indeed, it was that little
min(100%) thing he added inside there (previously, it was repeat(auto-fit,minmax(calc (35rem + 2vw)), 1fr)
Frankly I'd love to get @phyrasaur 's 'debriefing' on what made him come up with that, but I'm glad it works - thanks for your help too!
I should've looked at that earlierIt’s common to put a min inside of a minmax , min which take the smaller of two values. I’m so glad it’s solved !
Fair point. That stuff can get so mind-bending at times, especially when it's nested within other things like it. I'm super glad it's solved too, I was pulling my hair out. Your support was much appreciated 👍🏼
For sure, some of these grid values can get so long; perk is it’s easy to find in your style sheet because it’s the only thing that is that long! Woohoo to @phyrasaur for finding the issue !
don't put
user-select: none; in there!
if you need to enable selecting something somewhere, for some reason (E.g.: contacts or a code block), then you need to override it for everything inside an element, including the element itself
https://jsfiddle.net/8g0jz6b9/2/ <-- if you test this, you will see you can't select the text, even though the pre is set to be selectable
try to replace the * with body or html and you will see it will start working as expected@Orz why
35rem + 2vw? and why you want to set a width on the note? and why the main layout grid uses 8fr and 7.5fr? Why not just 1fr?the
+ 2vw was probably a mistake on my part, i have that sizing on the notes to help with responsiveness across devices. I probably figured that the area they reside would also need to be the same size?
As for the 8fr, that's simply because it makes more sense to me to divide up grids based on 10 FR
eg 8fr = 80%
It's easier for my brain to comprehend by looking at it that way
But none of these seem to have been the issue anyway?
Thanks. Usually I wouldn't - but there were many elements I wanted to use that on. So it was in fact easier to do it this way, rather than the other way aroundi figured it out, but if you REALLY need to do it, don't do it for everything. just the top-most parent instead
in this case, just for the html or body, not every single element
it achieves the exact same effect
since you're likely to use a style to remove the padding on the body and/or enable smooth scrolling, you can just move the style there
You already have the
grid-template-columns, you don't need it as a width. The underlying issue is I think you confused -content with -items that you need to put the width so that it behaves like justify-items: stretch
what you need is justify-content: centerSmooth scrolling?
wow, not sure how i missed this
i wonder if that alone would've solved it
This makes sense if you also use fr on other column/row. I think 1fr would have the same effect as per your template
Yeah true
That's why I said "I" would personally approach this differently. If I were given this code to continue working on, I need context why such numbers used
Also this one, have you decided where the scrollbars should be?
I guess the whole page; the form header area shouldn't be sticky if that's what you mean
how it works now, basically.
I saw you used
height: 100% so I was wondering if you want it to be scrollableoh, no I remember I had to add that for some reason, it wasn't filling its available space at one point
might have been when i first started and it had no content
@Orz because you set the grid row, the overflow is not ideal and notice how the top notes overlap a bit
Damn, I never noticed that, can you explain why?
"because I set the grid row"?
there are 2 issues. the fixed
height and the grid-template-rows I changed it to min-height and turn off the row
well, that is a nice change which fixes the vertical overflow when the form is open (and there are lots of notes)
however...
originally:
with your change:
so you can see, the top header area gets quite cramped when there is lots of notes
I think that's why I had the
min 25% on the rows
instead, I've just done this:
grid-template-rows: minmax(25%, auto) minmax(7.5fr, auto); eg i also made the 2nd row a minmax
and that seems to solve it?
the note area gets pushed down as the header/form expands
Hmm actaully that's not great either
it should be the the height of the form's initial expansion, and also be able to grow
does that make sense?Why don't you just add margin/padding for the top left then?
or
min-height if you want it to be arbitraryI thought
min was achieving min-height?
Let me be more clear: the goal is to have the header (where the form is) large enough to accomodate the size of the form when it gets hovered. EG so it doesn't cause layout shift. And also to have the header grow as the form continues to expand (eg with text added. obviously this will cause layout shift but thats ok).
And if i add padding or margin to the form header, it will cause a layout shift when it expands initially. right?Hmmmm, if that's the case, maybe a halfway FLIP? It needs some JS. You load the hovered version, set a min-height to the current height and then set it to the unhovered version. I'm trying to think if there's a pure CSS way for this 🤔
FLIP principle https://aerotwist.com/blog/flip-your-animations/
FLIP Your Animations
Animations in your web app should run at 60fps. Not always easy to achieve that,and it really depends on what you're trying to do, but I'm here to help. With FLIP.
Haha yeah that's quite a complex solution isn't it. I would've thought this kind of thing would be easily achievable with the right CSS
Very good suggestion though
just not sure i want to do that
or just put an arbitrary min-height
yeah i could, the only issue is that it's tricky to determine that height considering mobile etc
based on 1x magnification
I'm thinking of something to do with
visibilityhmmm
essentially the space won't collapse but then you have another issue the box will remain big
yeah that wouldn't be ideal either would it - kind of defeats the purpose
just add a breakpoint when the stuff inside wraps then?
anyway, my main point was please consider
min-height/max-height/min-width/max-width rather than height and width straight away it's easier to make it responsive this waythat's a really good point!
I didn't realize this part of the form/header wasn't working perfectly - i'm sure i had it working previously
some tough things to consider now..
Actually - i was right @phyrasaur . It does work perfectly with the current setup. The only issue is when there is "too many" notes present.
eg with this setup (plus your suggestion of
min-height)
Thanks for your wisdom by the way - give this a go and i think you'll see it's working fine now, even with many notes
Oh... actually, no it isn't. By doing this, it breaks mobile - it causes the header to have huge padding for some reason on mobile
works perfectly on desktop but not mobile - but i can fix that with a MQ i guess
Of course if I do that.. then it won't auto grow on mobile... christ what a headache haha
yeah the issue is the number of notes. This is mobile view with many notes:
makes the header huge for some reason
It's because before this you make the parent to have a fixed 100vh height. Now it grows as much as the height of the content so 25% will be the 25% of total parent height. The simplest workaround is to use 25vh instead
I'm on the other side of the world btw. And currently working (as a designer not a dev 😅 ). I think I have a solution for this it will involve a bit of js but you do use js for the animation anyway
the js part if to expand the box, everything else is css
lemme do the quick css part first
this is the base, will need to FLIP the box for animation https://codepen.io/petpeeve/pen/ExrJjgg
basically, I make the box as a separate child element that will surround the visible elements rather
than changing the parent size/border
you still have the space, so no layout shift
holy shit
grid-template-rows: minmax(25vh, auto) minmax(75vh, auto);
I think that might have magically fixed everything?not ideal imo but serviceable
Actually, I spoke too soon
with this, it's back to the header being really large/padded when there's no notes
sigh 😅
and...
grid-template-rows: minmax(25vh, min-content) minmax(25vh, auto);
I think this did actually fix it. Changing auto to min-contentor just
minmax(25vh, auto) 1frWow, yes that works too!]
btw gtg I've been procrastihelping on discord for too long 😂
I still think visibility is the ideal way
Yeah I appreciate your help so much
Sorry for wasting your time - you can add "helped some asshole with his bullshit" to your CV now
scroll-behavior: smooth;
when you click on an anchor for something in your page, it smoothly scrolls to it
instead of jumping@Orz added the js part to expand the box I don't use flip because the tearing of the border when scaling on single axis
the space is retained and you don't need any arbitrary numbers to set the height of the top part
Well I'll be damned. Never even heard of this. Thanks! You're basically suggesting I have this in my global reset? (as I can't see how I would use it in this particular app)
NO
im saying the exact oposite
im saying to throw it into the
body or the html selectors
alongside the user-select: noneahh right
so yeah, basically apply it on the global (body/html) CSS - you use this much in your projects?
This is amazing!
I think myself and a few others here could use this in the future. Right now, it seems as if our brainstorming yesterday solved it with pure CSS
i don't do a ton of projects, but, if i do, i use the smooth scroll