In my app.component.html, I placed a mat-toolbar above a router-outlet like so:
<mat-toolbar color="primary">
<span>Tattoo Share!</span>
</mat-toolbar>
<router-outlet></router-outlet>
The problem is the router-outlet content is overlaid on top of the toolbar. This content should be beneath the toolbar. How should I correct this? I tried placing things inside block elements such as div to no avail. There is also this CSS on mat-toolbar:
mat-toolbar { position: fixed }
You should use CSS in the styles.css to put a margin-bottom equals to the height of the toolbar in itself. Also use an ID so it won’t apply to other toolbars
mat-toolbar#over-router {
margin-bottom: 40px; // check the actual height in the browser
}
You can use flex layout.
<div class="home-main">
<app-toolbar></app-toolbar>
<div class="home-container">
<router-outlet></router-outlet>
</div>
</div>
.home-main {
height: 100%;
display: flex;
flex-direction: column;
}
Got it to work using some CSS on my toolbar:
mat-toolbar {
position: fixed;
top: 0;
z-index: 1;
}
Related
For some reason, whenever I apply display flex to a div that holds an ng-template, it does not want to be 100% width. Whenever I remove the display flex property, the with is back to 100%.
I've removed some code and tried to simplify this as much as possible.
Basically I have this:
There is a main component that has a router outlet. The div encapsulating the router outlet already has a width and height of the display.:
<my-maincomponent>
<router-outlet></router-outlet>
</my-maincomponent>
Inside the main component I have this HTML
<div class="content">
<ng-content></ng-content>
</div>
To my understanding, what this does is it projects the contents of router outlet into the ng-template tag, and this works correctly.
The class "content" looks like this
position: absolute;
top: 100px;
bottom: 50px;
right: 50px;
left: 50px;
display: flex;
align-items: center;
justify-content: center;
I am using flex on this div becuase I want to center the content vertically and horizontally.
Ive made the router outlet route to a demo component that only conatins this HTML to demonstrate the problem.
<div style="background-color: red; width: 100%; height: 100%;">
<p>Hello world</p>
</div>
I want to have an object falling from the sky while scrolling down the page. The idea is: You have the object div not moving. It should be in the center of the page (50 px from the top of its parent) and when you scroll down it should scroll down too.
Whats the catch? The object is in another div. I only want the object to be visible inside this div. So not on the entire website.
What have I tried?
1: Fixed positioning, but then it shows up on the entire page, z-index does not work with fixed.
2: Relative positioning on the parent and absolute on the child but then the object div does not go down the page when I scroll.
Visual representation::
On scroll down:
React Component:
<div className="container">
<div className="container--object">
<img src={object}/>
</div>
</div>
CSS
.container {
min-height: 100vh;
position: relative;
}
.container--object {
position: absolute;
top: 50px;
}
My parent component is the homepage. And the siblings of this react component are other div's. The functionality to make the div move down the page is what I am struggling with, how can I move the object div down? Is there a way to base it off the top of the browser?
Ok if i understood correctly, you want something like this? I used an image and some test text
.container {
min-height: 100vh;
height: 2500px;
position: relative;
}
.container_object {
position: fixed;
top: 50px;
}
<div class="container">
<div class="container_object">
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
</div>
<div style="position: absolute; top:500px">
TEEEEEEEEEEEEST 111111111
</div>
<div style="position: absolute; top:800px">
TEEEEEEEEEEEEST 222222222
</div>
</div>
You should see this snippet in full page
I am newbie about css and html design. I use flex in my bootstrap design.
I set the flex to sort the components from left to right direction.
As on the this site.
I want to shrink the slider to the right and place another component on the left side. I tryed to removing this line over #GrandCarousel.
element.style {
/* left: -396.5px; */
}
how can I make this feature
Create two div inside #GrandCarousel div. Let's call them left-section and right-section. Give them width: 50%; Put all the current contents of #GrandCarousel div to the right-section. After this you might face issues in image alignment inside slider. You will have to adjust them according to how you need them to appear. Refer below HTML, CSS code to understand better.
HTML
<div id="GrandCarousel" class="banner-container">
<div class="left-section">
// Left section contents
</div>
<div class="right=section">
// Move GrandCarousel contents to here
</div>
</div>
CSS
.banner-container {
display: flex;
}
.left-section,
.right-section {
width: 50vw;
}
.right-section {
position: relative; // To contain all carousel contents inside right-section
}
I want my footer to be a sticky footer and tried following the css tricks negative margin trick, but did not work. I tried to impersonate my angular2 app in the below plunker code. I want the sticker not be fixed but sticky and go to the bottom when there are more content available in the main section. Note the footer is displayed above the data in the main section.
http://plnkr.co/edit/WSUC4xLMWH6fY77UyFqI?p=preview&open=app%2Fapp.component.ts
app.component:
<nav-bar></nav-bar>
<section class="main">
<div class="main-container">
Display my router-outlet here
<ul>
<li *ngFor="let hero of heroes">
{{ hero }}
</li>
</ul>
</div>
</section>
<footer-component></footer-component>
Any help to fix and move the footer down is appreciated.
You can still follow this example mentioned by
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
Simply add this code to styles.scss
html,
body {
height: 100%;
}
In your app.component.scss
:host {
display: flex;
min-height: 100%; // used percent instead of vh due to safari bug.
flex-direction: column;
}
.Site-content {
flex: 1;
}
In your app.component.html
<header>...</header>
<main class="Site-content">..</main>
<footer>...</footer>
There are several ways to achieve this. I'm assuming you've tried one of these: CSS-tricks - Sticky footer, five ways.
For that to work, you would need to:
Remove absolute positioning of both the footer and the content.
Remove default top and bottom margins from body.
If you are not going with the flexbox or grid option, then place all content except for the footer inside of one element (so you can make sure the total height of that element plus the footer is at least the height of the viewport).
Here is an implementation of your Angular2 app with a sticky footer.
The sticky footer is achieved by wrapping all of the main content in a single div and using calc() to set it's minimum height to 100vh minus the footer's height.
I think it's not a good idea to make position:absolute for your .main block. Absolute positioning for your footer will be enough.
Try something like this
html {
height: 100%;
}
body {
min-height: 100%;
position: relative;
}
.main {
min-height: 100%;
padding-bottom: 55px;
}
#footer {
position: absolute;
bottom: 0;
}
Also remove margins and padding-top from .main block styles
You just have to edit 2 files:
index.html:
<!-- Full height body -->
<body class="pt-3 h-100">
<!-- Full height app container, and also use flexbox columns -->
<app-root class="d-flex flex-column h-100"></app-root>
</body>
app.component.html:
<router-outlet></router-outlet>
<!-- Footer top margin must be set on auto -->
<app-footer class="mt-auto"></app-footer>
I'm trying to modify default paper toolbar behavior namely making content appear right at the top of the bar. Poking at chrome developer tool, I found that if I remove height and padding from:
.toolbar-tools.paper-toolbar {
position: relative;
height: 64px;
padding: 0 16px;
pointer-events: none;
}
My top and bottom sections of the toolbar appear without any gaps from top(height), bottom(height) and left(padding) sides:
<paper-toolbar>
<div class="top">
<p>Top text</p>
</div>
<div class="bottom">
<p>Bottom text</p>
</div>
</paper-toolbar>
I tried adding css rules to .top , .bottom and .toolbar-tools but that doesn't seem to make any effect and original rules stand. I was wondering if there's any way of removing margins for .top and .bottom sections of the paper-toolbar via:
paper-toolbar {
--paper-toolbar-background: black;
--paper-toolbar-color: red;
--paper-toolbar: {
font-size: 15px;
height: 200px;
};
}
Or am I better off just creating custom toolbar myself?
edit:
here's the link to the code
https://github.com/T0MASD/webcomponents-playground/blob/master/app/elements/ui-navbar/ui-navbar.html
paper-toolbar has one inner container (#topBar) by default and two others (#middleBar & #bottomBar) when it is set as tall.
Adding a top and bottom classes only work when the toolbar is set as tall.
The inside content is moved to the middle by flexbox, so to move it to the top change the align-items style to flex-start.
Example Style:
<style is="custom-style">
paper-toolbar ::shadow #topBar {
align-items: flex-start;
}
</style>
There is not a mixin for the #topBar so we have to select it with the ::shadow selector. You can do the same for the #bottomBar also.
Here's a working example