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>
Related
I am new to CSS and just learned about flexbox. I was trying to design a login page-like screen. To visualize where my content would be I decided to make "boxes".
I made a container for two flex items:
.boxOuter{
display: flex;
flex-wrap: wrap;
background-color: lightpink;
margin-top: 10vh;
height: 536px;
justify-content: center;
align-items: center;
}
The flex items are two boxes:
.box1{
background-color: red;
height: 36vh;
width: 37vw;
flex-shrink: 1;
}
.box2{
background-color: green;
width: 396px;
height: 496px;
flex-shrink: 1;
}
Following is my HTML code:
<div class="globalContainer">
<div class="boxOuter">
<div class="box1">
</div>
<div class="box2">
</div>
</div>
</div>
<div class="footer"></div>
The problem I am having is that whenever I try to resize the window into a smaller size, box2 overflows the container. How do I modify my code so that box2 resizes itself into a smaller size to fit its container?
I would also like to ask if this method I am using is a good way to visualize the position of elements of my website since I am very new to front-end development.
Edit: For reference I want these boxes to work the way the Facebook log-in page does, where the green box is the login box and the red box is the Facebook logo along with the text below it
If you want your sizes to be dynamic or adaptive to the size of your system, dont use px. Instead you should use rem/em, since these units are responsive.
Edit: You can also use vw/vh for it ofc
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;
}
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 have 2 complications here, first is that how do I ensure that the footer does not overlap with the content of my articles. Now it seems to overlap the things above it and I can't seem to make the scrollbar with overflow: auto;
Also, how do I make the <hr>tag work becuase now it seems to mess up my entire flexbox and it only hovers above the first contact footer detail.
Thanks a lot for all your help!!!
#footer {
position: absolute;
left: 20%;
bottom: 0%;
width: 50%;
height: 20%;
display: flex;
justify-content: space-between;
}
.contact_footer {
margin-left: 20%;
}
<footer>
<div id="footer">
<div class="container">
<div class="contact_footer">
<hr>
<h3>Contact</h3>
<address>
info
</address>
</div>
<div class="contact_footer">
<h3>Address</h3>
<address>
info
</address>
</div>
</div>
</div>
</footer>
If you position anything absolutely, it is removed from the normal layout. If you don't want it to overlap with anything below it, you need to make sure there is nothing below it. This is not a tweak for your footer, but for your content.
Try something like this (selectors must be replaced with yours):
#content {
margin-bottom: 20vh;
}
20vh are 20% of the height of the screen, which might to be the size of your footer (your code doesn't make it clear what element your footer is positioned in).
Do one thing, for second problem
use pseudo class ':first-child' for only first footer content css and use 'border-top' style property instead of 'hr' tag
.contact_footer:first-child address{border-bottom:1px solid black;}