I am using this:
https://ng-bootstrap.github.io/#/components/timepicker/examples
Copy pasted the following code:
<ngb-timepicker [(ngModel)]="time"></ngb-timepicker>
The result should be like this:
But it is different in a sense that annoying texts appear:
How to remove them? The api documentation doesn't mention anything about this.
those elements have class sr-only. It is a bootstrap class. According to docs:
Use screenreader utilities to hide elements on all devices except screen readers
Looks like the styles you use in the project. You might miss some css from bootstrap or some nasty things overrides the .sr-only styles.
In my case, the bootstrap css wasn't properly applied in my Angular project.
I had to add following line in the global styles.css.
#import url("https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css");
Just add ng-version = "1.5" to the ngb-timepicker to remove the annoying texts. Like this:
<ngb-timepicker ng-version = "1.5" [(ngModel)]="time"></ngb-timepicker>
That worked for me, but I have no idea why.
The solution is the next:
<ngb-timepicker [(ngModel)]="time" [spinners]="false"></ngb-timepicker>
Those are called "spinners" and are set as "true" by default.
Hope it works for you!
fast resolve
styles: [`
.visually-hidden{
display: none !important;
}
.visually-hidden{
display: none;
}
Add this to your style.scss or a seperatly design for the component and it will work
I just had to add
::ng-deep .visually-hidden{
display: none;
}
Related
I've been trying out Docusaurus for doing some documentation. Only problem is that I'd like more space for the page itself rather than the side bar/toc. I'm using preset-classic. I've tried overriding --doc-sidebar-width in custom.css but nothing changes. Is there another way to do this?
You are in the right path, just add !important.
For others who may need this. In the file .\src\css\custom.css, add:
:root {
--doc-sidebar-width: 220px !important;
}
I am working on an Angular2 project and my application is mostly built with the PrimeNG framework delivered by the same company that creates PrimeFaces.
I ran into a problem, where I want to customize the colors and the overall appearance of an Accordion panel, and I can't figure out how to get it done with the styleClass property.
Where should I set it? WebStorm doesn't seem to like it if I do it this way:
<p-accordionTab header="Personal Information" styleClass="myStyleClass">
Content
</p-accordionTab>
Furthermore, I'd love to know how should I craft my CSS in order to make it work?
Appreciate your input! :)
I am working with primeng as well and the way it should work based on your example is the following:
p-accordionTab.myStyleClass {
width: 500px;
}
BUT there are a lot of bugreport that styleClass is not working properly.
So I advise you to use the default style classes primeng defines:
ui-accordion
ui-accordion-header
ui-accordion-content
so using them like this in style.css is working for me:
.ui-accordion {
width: 500px
}
You can define your .css file in your angular-cli.json the following way:
"styles": [
"styles.css"
]
Hope it helps!
if your looking for easy ngClass solution
here's a small example
(..)
<p-accordionTab [selected]="true" [ngClass]="elementFilter ? 'highLightFoundElement' : ''">
(...)
:host ::ng-deep .highLightFoundElement > div > a{
background-color: blueviolet !important; //your choice colour
}
In my Angular2 project, I extract some common css into a global-style.css file and link this in index.html.
I also link third-party css in index.html but third-party css conflict with my global-style.css.
Let's see a concrete example.
In my global-style.css I have a style
.display-none { display: none; }
In bootstrap css there is a style
input[type="file"] { display: block; }
When I want to hide file picker I write the code
<input class="display-none" type="file">
But file picker still display because input[type="file"] have higher specificity than .display-none. (according to https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)
There is a Plunker live demo: https://plnkr.co/edit/7HOT1if3ZhtSGu0UXOZX?p=preview
My question is, how to make my global-style.css have higher priority than other third-party css?
I know the way declaring !important but is there any other more elegant way? Thanks for any answer!
Here are some things you might be looking for:
Put the bootstrap link before your 'global-style.css'. This will solve your problem as the order of the links is the order that the CSS will be brought in.
Just use !important. A 10 character solution isn't not elegant.
I'm working with a friend on a project with a huge CSS file.
There is a lot of duplication like:
h1 {
color : black;
}
h1 {
color : blue;
width: 30px;
}
The first h1 can be removed, because it will never be used, because fully rewrited by the second. (because it is in the same CSS file)
I would know if it exists a tool that factorizes (and compress) this kind of stuff.
To only have at the end:
h1 {color:blue;width:30px}
PS: If it can be an online tool, it will be perfect!
There's a nice one in ruby: http://zmoazeni.github.io/csscss
In node.js: https://github.com/rbtech/css-purge
Both are very easy to use from command line.
This is also a nice once: http://cssmerge.sourceforge.net
And a plugin for Firefox: https://addons.mozilla.org/en-us/firefox/addon/css-usage
First you can try
CSS usage checker
Then Try these
CSS Compressor
Javascript Compressor
If you are using Firefox, you can use this addon which will help you achieve it.
https://addons.mozilla.org/en-us/firefox/addon/css-usage/
It creates a new css which tells you only used rules and sideline unused one. It also lets you export that css.
How do I override the css of a fancybox?
I'm building a website that uses fancybox on two different pages, and I want to override the fancybox css on one of these pages so the arrows are pushed outside of the box.
IE I would like to impart these properties on the fancybox:
.fancybox-prev {
left: -80px !important;
}
.fancybox-next {
right: -80px;
}
I can't figure out how to accomplish this and solutions to other relevant stackoverflow problems don't work. I'm sure there's a simple way to do it.
Can anybody help me out?
$('.fancybox-prev').attr('style', 'left: -80px !important');
$('.fancybox-next').attr('style', 'right: -80px');
You have to remember about hirarchy of the CSS. Inline CSS are the most important ones, external CSS will be read second.
When it comes to the latter, they are read from the top of your CSS file. So writing the style, which you want to use to override a previous one, below, should do the work just fine.
Secondly, you can always use jQuery to do that. ShaggyInjun gave a good example. You should be able to do that by using $(selector).css();.
if using fancybox v1.3.4 check:
http://fancybox.net/faq No.8 .... it also might be useful to check this.
if using fancybox v2.x check :
https://stackoverflow.com/a/8672001/1055987
Basically, you have to set a CSS inline declaration AFTER you have loaded the fancybox css file in order to override those properties.