When i using Material-ui Box component(such as <Box padding={2}/>), I can't find style in html, but I can find style in document.styleSheets, why ?
screenshot of index.html
screenshot of document.styleSheets
That style rule could be from a style sheet in Shadow DOM or a constructible stylesheet.
Those data comes on demand only. It means comes when every it requires only.
Its comes with external CSS file. Those are built in library it loaded with event accrues.
Ex:if click event accrues on button style will changes blue to gray like that.
Related
I'm using a button from a library (https://www.npmjs.com/package/#react-oauth/google I understand this library has a custom button option but this option results in a different response).
I basically like to change the max-width and width to another value (image attached below). May I know is there a way for me to edit these style from CSS?
Thank you! Appreciate any help.
Google adds this button to the dom inside iframe, there are certain props you can style the button
to add with, check prop width on
it's mentioned on #react-oauth/google github README
https://developers.google.com/identity/gsi/web/reference/js-reference#width
So still new myself currently in a full stack boot camp in the react section. It should be possible.
Are you using a external stylesheet or trying to do it using inline?
I was taught to use a external stylesheet
From what I am seeing try changing class name to button.
class='button'
Then in your external stylesheet add
.button {
max-width: 400px;
}
Edit. I see you are using react... So it could be className='button'
Edit:
Hello, thanks for your reply! Hmm... in this case I am not able to
assign a className to div myself as the div is from the library. The
weird class you see above "nsm7Bb..." is not by me. Hence, I was
wondering if there's a way to forcefully override library class style.
– Olympian Collections
Gotcha.
Have you tried !important?
Is that your inline CSS?
Are there any shortcuts in Visual Studio Code where if I click on the class attribute of the element in the html file it’ll make that class selector ready in the .css file? For instance, I right click on class="green" and it’d make something like the bottom in the .css file?
<div class="green">I am green</div>
.green {
}
Not sure if it would also automatically add new selectors to your css file if they don't exist but 'CSS Peek' does allow you to quickly go to the selector.
Adding new selectors always on the bottom the css file is probably not desired in most cases since you'd want to structure your file in some way.
I am creating a mobile simulator that mocks the appearance and functionality of an iPhone (and other devices later) in a web browser, using 100% javascript, HTML5, and CSS, with the simulator fully functional with only client side code.
While trying to accomplish this task with as little modification as necessary to the original app projects themselves to be hosted in the simulator, I am injecting the <script> and <link> tags into the head of the page, then loading the html into a <div> screen.
The problem is that when I load in a new css file, it (obviously) overrides the one I'm using to style the page, and therefor some elements are affected (ex the background changes color).
My question is: Is there any way to limit the "scope" of an external .css file to apply only to objects within the <div> screen? Would it make any difference if instead of me injecting it into the <head> of the page, I inject it into a <style> element in the <div> screen?
UPDATE Support for this feature has been dropped. Please seek other options
Original Post:
You may want to look at scoped styles; see http://css-tricks.com/saving-the-day-with-scoped-css/.
The basic idea is
<div>
<style scoped>
#import "scoped.css";
</style>
</div>
However, you are on the bleeding edge here in terms of browser support. See http://caniuse.com/style-scoped.
One alternative would be to use an iframe.
Simply wrap all you css code inside the selector for parent element, say it's a div with id of foo you'd do the following:
div#foo{
//All your css
}
And convert it as less to css, it will prepend the right selectors. Note that you'll need to take care manually of things like #media queries and so on.
While writing this, the <style scoped> is deprecated by the Chrome team.
As a result I experimented with some approaches and released https://github.com/thgreasi/jquery.scopeLinkTags .
Note: you should only have to use this approach in case that you can't control the imported CSS file. If you can use SASS/LESS/anything to pre-process your CSS, you should prefer that.
A simple way is adding pre-class before all selector in css file.
I find a grunt script can do this:
https://github.com/ericf/grunt-css-selectors
This is how i do it if not using preprocessor in my project. Search for a online preprocessor then load copy paste the css under the parent class/id
.parent{
// copy paste here
}
Example
Find a preprocessor for example https://beautifytools.com/scss-compiler.php works very well for me (I have no affiliation with the given link)
if you are using from a URL add the URL using the load URL button.
Wrap the css code under parent and hit compile then minify.
I had a similar issue and found that Shadow DOM can solve it easily.
let output = d.querySelector('#output')
let shadow = output.attachShadow({
mode: 'closed'
});
shadow.innerHTML = HTMLcontent // HTML content and style injected
Source
I have a large HTML page, which includes many CSS files.
When I try to debug that HTML page with Firebug, it shows more <div>s than what I see in source code. Also, there are some tags that are greyed out. In the pictures what is underlined with green color are elements that don't exist in the source code.
Why is that? Is it because CSS files are "including" those "new" <div>s?
I've never seen that CSS files can insert <div>s or <a>s into an HTML page.
Source code edited with Notepad:
Firebug does not change your HTML, nor does CSS add <div>s (though it can create pseudo-elements like e.g. ::before).
If the additional elements are not included in your HTML output, they must be created dynamically through a JavaScript on your page.
Are you using any libraries? If so, which ones are you using? Sometimes libraries add elements to perform whatever actions they were created to do.
These elements that you can see here, is the added elements by either JavaScript or any other library based on Javascript.
Ex:
suppose we have a div in HTML like this
<div id="example"></div>
and we have written a code,
<script>
$( document ).ready(function() {
$('#example').html('<p>example html</p>')
});
</script>
Then in this case if you check the source code you will get.
<div id="example"></div>
and if you check the same page using Firebug or Inspect Element you will get
<div id="example"><p>example html</p></div>
Hope its clear now.
I am editing a HTML website template, and I need to change the banner height so I edited external CSS. However, somehow it is taking an inline CSS height property so there is a space left in between.
Please let me know, if I have not written any inline CSS (and there is no inline CSS in html page), from where is that height property coming from.
Code I see in console is:
<div style="display: block; height: 445px;" id="camera" class="camera-wrap camera_wrap">
And my code is:
<div id="camera" class="camera-wrap">
<div data-src="images/Battery-Banner.jpg">
I have no idea why it is taking class camera_wrap twice.
Usually JS plugins put dynamic css that is calculated during runtime. It will be placed in inline style tag. Otherwise any static code will go to external css file. Try checking how plugin is calculating that height and than modify your HTML/css.
Try viewing the HTML source in your browser (not using inspect element, use view-source). This will show you the markup prior to any other client side processing aka. JavaScript. If the inline style isn't there when you view source then that indicates that it may be a rogue bit of JavaScript that is adding it in.
In any case can you please provide more information on the issue? Possibly a little more background on what type of website, what parts it has CSS, JS etc. With more information we may be able to help more.
If your source is showing 1 class, and when you are using inspect element it is showing other classes, then it is definitely added by js/jquery plugin.
If you want to overwrite other class css properties, either use !important in your class or use deeper dom traversing like #camera.camera-wrap{}. Than this will be given higher priority. Try which works for you.