It seems impossible to override the CSS of the <body> tag of an EmberJS application.
It inherits the ember-application class, and this has many of the browsers default values, including a margin of 8px.
I want to get rid of this margin around <body>, but none of these two methods worked:
body {
margin: 0;
}
body.ember-application {
margin: 0;
}
!important does not help either.
Any idea of what I could do? Removing the body tag itself do not work, as Ember will add one.
The ember-application class has no css associated with it and just putting in
body {
margin: 0;
}
is enough to handle it. It's likely you have another CSS element winning the CSS war, or you have an inside element pushing the padding making it appear so.
Example of margin 0 working: http://emberjs.jsbin.com/vaquhuwo/1/edit
Related
May not be the best wording for my question, here's what I'm trying to accomplish.
I'm using Angular2 app with bootstrap 3 styling, where we are using many components (directives in angular1.x). This also leads to us having components inside components.
On one of my pages, I have the bootstrap class .well, and then there's another component inside that one that also utilizes .well. So if you're familiar with bootstrap, a .well inside another .well yields quite a bit of padding.
So, I want to write a css selector where I remove the padding for the inner .well when it's inside another .well.
Here's what I've tried so far:
.well .well {
padding: 0;
}
div#doubled-up-well .well {
padding: 0;
}
div.well .well {
padding: 0;
}
div.well form.well {
padding: 0;
}
None of these seem to work, what am I doing wrong here?
Here's how it's structured to give a better idea:
<div class="well" id="doubled-up-well">
<my-custom-component>
<form class="well {some more angular classes here}"></form>
</my-custom-component>
</div>
Does it have to do with there being more classes defined on my form element? Is it because there's an element in between my div and my form (which is why I DIDN'T use the > in my CSS selector)?
Edit: I've also tried these:
div#doubled-up-well > member-add-member-demo > form.well.ng-untouched.ng-pristine.ng-valid {
padding: 0;
margin-bottom: 0;
background-color: red !important;
}
div#doubled-up-well form.well.ng-untouched.ng-pristine.ng-valid {
padding: 0;
margin-bottom: 0;
background-color: red !important;
}
Edit: Here's the fiddle with the exact html that is rendered on the page. FYI - the fiddle WORKS, it's only not working in my actual app.
https://jsfiddle.net/rv69f6ok/2/
I've run into this issue as well, and in my case it was because I had to write the styles in the specific component in which they need to be modified. If I tried to write .well .well in a global css or in the css of the parent component, it wouldn't work because the styles for each component are isolated to that specific component.
So in your case, I'd write a style for .well in the component that's the child, where you want to get rid of the padding. If you're using that component in other areas where you don't want that reduced padding to apply, I'd probably add some class to the same element where the child .well class is included. That extra class can serve as a flag that will have its own reduced padding value, and will overwrite the .well class your css by adding specificity like .foo.well { padding: 0; }
I am trying to increase bootstrap 3.0 navbar height which is used with fixed top behavior.
How can I do it?
Without seeing your code it is hard to help but in Bootstrap 3 typically,
This is the less variable #navber-height and #navbar-padding-vertical will adjust the height of the navbar.
But in my current Bootstrap app I have it set up different using
header.navbar {
height: 54px;
}
The easiest thing to do would be to inspect element on the navigation bar then look at the css to see where the height value is. Adjust it to the desired height.
Then create a rule in your css with !important to override the existing Bootstrap css.
This is another example without less.
.navbar-fixed-top {
height: 70px !important; /* Whatever you want. */
}
Create new css file and put your overrides in it.
<link rel='stylesheet' href='/stylesheets/bootstrap.css'/>
<link rel='stylesheet' href='/stylesheets/overrides.css'/>
inside overrides.css
If this css rule exists inside Bootstrap when you inspect element then override it in the overrides css file you have added now.
remember use !important
.navbar-fixed-top {
height: 70px !important; /* Whatever you want. */
}
If you are using the .less or .scss version, you can edit the following $navbar-height variable in code:
https://github.com/twbs/bootstrap/blob/master/less/variables.less#L360
If not, you need to override it with a rule by statiing:
.navbar {
height: {new height};
}
Polymer makes by default nice but airy layouts (due to paddings, margins, font sizes...).
What is the official (or clean) way to scale down all the user interface so that we can have more content on fewer surface?
I could find a quick hack with:
html {
transform: scale(0.8);
}
but this shifts all the content, leaving an empty space on each 4 borders.
I could do it with the CSS mixins. For instance to override every paper-button layout, I added the following css to the main html file :
:host {
--paper-button: {
padding: 3px;
font-size: 12px;
}
}
According to https://elements.polymer-project.org/elements/paper-button , this is injected to the end of each paper-button css.
On this page http://pjstagingdecorating.com/home-staging-level-2/ when I resize the browser to simulate a narrow screen, there is a large space between each row. I think it is because the containers are each set to a height of 418px. I have used the following CSS to change the height of the containers to auto but it's not working. Thanks for your help.
.dtp-item-block.dt-portfolio-grid-item.dt_portfolio_grid_6.1.omega {
height:auto!important;
}
.dtp-item-block.dt-portfolio-grid-item.dt_portfolio_grid_6.1 {
height:auto!important;
}
remove the inline style style="height: 444px;" from div with
class="dtp-item-block"
You can reduce the gap by targeting it with the cleaner syntax like below.
.dt_portfolio_grid_6 {
height: auto !important;
}
If you are facing the same issue on other pages, you can reduce the usage of resetting height to all grids by targeting .dtp-item-block if it is used in those pages too.
Setting the height: auto on the dtp-item-block itself did the trick for me.
.dtp-item-block {
height: auto;
}
I applied it on the dtp-item-block, but you can also be more specific. I tried it in Stylebot (Chrome extension) and did not need the !important, but that might be because it's the extension.
You have a css selector named '1', that's not correct according to the CSS standards. CSS selectors must NOT start with a digit, that said, this selector:
.dtp-item-block.dt-portfolio-grid-item.dt_portfolio_grid_6.1.omega {
height:auto!important;
}
does nothing, but this should do the trick:
.dtp-item-block.dt-portfolio-grid-item.dt_portfolio_grid_6.omega {
height:auto!important;
}
More info here: http://www.w3.org/TR/CSS21/syndata.html#characters
I added a Google Translator widget to a site (using the code provided here: http://translate.google.com/translate_tools) and have the following issue:
It automatically adds a style attribute to the html tag whose value includes:
height: 100%
This is "breaking" the page layout. For example, CSS backround images that were positioned to "bottom" are now (incorrectly) positioned at the bottom of the view port.
Is there any way to prevent or fix this?
This resolves the issue:
/* Google Translate Overrides */
html, body{
min-height: 0!important;
height: auto!important;
position: inherit!important;
}
I was able to solve this by setting the body min-height attribute in css as !important to prevent override.
body {
min-height: 0 !important;
}
UPDATE - Unfortunately, this no longer works. The Google Translation script will strip out any attempts you make to counter it's min-height style. I have both the above CSS in my stylesheet AND an inline style on the body tag.
The Google Translation script is pretty aggressive and I'm not seeing any way to disable this.
This should work:
html {
height: auto !important;
}
body {
position: initial !important;
min-height: initial !important;
top: auto !important;
}
maybe it's like
body{ height: auto !important; }
do not write css in head part, write in a css file. this will preventing automatic translation by google.
I tried using the solutions provided by the other answers, but they didn't work for me. If anyone else is having this issue, I did have success with this solution.
body { position:static !important; min-height:100%; top:0; }
I found a way to solve this issue, it's not bulletproof I guess but works for now:
Plugin: http://darcyclarke.me/dev/watch/
with this code :)
$(window).load(function(){
$('body').watch('min-height', function(){
var style = parseInt($('body').css('min-height'));
if(style > 0){
$('body').css({
'min-height' : '0',
'position' : 'static',
'top' : 'none'
});
}
});
});
The only way I can see to combat this is to put a timeout of 500ms on code to reset the body min-height property. If you're not to bothered about your page jumping around a little for half a second on load, it works. Using jquery, it would look something like this:
$(function(){
var myMinHeight = 950;
setTimeout(function(){$('body').css('min-height',myMinHeight)},500);
});
Set the value of myMinHeight to whatever you wish it to be.