My problem does not appear to be solvable by using traditional ways of conditional styling, like [ngStyle] or [ngClass]. I want to conditionally define a CSS-selector using :host ::ng-deep, for example:
<style *ngIf='preventXScroll'>
:host ::ng-deep .p-datatable-wrapper {overflow-x: hidden !important;}
</style>
But doing it this way always applies the style, regardless of the actual state of preventXScroll. Any ideas?
Actually, the problem can be solved via [ngClass].
Template:
<div class='outer-wrapper' [ngClass]='{"prevent-x-scroll": preventXScroll}'>
<p-table>
...
</p-table>
</div>
Stylesheet:
:host ::ng-deep .prevent-x-scroll .p-datatable-wrapper {
overflow-x: hidden !important;
}
This way the style is only applied to p-datatable-wrapper (within p-table child component) while it is contained in prevent-x-scroll.
I'm finding very random when I can or cannot override Bootstrap classe/ id with a custom .css
For example, to change default navbar-dark, Background and font-style overriding is acceptable.
But font colour and size cannot change unless I force a change applying "style" inside of element or as an "id" linked to an external css file.
What does not works:
<nav class="navbar navbar-dark"style="background: red; color:
yellow; font-family: cursive font-size: 50px;">
<a href="" class="navbar-brand" style="color: yellow; font-size:
50px;">PATTERN</a>
</nav
Applying style on element works, such as:
<nav class="navbar navbar-dark"style="background: red; font-family:
cursive;">
<a href="" class="navbar-brand" style="color: yellow; font-size:
50px;">PATTERN</a>
</nav
Being able only to use id inside of each element becomes a problem when I have a big navbar and I want to apply a class to all of them.
What can I do to customize or how can I learn about those limitations?
Thank you :)
Well it depends if the color style is set in Bootstrap on parent element and then it descends or it is set directly on child... And it is set on the child... so you need to set it directly on that child.
But use CSS, or LESS, SASS etc.. dont use inline classes, set it globaly for all children you want to target.
Like that:
.navbar-dark .navbar-brand {
color: yellow;
}
The problem you are facing is directly related to CSS Specifity. CSS specifity applies when there are two or more conflicting CSS rules that point to the same element.
The specifity of the CSS rules determines which one of the conflicting rules will aply to your html element. In general, more specific CSS rules go over less specific ones. This is, from more specific to less specific:
Inline styles: styles defined in the "stype" attribute, inside the html tag.
ID: a CSS rule that references an element by its id instead of a class (for example #navbar).
Classes, attributes and pseudo-classes: most common css rules. In example:
.blueBackgroundClass {
background: blue;
}
Elements and pseudo-elements: usually only used to make site-generic styles, such as:
p {
font-family: "Times New Roman", Times, serif;
}
a {
color: blue;
}
For more information about it I strongly recommend you to see the CSS Specifity documentation.
When my page is loading, i would like to have a hidden button with css class.
It works with:
style="display: none"
but not with a css class:
<button class="ui left floated tiny button hidden">onclick="updateInformations()">Cancel</button>
and
.hidden { display:none }
It seems to have a conflit ".ui.button" in css.
How can i dow ?
Thanks for your help.
Try this
.hidden { display:none !important }
!important will make your class override bootstrap class's display behavior
This is a common issue with styles, i would recommend you to read about '!important' rule and use this inside the .hidden like so:
.hidden { display: nony !important; }
This should replace the old display rule with the new one.
You can always use JS for setting up the page :
$('#MeButton .button').css('display': 'none');
Try using the bootstrap classes for hiding elements:
class="hidden-xs "
Or use hidden-sm / hidden-md / hidden-lg according to your needs.
I need to disable the mouse hover on a particular button(not on all buttons) in the entire DOM. Please let me know how to achieve it using a CSS class.
i am using the below CSS class when my button is disabled. now i want to remove the hover effect using the same class.
.buttonDisabled
{
Cursor:text !important; Text-Decoration: None !important;
}
The above class will take care of removing the hand sign and text underline on mouse over . Now i want to remove hover effect also. Please let me know.
I have really simple solution for this.
just create a new class
.noHover{
pointer-events: none;
}
and use this to disable any event on it. use it like:
<a href='' class='btn noHover'>You cant touch ME :P</a>
You can achieve this using :not selector:
HTML code:
<a class="button">Click me</a>
<a class="button disable">Click me</a>
CSS code (using scss):
.button {
background-color: red;
&:not(.disable):hover {
/* apply hover effect here */
}
}
In this way you apply the hover effect style when a specified class (.disable) is not applied.
Here is way to to unset the hover effect.
.table-hover > tbody > tr.hidden-table:hover > td {
background-color: unset !important;
color: unset !important;
}
For this I ended up using an inline style because I only wanted the one particular element not to have any hover on-click event or style due to it just being part of instructions regarding the other buttons that looked like it on the page, and to give it override precedence. Which was this:
<button style="pointer-events:none"></button>
This removed all styling and bound JavaScript/JQuery functionality on the single element for me, while not affecting the others on the page :). For more info see the mozilla reference.
To disable the hover effect, I've got two suggestions:
if your hover effect is triggered by JavaScript, just use $.unbind('hover');
if your hover style is triggered by class, then just use $.removeClass('hoverCssClass');
Using CSS !important to override CSS will make your CSS very unclean thus that method is not recommended. You can always duplicate a CSS style with different class name to keep the same styling.
From your question all I can understand is that you already have some hover effect on your button which you want remove.
For that either remove that css which causes the hover effect or override it.
For overriding, do this
.buttonDisabled:hover
{
//overriding css goes here
}
For example if your button's background color changes on hover from red to blue. In the overriding css you will make it as red so that it doesnt change.
Also go through all the rules of writing and overriding css. Get familiar with what css will have what priority.
Best of luck.
Do this Html and the CSS is in the head tag. Just make a new class and in the css use this code snippet:
pointer-events:none;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.buttonDisabled {
pointer-events: none;
}
</style>
</head>
<body>
<button class="buttonDisabled">Not-a-button</button>
</body>
</html>
Add the following to add hover effect on disabled button:
.buttonDisabled:hover
{
/*your code goes here*/
}
Use transition: all 100s ease-in-out; to override the hover change. This is not a solution but a workaround if you do not know the original value of the property which you want to replace.
Other solutions didn't work for me.
I simply changed this
.home_page_category_links {
color:#eb4746;
}
to this:
.home_page_category_links, .home_page_category_links:hover {
color:#eb4746;
}
That means the same styles that are applied to elements of that class are also applied to elements of that class when hovered.
Extra note: If you're keeping the colour the same, perhaps you may also want to avoid any underline, if so, just include text-decoration: none; as well (or text-decoration: none !important; if using bootstrap).
I tried the following and it works for me better
Code:
.unstyled-link{
color: inherit;
text-decoration: inherit;
&:link,
&:hover {
color: inherit;
text-decoration: inherit;
}
}
What I did here is that I make the hover effect on the button but doesn't apply to the button that has the disabled class
button:hover:not(button.disabled){
background-color: rgb(214, 214, 214);
color: rgb(0, 0, 44);
}
Problem which I understood - Well I was doing something the same as yours. I have used four links among which two of them will hover and the other two will not. Now that I have used the a tag(hyperlink tag in HTML) to use hover, all my hyperlinks start hovering, which I don't want.
So, I put the two a tags which were not supposed to hover inside the same class, say .drop, and use the class to specify that I want all a tags inside the dropped class not to hover but the other a tags do.
To do so, I just wrote a CSS
a:not(.drop):hover {background-color: limegreen}
what I meant here is that apply a hover to all the tags but not the ones which are inside the .drop class.
Hope that helps!
#Simone Colnaghi was the first to mention it, and it worked for me too.
I have also faced the similar problem but the below method works for me.
Lets suppose you have two class, wantsHover and dontWantsHover just use:
.wantsHover:not(.dontWantsHover):hover {
background-color: red;
}
I have a twitter widget which is loaded into the footer of my page. The problem is that it uses !important properties all over the place. And because my stylesheets are all loaded into the head, the widget's style sheets automatically override any of mine.
Do I really have to put a couple of separate styles in the footer of my document, below the widget, to get force this. Or is there a more semantic method?
I would go through and see if there is a way to make your CSS more specific than the selectors used in twitter. The rules of specificity will ensure that your !important styles override the twitter !important styles.
Otherwise, as a last resort and if !important is only used on classes in the Twitter CSS then you could assign an id to anything that is overridden to ensure that your selectors are more specific.
/* your style */
#anti_twitter a.link {
color: blue !important;
}
/* twitter style */
a.link {
color: red !important;
}
So using the code above, the links would come out blue.
JSFiddle: http://jsfiddle.net/9T9uk/
<div id="myWrapper">
<div id="theDefaultId">
....
</div>
</div>
and you can use #myWrapper #theDefaultId { anything: value !important; }
theDefaultId is the id which the twitter widget uses and #myWrapper is an id defined by us.
This should work.