When I run the following lines using just HTML and CSS it runs as I want it, with the header having no margins:
*{
margin: 0;
padding: 0;
}
.header{
background-color: purple;
width: 100%;
height: 80px;
}
<div class='header'>
<h1>Any text</h1>
</div>
But in Angular 9, when I write the same code on a component's HTML and CSS files, it does't occupies the whole page, it have a margin of some pixels instead. How can I fix this?
Angular add own tags so check with DevTool to see if have angular host tags and if your style is correctly added to component or global.
Related
I want to add a footer in all the pdf pages generated from HTML when printed, but only for the first page, I want to add a section below the common footer. I have to do it using only HTML and CSS.
<head>
<style>
.footerLeft {
position: running(footerLeft);
}
#page {
margin-bottom: 40%;
margin-top: 5%;
#bottom-left {
content: element(footerLeft);
}
}
</style>
</head>
<body>
<div class="footerLeft">
...content
</div>
</body>
I want to add another div below the "footerLeft" div class only for the first page. I am using this thymeleaf for the final compilation, would want to know if there is any property that can help me achieve this apart from plain HTML & CSS. Can somebody please help me with this problem?
I have a div and for some reason I cant reduce its margin.
HTML
<div class="activebombgame">
</div>
CSS
.activebombgame{
height: 82vh;
width: 5vw;
background: black;
margin: 0;
}
This is from google chrome developer tools(blue = div, orange = margin)
Whole source code: https://www.hastebin.com/tapodoyuke.xml
Your code works fine see the fiddle here. Probably a surrounding tag is restricting the resize. Try something like taking ".activebomb" outside like
<div class="sorrounding">
</div>
<div class="activebombgame">
</div>
It sounds like it's your body margin. Many pages have one set by default. See the test below for an example. When you first run it, the body has a default margin. Clicking the button will remove it and line your div up with the page edge.
function change() {
document.body.style.margin = "0px";
}
.activebombgame{
height: 82vh;
width: 5vw;
background: black;
margin: 0px;
}
body {
background-color: lightgray;
}
button {
position: fixed;
left: 40%;
top: 20%;
}
<div class="activebombgame">
</div>
<button onclick='change();'>Remove Body Margin</button>
#Nisarg Shah,
You have added one extra closing div at the end, that's why your css is not working properly. Remove that extra closing div and run it.
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 had a simple html app that used a background cover image. The following code worked fine.
body{
width: 100%;
height: 100%;
margin: 0 0;
padding: 0 0;
}
.mainBody{
width:100%;
height: 100%;
background: url("/images/background.jpg") no-repeat fixed center;
background-size: cover;
margin: 0 0;
padding: 0 0;
}
However, when i created a simple angular app w/bootstrap and used the same code, the mainBody div lost its height component and the image fails to show.
The html is simple and straightforward:
index.html
<body ng-app="testApp">
<div ui-view=""></div>
root.html
<div class="mainBody">
<div class="navTitle">
<span class="title">Recordings</span>
</div>
<div class="navMenu">
<!-- <span class="fa fa-twitter menu twitter"></span> -->
<span class="menu">About</span>
<span class="menu">Podcasts</span>
<span class="menu">Support</span>
</div>
</div>
The same root.html works in a simple html file. And I've debugged the angular app to see if there are any additional css being added for body and mainBody and have not found any. Your help would be appreciated!
You have not mentioned the order of adding your own style-sheet in the html. If you have added the bootstrap file below your custom css file then the problem may be occurred due to the over-right issue of css.
So first add your bootstrap file and then add your custom css.
If you have already done with this then please provide your html div.
Try using this code
html{
height: 100%;
}
body {
min-height: 100%;
}
body finds it's parent div that is html. So the html needs a proper height.
Contents of my webpage(be it header,menu etc.,) are not fitting into browser window.Below is the HTML & CSS code i have used
HTML
<div id="header">
</div>
CSS
#header {
height:150px;
width:100%;
position: relative;
background-image: url("top_frame.png");
And here is the output I get:
Add the following:
body {
margin: 0;
}
in the CSS.
Here is the fiddle.
I replaced background-image with background : red; for testing purpose as I didn't have the image
Please use Normalize.css before your custom css.