i have a simple tsx component files that imports a css file as follows:
import "./styles.css
And when i tries to change the background for example of a div from existing green to blue in the css file ,it remains blue even after i cleaned chrome browsing data..
but weired it does change if i renamed the class name !!
Last thing i did ,i deleted the css file and Party begins !!
The component is still styled ,even i re-cleaned browsing data,restarting the server,restarting the laptop,shutting the rooms light and opened it again ,still the component is styled
Any Logical explanations to this phenomenon ?? :)
Related
So, I have a problem and am not sure where to start. I am working static site project
built using nuxt, vue, and vuetify. Everything works great and looks good, until I run nuxt generate. After that when I go to view the final static site, I lose my styling on my font-awesome icons. The first image below is what I have when running on my localhost.
In the photo, you can see the size of the magnifying glass and star. This is perfect. However, the next photo is after I run nuxt generate
I am at a loss here as to what would be causing this, and any direction would be greatly appreciated.
EDIT
After looking at the devtools again from a comment, the icons have the same CSS styles, and I do not see a difference. However, further back in the elements I have a div that is getting rendered differently, which could be breaking things.
The CSS circled at the top is my local environment. You can see that .evidenceReview{} has the active background, which is overriding .theme--light.v-card{}.
In the bottom circled CSS is what I get from my deployment. Here you can see that the same classes exist, it's just that the presence is switched and .theme--light.v-card{} is overriding .evidenceReview{}.
As workaround, importing the font-awesome css at the top of my css file worked.
#import '#fortawesome/fontawesome-svg-core/styles.css';
Workaround taken from FontAwesome GitHub issue:
https://github.com/FortAwesome/Font-Awesome/issues/18666#issuecomment-1090686913
I've noticed quite a few of these questions around but I also noticed that most of them don't have a clear answer. My problem is that the font weights on my app's navbar keep changing as I navigate. Here are two pictures of before and after:
This is how it should look (kind of). It looks like this when I click on a link in the navbar.
Pic1
This is when I click outside the Navbar:
Pic2
You can see that the font weight drops to what is seemingly 100.
Here is what I've tried:
Imported Lato in my html file from Google Fonts with all the weights,
but Semantic UI CSS still cancels it out.
I've tried adding more CSS to directly override the other css (You can see this by inspecting the
title 'JOBTME'. It's actually better when I remove that last class I added. Other attempts at overriding keeps being overridden itself by semantic Ui.
Tried removing blocks of my css to see if it affects the problem, but to no success.
My Index.js has styles loading after it:
import React from 'react';
import ReactDOM from 'react-dom';
import 'semantic-ui-css/semantic.min.css';
import './styles.css';
(...)
My goal is to have a stable font-weight. Ok If anyone has any solution, I'd be grateful.
EDIT: Apparently the problem was local as I was only using one browser to view the website (Edge). Although in Chrome the problem persists, it was not evident while using Firefox. I switched to a macbook and used safari and I did not see any problem as well. To conclude, the problem seems to be on my local edge/chrome browser.
Thank you,
Robinson
One thing that often happens in menus using anchor tags is the pseudo-classes are set to a different font style. Pseudo-classes on anchors with font size inheritance get their font-size from the parent holding the anchor, not the anchor itself. Also, unlike the anchor element, pseudo-classes on anchors have the same selective weight in CSS as a normal class, so can easily cascade over your element styles, even their classes, when they are triggered. If they have different font-sizes it becomes apparent. So if you see problems, make sure you assign consistent styles on your navigation like so:
a.mylink,
a.mylink:link,
a.mylink:visited,
a.mylink:hover,
a.mylink:focus,
a.mylink:active
{
font-size: 1rem;
}
I am working with a freelance client on the side that wants to utilize Angular Material throughout the project. However, they do not like the way that the underline looks in the angular material input. I have tried a variety of approaches to change this, but I haven't found any success yet.
To be honest, I haven't even been able to find the tag in the DOM that would let me alter that border.
Here are the Angular Material docs, as you can see all of the available options have at least some form of a bottom border.
Some approaches I've tried:
This one is from the old angular material and no longer works for the new angular material
The accepted answer here is for the new angular material, but I was not able to get it to work. I implemented exactly as described and no styling changed.
This approach looked like it would work. Unfortunately, I could not get it to work either.
Any help or input on this topic would be appreciated.
For reference, the client said that any changes that deviated from the desired design would be denied. So I have to get this to work. I believe I could maybe, possibly lobby to build a custom input component as a solution, but I know that they are dead set on Angular Material.
Edit. Added a pic of desired look:
this little code did it for me. I didn't want to display it and just set height and width to 0.
::ng-deep .mat-form-field-underline{
height:0 !important;
width:0 !important;
}
However I think its kinda hard to style the Angular Material Components and for me its sometimes better to built my own.
First of all, you'll need a .scss to be imported either within the default theme.scss or after the import of the material stylesheet in main.scss.
Now, Material offers you the option of customising colours and some of the styles by overriding their #mixins found somewhere in the Material folder ( I don't have the folder in front of me.. very sorry for the vague pointing... ).
Back to the newly added file; You can override material's default styling by checking the DOM for certain classes and then adding them in said file with the desired changes. Because the file is loaded after Material's, the default styling in overridden. Same thing applies for the #mixin you chose to override. Just have a look in the file, copy-paste the whole #mixin and change accordingly.
Now if you wish to go even further, my colleagues and I have a custom library that uses Material BUT the whole styling is stripped off leaving you with the bear input within the mat-form-group and then using a <input disabled/> with a position:absolute over it. That way you get to benefit from material without using their style.
I have a problem when using md-buttons, md-select or md-field in a vue project created by the vue CLI from the webpack template.
I have a MWE of the situation here, featuring the three introduction examples from the vue material website on each type of form item combined with the vue-cli template. It doesn't look very nice, but if you run it it breaks down as follows:
The first row are a set of radio buttons; however, the buttons are invisible (yet you can click on them, get a ripple effect and the correct value is recorded by vue)
Next is a select box; however, the background of the box is transparent.
Finally there are a few text boxes; however, the outlines seem to be transparent.
I can solve the issue with the select boxes by inserting a style block
<style>
.md-menu-content-container {
background-color: white;
}
</style>
and that will make md-select work as expected. I still decided to include it here, because it seems related to the other issues and may have a common origin.
Unfortunately, I have not figured out how to solve the other issues yet or which attribute to modify to "patch" the problem. So any help or pointers are highly appreciated.
It appears that when using he latest version of vue-material, the default template has to be loaded explicitly. Hence adding
import 'vue-material/dist/theme/default.css'
to the main.js file from vue-cli seems to fix this issue.
I love working with Codepen and I'm trying to import a css file from Pastebin.
Here is a link to my external file hosted on Pastebin:
http://pastebin.com/raw.php?i=mj9dmzZw
and inside that file I link to my actual font files.
I'm not sure what I'm doing wrong. Could anyone point me in the right direction or let me know if this is even possible.
Here is the actual codepen. http://codepen.io/ryanjgill/pen/CLitH
Inside the CSS section I have commented out the styling that I'm trying to include with the external CSS file. If you uncomment the styling for the iconfonts, you will see icons in the column 'Type'.
I have tried linking the flie in the settings of the css section that is built into codepen. And using the "#include url('http://pastebin.com/raw.php?i=mj9dmzZw')" inside the css.
Well, on CodePen page, there is a small letter 'g' top-right of css input box.
You can import your .css there i think.
If you need some .css extension to your file for importation, just create a new file.css and #import your Pastebin css from within your new file.css