Is there a way to remove the :hover from a css inline in angular without removing the whole class?
Like the following removes the whole class:
ng-class="{'option-selected' : option.chosen}"
But say option-selected had a option-selected:hover
Is there a way to remove :hover inline within the ng-class?
Attach the hover to another class that you can toggle.
Somethign like
ng-class="{'option-selected': option.chosen, 'option-hover': option.hover }
Then in your css for when setting up the hover you would have
.option-selected.option-hover:hover{
...
}
That way, the only way the hover will work is if both classes are on it.
Besides that, no there is no way to get around the hover from css unless you start dropping in !important's everywhere.
Related
Is there any way to target some components from react-bootstrap in CSS. For my application, I'm using Modals from react-bootstrap and I need to change some style on all of them and it will be annoying if I need to change every single one individually.
Yes, it is possible, however you will need to inspect the Modal using ChromeDevTools or the like and see what classes are applied to the Modal when it is displayed. For example, when I inspected the Modal from react-bootstrap, I noticed the styles applied to the heading were given the className of "modal-header". So I created a Modal.css file and added the following code to it:
.modal-header {
background-color: red;
}
Then, I imported "./Modal.css" into the Modal.js file or wherever you've defined or using your Modal. Finally, when I opened the Modal, the heading had a background of red color so to speak.
Please note that it can be a little difficult to override bootstrap styles sometimes.
I have the following code:
header_contents.push(<DropdownButton bsSize='xsmall' bsStyle='link' pullRight={true} id={1} title='Menu'>
{item_menu}
</DropdownButton>);
I want to have the styling in Bootstrap to be white lettering (currently blue) as I think the link option is defaulted to that. How can you change the styling for Bootstrap to pass link color, and other properties like if you want to move the link down a little on the page?
I should mention we do very little CSS styling as most of that is done within the ReactJS components.
Either override bootstrap CSS in a css file (that is what your seem to avoid I understand): it is the better way to ensure a global effect over every link in your application.
Or do no sent bsStyle='link' as DropdownButton property but instead, insert a style property with custom CSS. Yet you can insert style even if you don't remove bsStyle. You could then create your own component wrapping DropdownButton to ensure the same graphic chart in your application.
I figured it out with the help of an online chat room. Here's what I did.
I first made a style (dropDownLinkStyle) in the react component like this.
let dropDownLinkStyle = {
color: 'white'
};
Then I used it (dropDownLinkStyle) in the dropdownButton like this.
header_contents.push(<DropdownButton bsSize='large' style={dropDownLinkStyle} bsStyle='link' pullRight={true} id={1 /* avoids react warning */} title='Menu'>
{item_menu}
</DropdownButton>);
I hope this helps. This allowed me to keep my bsStyle which is link (tells Bootstrap I want a link type on my screen instead of a button) and allows me to change that link to white lettering. I could also pass more styling by just adding it to the object -- dropDownLinkStyle
I have a particular rounded button, with his CSS, but when I use it, my CSS blow up, because there are Ionic CSS "standard" rules.
My .button class is ruinded by the .button CSS class of Ionic.
I already tried to change name to my .button class but nothing. The only way to get my button is to not import the Ionic.css file, but of course, I need it for the other elements,
My button is nested inside other elements, for which I need the Ionic CSS
So, I need to know if is possible to exclude a specific HTML tag from the Ionic CSS rules, without edit Ionic.css file
Not possible. Go into the Ionic.css and Edit it. You can edit it. I checked the Docu for Sass: http://ionicframework.com/docs/cli/sass.html The CSS is placed in this folder: www/lib/ionic/css The better solution is, to set up an Sass environment. Then you can use only the components you need.
And other solution, but a bit dirty, is, to override the rule with a deeper selector. Maybe with .container .button or div.button or button.button or body .button.
You can use other class name in your custom css and use the property !important in each of your css rules. Anyway you could change the order of the imports.
I have a number of collapse directives in an app and i'd like to be able to individually switch their animation on and off (to 'force' them open or closed), depending on specific state. I've looked at the source and can't see where i'd be able to hook into the directive to achieve this. Or am i missing something obvious?
The only solution i can see at the moment, is duplicating the whole directive and modifying the link function to allow for a second attribute to be watched that would determine if animation is used or not.
AFAIK, the angular animation is based on CSS transition, so you could disable animations by add some CSS properties to the element.
May be define a noanimate class like this:
.noanimate {
transition: none !important;
}
then you could add/remove the noanimate class to the element when you want to disable/enable the animation.
Hope this helps.
I want to apply something like this
a:visited{background-color:#0F0;}
to all <a> tags, if at least one of them has been clicked.
I know how to do it using JavaScript, but is there a pure CSS version?
I doesn't have to be <a> or :visited, I just want to highlight all occurrences with a certain tag or class if just one of them gets selected/hovered.
I'm not too clear on the effect you want, and why you want it, but there's no way to do this with CSS, you're stuck using javascript :(
As I understand, you want to style all <a> tags if one has been hovered or clicked? Why not just make that the default style, it will probably only take 2 seconds until that happens.