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.
Related
I am relatively new to using angular material and it has taken a bit more work to use than I have faced using some other css frameworks like PrimeNG, Fomantic/Semantic UI. Most recently I have used PrimeNG which optionally comes with its own suite of utility classes in the form of the primeflex package. It does not appear that material has this (due to them leaving it up to you to decide i suppose) and I am therefore opting to use primeflex WITH angular material components. Is there an existing suite of material css classes that i can use instead, like simple classes that just give flex styles, height: 100%, etc.
My other problem is that I would like to tap into material in order to give my components background/font color styling relative to the current theme but I have not been able to find a 'helper class' that applies the current primary/accent/warn color to an element given the current theme. Any references to documentation are highly appreciated.
I assumed it would look something similar to:
// my-theme.css
#use '#angular/material' as mat;
.my-primary-text-class {
color: mat.$primary-text-color
}
or something similar?
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'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.
It's the red marked "navigator" I am talking about. I need to move them away so they don't mess up my design. I have tried to change a lot of different settings without no success.
Here is the View for it:
What should I do?
I am using the following themes: Pixture Reloaded 7.x-2.2 and AT Core 7.x-2.2
Modules: Calendar, chaos tools, views, date modules..
It is obvious some mix up in css. It is a large possibility that elements created by calender inherit some css properties.
Easy fix is to view the source code of he page. Using FireBug(for firefox) or some alternative will make it easier to find. You will find some css rules being applied to your menu. Just try to enable and disable some css rules and see what happens.
When you find mischief just write a css function with higher priority which would negate that other global rule.
I got the same problem and i solved just yesterday hacking some css. I share you here what i have done in my case that i think i will help you also or at least work around there.
First to fixing the big buttons of the calendar navigation you should look in your theme css files at some css class called "ul.pager li a" or "ul.pager li span" there must be a property like "display:block" that is causing this buttons see that way. i just commented that property and they look as normal them should be.
In my case the theme css file was "navigation.css" and this property inside that file is found at line 375. Maybe in yours could be similar, anyway you can check and find where is using the firebug extension for firefox inspecting that buttons.
Second for fix the position of this navigation buttons is something similar but in the css file of the calendar module itself, after modifying the core css file of the module i recommend you to override it placing a copy of it in your template css folder and declaring it on the .info file of the template. In my case the file was calendar_multiday.css, in the line 778 and 818 there are the classes ".view .date-nav-wrapper .date-prev" and ".view .date-nav-wrapper .date-next" inside them with the property "right" and "left" i controlled the positions where must be this buttons.
This is the work around on how i solved it, hope this works for you also but if not anyway the problem is close there.
I been trying to loose the style that the custom jqueryui.css uses for Tabs, but I can't find the piece of code that just get it working, and not style it. Anybody knows what exactly the css is, removing everything but the css to get it working?
The jQuery UI CSS theming are built up around the classes named ui-*. For example:
ui-widget
ui-widget-content
ui-corner-all
And for tabs you get: ui-tabs
Open up the .css to see what they do.
I don't think you can remove all the classes and just have the functionality, since most of them are needed for tabs to work.
If I were you and wanted to remove all the styling, I would edit the .css and make small changes and see what happens. For example, remove the default font, background-color etc. When you are pleased with the result I would keep the remaining classes as they are and build your application around them.
I hope this helps.
I had a similar question once, and a user was kind enough to provide me with a minimal example. See the comments on Vertical "tab" component on jQuery UI site (JSfiddle here)