I'm in a phase of adding router transitions to the angular application and I'm facing weird problem. Styling for router-outlet gets applied to the element below it in the DOM hierarchy.
Here's my code:
<main role="main">
<!-- Header -->
<app-header class="topnavbar-wrapper"></app-header>
<!-- Page content-->
<div [#fadeAnimation]="o.isActivated ? o.activatedRoute : ''">
<router-outlet #o="outlet"></router-outlet>
</div>
<!-- Footer -->
<app-footer></app-footer>
</main>
Styling:
main {
box-sizing: border-box;
margin-top: 4.5rem;
min-height: 92vh;
padding-bottom: 4rem;
/* Height of footer */
position: relative;
}
router-outlet ~ * {
position: absolute;
height: 100%;
width: 100%;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
color: #fff;
background-color: $secondary;
}
Animations work smoothly, I have no problem with that. But the router-outlet styling is applied to element below it and this makes footer fixed at the bottom, overlaying the content. If I clear styling of router-outlet element then animation won't work correctly.
As you can see on the screen <app-overview> element has router-outlet styling which is what causes the problem. I guess that solution lies in correct scss styling but so far I wasn't able to figure it out.
The selector router-outlet ~ * selects all of the router-outlet siblings, that's why it applies on app-overview.
Also you shouldn't try to style a router-outlet since it is not rendered (it's just a placeholder)
I was working on an Ionic Project which primarily uses Angular, I wanted to style router outlet to follow my CSS grids applied, ion-router-outlet didn't work out, so I used router-outlet and it worked fine. Related to the question but not that specific, might help someone out there.
Related
Height is not added properly in the modal body when the modal is opened as a separate component using ng-bootstrap.
Issue exist on below stackblitz link
https://stackblitz.com/edit/angular-xwqusl?file=src%2Fapp%2Fmodal-component.ts
Working Example:
It was working as expected without a separate component.
https://stackblitz.com/edit/angular-tfpf81?file=src%2Fapp%2Fmodal-options.ts,src%2Fapp%2Fmodal-options.html
Does anyone know about this issue?
Thank you for the stackblitz, I think the issue is due to view encapsulation - being set as none, so css didn't get applied.
In Angular usually the html element with the component selector ngbd-modal-content will not take the height of the parent, we need to manually adjust it with css, its a pain point of angular!
// encapsulation: ViewEncapsulation.None, // <- remove this
styles: [
`
:host {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: solid 3px yellow; /* for debugging purposes */
}
`,
],
forked stackblitz
I am having issues with my sticky table header in my angular 6 project.
I have a condition in my .ts file that applies the 'sticky' class only when the user scrolls towards a certain point in the page. That part works great. The issue is that when the position: fixed class is applied, it only works if top:0.
The css looks like this:
.sticky
{
position: fixed;
top:0;
width: 100%;
background-color: #fff;
padding-right: 20px!important;
}
But if I change top:0 to top:100, too account for the header of the webpage (that is build on another component) then the top:100 attribute won't apply and be considered invalid.
The html is a little tricky but looks a little like this
child.component.html
<div>
<navigation></navigation>
<div>
</div>
<div class="table-responsive " >
<table id="tabletop" #tabletop class="table scroll">
<thead #stickyMenu [class.sticky]="sticky">
<tr id="content" class="row1">
<tr id="content" class="row2">
<tr id="content" class="row3">
</thead>
</table>
</div>
</div>
app.component.html
<header></header>
<app-child></app-child>
<footer></footer>
I want the thead to stick right underneath the header that lives on a parent component, so it is still visible.
Why is that, and how can I get my position:fixed attribute to actually keep something at the top of the page?
Any help is greatly appreciated!
I wanted to post this by comment, but looks like I need at least 50 reputation to do so. So, here it goes:
But if I change top:0 to top:100 {...}
The unit of the top seems to be missing. You probably wanted to set it to 100px? Probably the 0 value confused you as it is allowed with or without a unit.
One more thing, the id of each element must be unique, but you have 3 id="content" there.
Alternative solution
You can use position: sticky css property on your thead element (and also on the respective th child elements). This way, you wouldn't need to handle the scroll event by yourself and let the css do the job for you.
Example:
I only include the scss part here, since the code snippets make the post unnecessarily long. You can see full example on stackblitz.com.
thead {
position: sticky;
top: 0px;
tr {
position: sticky; top: 0;
/* the top value can be adjusted according to <header>'s height */
&:nth-child(1) th { position: sticky; top: 110px; }
&:nth-child(2) th { position: sticky; top: 132px; }
}
}
I am trying to make a header that is localized under a div. When you scroll and the header reaches the top of the page it should "stay" there. I am using Angular so I found this solution: Bind class toggle to window scroll event here and I am using it for adding the class fix-header. In the inspector I can see that the class gets added but the styling does not apply when it is added. Here is my CSS for making the header fixed:
.wrapper {
background-color: pink;
height: 100px;
z-index: 1;
}
.wrapper .fix-header{
position: fixed;
top: 10px;
}
The "fix-search" class is added here:
<body ng-app="myApp">
<div ng-controller="MyController">
<div class="banner">
<div class="dummy-container"></div>
<div class="wrapper" change-class-on-scroll offset="200" scroll-
class="fix-header">
</div>
</div>
</div>
</body>
The line change-class-on-scroll offset="200" scroll-class="fix-header" adds the class fix-header to the wrapper div.
Here is some working code: https://codepen.io/Martin36/pen/jmbEgJ
So my question is, why doesn't the class properties get applied when the class is added?
Why don't the styles get applied when the class is added?
Because you are referencing the wrong class, your CSS target should be:
.wrapper.fix-header{
position: fixed;
top: 10px;
}
Note no space between the wrapper class and the fix-header class
I incorporated the comment given by #Ronnie and the answer from #cnorthfield and made an updated pen: https://codepen.io/Martin36/pen/jmbEgJ, for those of you that are interested. The header now sticks to the top of the screen when the "dummy" div is scrolled past. The following changes were made:
/* Since the classes are on the same element there should not be a blank between them */
.wrapper.fix-header{
background-color: pink;
height: 100px;
/* Without the "width" the header disappears */
width: 100%;
z-index: 1;
position: fixed;
top: 0;
left: 0;
}
To elaborate on cnorthfield's answer:
/*Apply style to all elements of both the wrapper class and the fix-header class*/
.wrapper .fix-header
{
}
/*Apply style to all elements which have both the wrapper and fix-header classes*/
.wrapper.fix-header
{
}
Notice how the addition/removal of a single space significantly changes the meaning of the selector.
Is it possible to place an Html element outside of a newly generated one?
Well, I have an IONIC2 app that generates a new element <scroll-content>, the issue is that this element has some CSS properties that affects the child elements.
So, what I would like to do it either to place that my div element outside of that <scroll-content> or even better to disable the CSS properties of <scroll-content> on the div
Here is the code, so I can make things clearer:
HTML
<ion-content id="contentPadding">
<div class="header">
</div>
</ion-content>
When Ionic renders the above code, the browser generate something like this:
HTML
<ion-content id="contentPadding">
<scroll-content>
<div class="header">
</div>
<scroll-content>
</ion-content>
CSS:
.top{
background:black;
}
//generated
scroll-content{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
display: block;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
will-change: scroll-position;
}
I guess, it's clearly shown that a new element called <scroll-content> is being created and <div class="header"> inherits all the css properties of <scroll-content> which I would like to avoid in my case.
Your header (child) is inheriting its parent's (scroll-content) CSS styling. You need to clear any unwanted inherited rules by explicitly changing the inherited styles. For example, if you want to reset the css-display, write
.header {
display: initial;
}
Hopefully in the future we can avoid this with the all:initial trick - however, it currently isn't supported enough.
I downloaded a HTML template, started modifying some items and first thing I want to do is to change the id attribute for an <article> element.
I only changed that, and so the site appeareance changed to not a desired one. Console shows any CSS issues.
This is original HTML part of code I'm interested:
<!-- Nav -->
<nav id="nav">
<span>Home</span>
<span></span>
<span>Email Me</span>
<span>Twitter</span>
</nav>
<!-- Main -->
<div id="main">
<!-- Me -->
<article id="me" class="panel">
<header>
<h1>Diego BenjamÃn <br><br> Aguilar Aguilar</h1>
<!-- <span class="byline">Senior Astral Projectionist</span> !-->
And just changed:
<span>Home</span>
<article id="start" class="panel">
This are the visual changes:
What's that I'm missing or should fix?
EDIT
Right after comments I went and saw CSS file and found out:
/*********************************************************************************/
/* Panels */
/*********************************************************************************/
#main
{
position: relative;
overflow: hidden;
}
.panel
{
position: relative;
}
/* Me */
#me
{
}
#me .pic
{
position: relative;
display: block;
}
This is because the id me is being styled in the CSS.
Taken from the CSS (I downloaded it):
#me
{
}
#me .pic
{
position: relative;
display: block;
}
#me .pic:before
{
content: '';
position: absolute;
top: 0;
left: 0;
background: url('images/overlay.png');
width: 100%;
height: 100%;
z-index: 1;
}
Basically, if you want to change the #me ID, you have to go into the CSS style sheets and change it there too.
Update
There are various different stylesheets. I took that snippet from style.css, however there is also style-desktop.css that has various different #me styled in. My recommendation is to go through every css file and edit every instance of #me to be what you want.
Like commented by Hamed Ali Khan, the id is probably used in the stylesheet.
In your stylesheet you should change all styles that contain #me to #start.
Or you could add an extra class to the element. For example <article id="start" class="extraStyle panel">. Then you should change all #me to .extraStyle.
You have to change that thing in CSS file too.
The styles applied with id in the CSS, like #article-id .child{some :style; }
What you changed in the HTML may reflect the same in CSS too.
Replacing the ID broke the styles related to your #home element.
Open your CSS file, and rename all #home in #me.
This is probably happening because some elements in your CSS are targetted as shown below
#foo .bar{
}
This means that it affects elements with the class bar inside of the element with ID foo. That's why changing of an element's ID can really mess up it's content's style.