I'm trying to style angular material's input to look the same as all inputs in this app.
Is it possible to adjust the thickness of the schedule's input outline to have the same width as the project's input border?
The classes to override are:
.mat-form-field-appearance-outline .mat-form-field-outline-thick .mat-form-field-outline-start,
.mat-form-field-appearance-outline .mat-form-field-outline-thick .mat-form-field-outline-end,
.mat-form-field-appearance-outline .mat-form-field-outline-thick .mat-form-field-outline-gap {
border-width: 1px !important;
}
Make sure you use border-width and not border
Have you tried editing the width of the schedule input itself?
If simply nothing changes maybe try to add the !important tag to css to overwrite the width given (and match the other input ones).
Related
See the Example image
I am using the primeng component in my application it has css class p-component. Whenever I click on any field whether it is button or input or any other field It got highlited with blue color border. I don't need that So I tried to use outline:none but it doesn't work out.
Apply the following CSS to remove auto highlited blue color
input:focus {
box-shadow: none !important;
}
It'd be good if you can post your code so that we can get a 100% correct answer to you. However, looking at PrimeNG's website it seems as though the .p-inputtext:enabled:focus selector is setting the following
box-shadow: 0 0 0 0.2rem #BFDBFE;
border-color: #3B82F6;
So add a rule to your own css below the linked PrimeNG css file with the following rule
.p-inputtext:enabled:focus {
box-shadow: none;
border-color: initial;
}
I can check this for you if you post up your code, though.
I currently have a global blue theme (saga-blue). I managed to change the text and bottom border color (to match the desired brand colors) by using simple css.
However, when a menu item is first selected, it gets this ugly blue-colored border behind it, as such:
https://imgur.com/SYF7xmJ
No matter what CSS I try, I can't manage to remove it. I can't find where it comes from when I inspect the element. Also, it gets removed as soon as I click anywhere else on the screen: it is just there for the first click on the item, goes away after any other click.
CSS that I have tried:
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
color: $brand-red;
border-left: 0px !important;
border-right: 0px !important;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight {
color: $brand-red;
border-left: 0px !important;
border-right: 0px !important;
}
I also tried unsetting any property that had to do with 'left' or 'right' on the menuitem and menulink components - but the ugly blue border just keeps on showing. If anyone has any idea what kind of property this might be, I would really appreciate it.
If your style is not applied and you want to override the primeng default styling, you may need to use :host ::ng-deep.
Another way of applying style to a PrimeNG component nested element, is to use the styleClass template property. It is not everytime efficient, you need to sometime force the css through the !important priority modifier. It is not the cleanest way, but there is few CSS properties that are inlined by calculation on some component.
For your specific problem, the .p-tabmenu (and subclasses) is playing with a mixin of focus, when the element is in focus state.
#mixin focused() {
outline: $focusOutline;
outline-offset: $focusOutlineOffset;
box-shadow: $focusShadow;
}
You need to play with the property box-shadow to remove/modify this blurred color that you dislike with the advices I gave you on the primeng styling if it is not applied as you wished.
Don't forget the pseudo-class :focus while overriding the style.
You may have this kind of result to remove it completely.
:host ::ng-deep .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link:focus {
box-shadow: none;
}
Try outline: 0 this is something that defaults browsers do for accesibility mainly.
I'm using ui-bootstrap-tpls-2.5.0.min.js. I changed dropdown-menu's backgorund color like this in specific html.
.dropdown-menu {
background-color: transparent;
box-shadow: none;
}
But it makes datepicker's background transparent too. I know why it happened, so I cleared that line but nothing changed.
So I want to change datepicker popup's background using CSS selector like this,
.datepicker .ul{
background-color: white;
}
//this is an example code.
what selector do I have to choose to change datepicker's background?
If this is what you require, you need to add these two styles that are highlighted.
Happy coding :)
In this table I wish the color bars were square and not rounded.
Using Chrome > Inspect Element I see that if I change this:
border-radius: 0px;
padding-right: 4px;
I can remove the rounding of one of the bars.
1) How do I determine what to change for ALL of the bars?
I'm using Hugo and placing the css overrides into layouts > partials > head_custom.html
Thanks
Since your spans have inline styling, you'll need to either change each span's styling (since normal CSS rules won't override inline styling), or you'll need to use the dreaded !important rule:
td > span {
border-radius: 0 !important;
}
I have a page where I need to display borders within a table and I'm using w3.css, this has the following:
table,th,td{border:none}
I have my own css file and have tried:
table,th,td{border:1 !important}
With and without "!important", after doing some searches I have also tried:
$("table").removeAttr('style').css("border","1");
$("th").removeAttr('style').css("border","1");
$("td").removeAttr('style').css("border","1");
I have tried the above with .table, .th, .td and have tried "1px" too.
I know that I can change the w3.css by removing the border settings and it works just fine, however, I would prefer not to do that.
border is a shorthand property for border-type, border-width, and border-color. You need all three properties.
table {
border: 1px solid #000;
}