FreeCodeCamp/HelpFrontEnd

Get help on our Front End Development projects.

AJ Brommy

@AJ-Brommy

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."

https://css-tricks.com/what-you-should-know-about-collapsing-margins/

https://twitter.com/verpixelt/status/601852215419138048

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

Yashwardhan Pauranik

@yashwp

https://stackoverflow.com/questions/51979856/console-log-doesnt-fire-on-document-scroll-reaches-to-end
Please help me with this...

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

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Determine_if_an_element_has_been_totally_scrolled

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 ;)

Where communities thrive

People

Repo info

Activity