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.
Related
I use ready-made Angular components in my project. Some of the components use colors (see picture) that don't fit my project.
Instead of the purple, I want to use another color. I couldn't find anything in the Angular documentation to change the color.
https://material.angular.io/components/input/overview
I also didn't see a property in Chrome's Inspecter Tool to change the color.
How can I use a different color instead of the purple?
It would be best if you only have to change it in one place, as I use many other Angular components.
If you check the CSS for the placeholder text in the browser inspector, you should see the associated CSS that you should be able to copy to your code and change. Below is what I copied when I went to https://material.angular.io/components/input/overview and inspected (and even changed). If you decided to add this CSS as is to your Angular app, be sure to change the encapsulation option to ViewEncapsulation.None to see the effect. This is if you're using Angular Material v15; otherwise, inspect and see the associated CSS.
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label {
color: orange;
}
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 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'm currently having the problem that I leverage the Airbnb dates in two different locations within my React project. The dates are styled differently. Therefore, I created 2 separate CSS files that overwrite the default styling.
Even though, there are 2 different CSS files in 2 different locations the latest changes overwrite the initial styling changes. So for some reason, both datepickers share the same styling.
I want to mention that I use style-loaders.
Any ideas?
2020:
For anyone who comes across this now and also has this issue, you may have tried to use CSS modules since that would eliminate the “global CSS” problem.
However, I tried that and it doesn’t load CSS module files so that won’t work at all.
However, I was able to solve it by using styled-components. Each datepicker had it own component and I used styled-components to write a base container and then, ALL the override styles for each datepicker goes into that styled component.
Boom, that solves the problem of the CSS styling clashing globally.
I am using a Covalent Template for the first time for my first Angular application. I downloaded the Dashboard template from https://stackblitz.com/edit/covalent-dashboard-ynyp1w?file=main.ts and tried to customize it, when I saw this error:
The placeholder is mispositioned and the letters are cropped at bottom;
One of the DIVs is with wrong height, so an ugly scrollbar is visible at right.
I tried to look into the compiled HTML and CSS, and at the source-code, but no success on how to change what is wrong. It may be in CSS or maybe in the template property of the input-search component's decorator.