I've got a strange issue with Bootstrap and Polymer.
I built my whole website using polymer and his power, but when I just want to use column bootstrap layout on my website, it's not working with Chrome. But it's not a problem with Safari or Firefox.
I've tried to import CSS into main.css with an #import, I've imported the CSS into my template, into the head, at the end, but it's still the same issue: Chrome don't want to read Bootstrap's CSS file.
Have I missed something?
Polymer elements have a shadow DOM, that isolate them from external styles
If you put a css file in the body, it will be ignored by the polymer elements (except the html /deep/ styles, but bootstrap css does not have these styles)
Related
I have been trying to render my css codes as internal css inside react component in shadow dom boundry.
I have one css file and scss file. I like to render my css inside the app.tsx file as inline css.
<style>
// css code here
</style>
From past two days I have tryed different different solution but it doesn't work. I have tryed styled-component package using createGlobalStyle but it's not working. Please help me this is the github repo https://github.com/rejoan121615/Digital_Assistant_Client.git
I am trying to render my css code as internal css.
I am looking to know if there's a way to override the CSS of a Vue component which has been loaded in the browser.
The component is being worked on by a different developer and is being pushed live independently of the parts of the page I'm working on.
I've tried the following:
using the !important tag
trying to increase css specificity
using the :host() & :root() selectors to try and override the component css
However none appear to work and it appears that the component also generates a style="" in the tags so the CSS is embedded at that level within each tag.
Just wondering is there any way of applying CSS in the base HTML file that would override the CSS of the component.
Thanks for any help with this.
I deployed my node js + react app to heroku and for some odd reason some css styles are being overwritten by bootstrap style. (the font too) This worked just fine in development.
I am using separate css files for each react component.
What can be the cause? I noticed that this problem is only with the App.css file. The rules there are being overwritten by bootstrap rules.
How would you suggest to debug this?
There are a few options...
First make sure you link to the bootstrap css before your own styles
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
<link rel="stylesheet" href="mystyle.css"/>
CSS applies rules based on how important it reads the code. Including more specific selectors makes css more likely to apply the style. Applying style to an id will apply over applying the style to just an a element.
Using inheritance can also give a style more importance. If you have an li class .nav-item inside a nav tag, using nav>.nav-item will apply the style.
There is also an !important flag in css, so you could use text-align: center !important. This will override any styles. That being said, !important is a poor development practice so I would not recommend using it, especially if there are multiple developers working on your project. See this answer
When I use Bootstrap to make a style in my extension in Firefox, the style is applying to browser's style. How to fix it?
with Bootstrap
without Bootstrap
It looks like you're adding the bootstrap CSS via an overlay to browser.xul itself. The bootstrap styles and rules will clash with the browser.xul styles. That is not supported.
You're free to use bootstrap in own (add-on) webpages, and maybe even windows, but you cannot use it in overlays.
I have a very strange issue in that no CSS styles are being loaded in IE8 (maybe IE7 as well but cannot check). My site is at http://www.leavetrackapp.com/ and my master CSS file is as follows:
#import url("reset.css");
#import url("screen.css");
#import url("site.css");
#import url("colorbox.css");
The master.css file and indidivual stylesheets are accessible if I directly enter the address in the browser e.g. http://www.leavetrackapp.com/stylesheets/master.css returns the main file.
I think it's a problem with the import rules but have no idea what it could be. Safari and Firefox work fine.
Any advice appreciated.
Thanks
Robin
#Guffa put me onto the right track with this: the problem is that the HTML5 elements aren't working in Internet Explorer 8 and lower.
Modernizr would fix this, but: http://www.modernizr.com/docs/#installing
Drop the script tags in the <head> of
your HTML. For best performance, you
should have them follow after your
stylesheet references. The reason we
recommend placing Modernizr in the
head is two-fold: the HTML5 Shiv (that
enables HTML5 elements in IE) must
execute before the <body>, and if
you’re using any of the CSS classes
that Modernizr adds, you’ll want to
prevent a FOUC.
So, you simply need to move Modernizr from just before </body> to inside the <head> element.
The problem is not that the style sheets are not imported, the problem is that you are using the HTML5 section tag, which IE8 and earlier does not recognise.
If you change the section tags to div tags, it will work better.