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
newmoon
@newmoon
They normalize the default size of all elements across browsers - but unfortunately, margins will still collapse
Morchid Chellali
@Morched23MJ
Is it mandatory to keep the test suite in my pens? Or it's a pain to the folks who are gonna check my projects for the certificate to add this test suites later on? And thus, I could remove them once I would get my certificate?
AJ Brommy
@AJ-Brommy
Ok, I see. Yes I just read the link you sent me. But most if it went over my head lol. I'm gunna have to disect it slowly me thinks. Thanks tho. I think this could involve one of the things that has bugged me for years, I may finally come to understand it!!
I think you only need to add it for yourself, to make sure you have passed the criteria. If you are not using it, take it out. I can't see it being a problem. I didn't use it last year with my old tribute you page and portfolio.
@Morched23MJ
Morchid Chellali
@Morched23MJ
I thought perhaps it would help the developers who are gonna check my projects for the certification, it ease their work.
newmoon
@newmoon
@AJ-Brommy This is another good example of margins collapsing. The <h3> elements have a margin on top that makes this white space appear between sections. Add padding: 1px to the sections and it all goes away: https://codepen.io/anon/pen/qMdPXo?editors=1100
br3ntor
@br3ntor
@newmoon thank you
AJ Brommy
@AJ-Brommy
Ok - but I still don't understand why the white disappears, but the word "section" doesn't move up!? You only add 1px, techinically 2, top and bottom, so why the big space. It's as if the grey box suddenly grows
@Morched23MJ if that's the case I think they would just add it themselves :)
newmoon
@newmoon
It appears that the gray space grows, but actually the margin above the <h3> elements collapses
AJ Brommy
@AJ-Brommy
i dont get it lol
newmoon
@newmoon
Hard to explain lol ¯\_(ツ)_/¯
I don't fully get it either
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?