styles - Anthony Marques

Of course as always there is a TLDR thing somewhere down there.
I come across this from time to time and I normally forget all about it…then I just end up always using css (come on I can not be the only one)

Lets get to it, you have either built or going to build an angular project. In the past i have seen it ask and say “you wanna css, scs,s sasax and …” other options.
so i’d normally select scss and then it just worked.

TLDR COMMAND FOR ANGULAR PROJECT ALREADY BUILT
If you have already built an angular project then run the following line of code.

ng config schematics.@schematics/angular:component.style scss

This should add the style as scss in your angular.json package
for more in-depth detail you can read up on the source. on the one that has 557 votes oh wait 558.

ANOTHER THING TO NOTE
if you get the following error:
“Error Module not found: Error: Can’t resolve PATH in PATH or “didn’t return string.

Be sure to update your component’s style location cause it will still point to your component.css file

In the reference above, they also show you how to add scss to a new project by use of the following command:
TDLR COMMAND FOR NEW ANGULAR PROJECT

ng new NEWANGULARPROJECTNAME --style=scss

Ok that’s it good luck
If this solution did not work for you, please feel free to comment. I know there never is a solution for everything.

(AS ALWAYS THERE IS A TLDR BELOW)

The sticky footer. If you have been searching for a while then i think you know what a sticky footer is by now (if not here is a good explanation of one. The challenge is that there is no short way of doing “position stay down please” like so:

position:stay-at-the-bottom-please-thanks-k-bye

You sadly need to know what is going on and what other components/elements are invovled in order to get the position of the footer right at all times…sticky footer style kinda times.

So we now know that there is no one position solution and no position: “sticky” is not an option<insert sarcastic tone>

please note the styles, the colors are horrible.

I tried with the min-height set to 100%, but no dice for me for some reason. The sticky footer is a tricky concept to catch. You need to understand the position property and also its relationship with the absolute position.

Think of the absolute position… its relative to the other style/component overall position.

(had to add a pause when proof reading the sentence)

If this doesn’t work..i would only imagine that the scope of your relative element is not aware of the style that has the position of absolute. Its ….relative to your project and how its structured.

The margin and padding being set to zero is to make sure that the “min-height” takes on the full page. In some cases you may not want to have a scroll bar showing when the page is blank.

TLDR

Of course this is what worked and made sense to me i’m open to update this post or remove it entirely 🙂 have a great evening. (Yes this is a repost on a footer topic that i tried to cover and understand and to which i didn’t understand, so this should work i’m sure of it)

html,
body {
  margin: 0;
  padding: 0;
  
}
.wrapper {
    min-height: 100vh;
    position: relative;
    background-color: rgb(227, 228, 231);
}

.content {
    min-height: 100%;
}

.footer {
    position: absolute;
    width: 100%;
    color: rgb(42, 63, 121);
    height: 100px;
    bottom: 0px;
    left: 0px;
}

Notes:

html, body style updates is to ensure that the wrapper class takes in the whole screen size without padding

.wrapper has that min-height: 100vh (100% of the view height of the screen/device,
position is relative, think of it as a note of where this element is

.footer position absolute, accordance to the relative positioned element
bottom and left refers to setting the element relative to the other element and
place element at the 0th bottom left px of the screen…of the element

Sadly i only have an angular sample project, but it is better than nothing and the results stay the same this uses basic css and works on IE so.. apparently flex box and sticky footer doesn’t work for IE so i could be corrected on this.

Repo for your tinkering: tony2tones github

Tag: styles

How to add scss to your Angular project fast

[newbie] sticky footer css, a solution