Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Aug 17 09:32
    User @bjorno43 unbanned @linkin-park
  • Jun 20 21:19
    @bjorno43 banned @shenerd140
  • Apr 25 17:13
    @mstellaluna banned @cmal
  • Jan 08 22:05
    @mstellaluna banned @dertiuss323
  • Nov 07 2018 04:42
    User @texas2010 unbanned @ows-ali
  • Nov 02 2018 16:25
    @texas2010 banned @ows-ali
  • Oct 12 2018 05:50
    @bjorno43 banned @NACH74
  • Oct 05 2018 23:02
    @mstellaluna banned @JomoPipi
  • Sep 16 2018 12:21
    @bjorno43 banned @yash-kedia
  • Sep 16 2018 12:16
    @bjorno43 banned @vnikifirov
  • Sep 05 2018 08:12
    User @bjorno43 unbanned @androuino
  • Sep 05 2018 07:38
    @bjorno43 banned @androuino
  • Aug 23 2018 16:57
    User @bjorno43 unbanned @rahuldkjain
  • Aug 23 2018 16:23
    @bjorno43 banned @rahuldkjain
  • Jul 29 2018 14:13
    User @bjorno43 unbanned @jkyereh
  • Jul 29 2018 01:00
    @bjorno43 banned @jkyereh
  • Jul 10 2018 22:09
    @bjorno43 banned @manafn
  • Jul 06 2018 15:20
    @texas2010 banned @imlegend19
  • Jul 03 2018 12:28
    @bjorno43 banned @vbvmatta
  • Jun 29 2018 13:54
    @bjorno43 banned @OGTechnoBoy
AJ Brommy
@AJ-Brommy
to be if it collapses - disappears - then surely everything should just move up. its as if it swaps it for padding
lol
So how does one ever get a 1 pixel padding
newmoon
@newmoon
This does the same thing:
section h3 {
  margin: 0;
}
Bjorn van de Peut
@bjorno43
padding: 1px;, not that hard..
:innocent:
newmoon
@newmoon
I don't know how to explain it any better than with that example. The space between sections collapses by setting h3 to a margin: 0 or setting the section to have 1px of padding
AJ Brommy
@AJ-Brommy
@bjorno43 goto the link @newmoon sent, go to section, add padding: 1px; and see what happens lol
newmoon
@newmoon
To answer your question about how someone gets 1px of padding. Most people use a reset css of some type. The third way to remove the spacing between sections is to go to Settings -> CSS and select the radio button for "Reset"
AJ Brommy
@AJ-Brommy
Yeah no worries, I really do appreciate how you laid that out to show me. I will play with it and try make as much sense of it as i can :) its really helpful so thank you
newmoon
@newmoon
Always happy to add more confusion lol
AJ Brommy
@AJ-Brommy
lolololol
but these things are important. I've been dabbling for years, and every now n then something would throw me, things wouldn't go as expected, and I could never figure it out, i didn't know about collapsing margins. I think this is the key. I think this is important!
newmoon
@newmoon
OK, so some spacing walks into a bar, trips and falls on the floor. The bartender asks if he should be cut off and the spacing replies, "No, I'm just a collapsed margin."
AJ Brommy
@AJ-Brommy
Hmmmm ok thats interesting
So it's as if it's there, we just can't see it
"On a more serious note, collapsing margins are real and they can be a real pain in the neck if you're not aware of what they are and how they behave. Here are a couple of scenarios where we'd see these little buggers come into play." --- YES!!! I wish I knew this years ago, but no course, or no book, ever told me! :( lol
Bjorn van de Peut
@bjorno43

@AJ-Brommy That's actually pretty normal. All objects have default margins and paddings. When you override them, they disappear. So if the default was 10 and you change that to 1, it looks like it becomes a lot smaller. These days most ppl use Normalizers to fix this. In the earlier days of CSS ppl used:

* {
    padding: 0;
    margin: 0;
}

To fix that issue. But that's considered bad practise now.

AJ Brommy
@AJ-Brommy
Why is it considered bad practice? its short concise and does the job :(
Bjorn van de Peut
@bjorno43
Because it overrides all objects. Not just the ones you want to override. It means coding a whole lot more when the project becomes bigger
AJ Brommy
@AJ-Brommy
ah because there are many, so best to just include a present pre written normalize style sheet
Bjorn van de Peut
@bjorno43
Exactly
alpox
@alpox
@yashwp You may want to use clientHeight instead of offsetHeight as those are calculated slightly different. The scrollHeight calculates like clientHeight
@yashwp MDN even has your exact case written out
Yashwardhan Pauranik
@yashwp
@alpox can you answer on SO for the changes you want me to do...
alpox
@alpox
@yashwp No, I'm not active on SO
Yashwardhan Pauranik
@yashwp
Ohh, so can point out the changes here?
alpox
@alpox
@yashwp The link I showed you already shows them
Yashwardhan Pauranik
@yashwp

  @HostListener('document:scroll', ['$event'])
  onScroll(event: any) {
    const elm = this.el.nativeElement;
    console.log(document,)
    if (elm.clientHeight + elm.scrollTop >= elm.scrollHeight) {
      console.log('End');
    }
  }
Christopher
@bradley1492
@newmoon thanks for the overflow issues tip!
newmoon
@newmoon
Yeah, no problem @bradley1492 add that word-break property to your code CSS and it should stop overflowing. Or, perhaps you can put an overflow on your <code> elements instead.
Christopher
@bradley1492
@newmoon what is code?
or code css?
newmoon
@newmoon
@bradley1492 CSS for the <code> element, is what I meant to say. Sorry about that ;)
<code></code>
Christopher
@bradley1492
@newmoon I never use that
newmoon
@newmoon
@bradley1492 Line 34 of your CSS
and in lots of places in your HTML
Christopher
@bradley1492
@newmoon ahhhh
@newmoon hahahah yesss sorry you're right
newmoon
@newmoon
No problem :)
Christopher
@bradley1492
@newmoon hm but it still doesn't work
https://codepen.io/bradley1492/pen/aabLzY?editors=0100
newmoon
@newmoon
@bradley1492 That's because you have word-break: normal for your code element further down in your CSS(line 76), so it gets overwritten.
Christopher
@bradley1492
@newmoon hm it's still not working here altough I deleted the one on line 76
https://codepen.io/bradley1492/pen/aabLzY?editors=0100
newmoon
@newmoon
Hmm, a lot of code changed. Remove white-space: pre from your code element's CSS too. That makes it better, but still overflows under 600px. @bradley1492
Christopher
@bradley1492
@newmoon Are other people able to write into my pen?