Recently I'm using an image slider to my angular project then I need to add the background colour to each images' border like my attachment. I used custom CSS class to fulfil this but I cannot find way to apply this class correctly. But when I using DOM I can do that, My CSS class is as follows
border-boundry{
border-style: solid;
border-color: red;
}
NPM Package Link: https://www.npmjs.com/package/ng-image-slider
Demo: https://sanjayv.github.io/ng-image-slider/
What if you use one of the classes you have on the right like ng-image-slider-container ?
Try to add "background-color: red;" on the class ".ng-image-slider", is this what you want to do ?
It is very possible that the library you're using is enforcing css rules with !important flag. So you can either try to override it with !important yourself (not recommended ), or try to use already existing classes by adding more css to them...
Add the following lines in the styles.css of your angular app. With this you get the selected image surrounded with a frame.
.selected-image {
border: 1px solid lightgrey;
}
Related
Im currently working on a Angular2 application with webpack and Im trying to set differents css themes according to the user.
For example : When the user connect, If it's a boy, I want to have my backgrounds blue, and if it's a girl I want the backgrounds to be pink.
Simply changing the css value with setAttribute or style.property wont work because the DOM is destroyed when changing tab in the application, it needs to be kinda permanent.
I've tried using different css stylesheets (1 for each theme) and linking them to my html with javascript when the user connect. Problem is, webpack is always adding automatically my css to my html when building the app.
Thanks for the help.
In your css, make a rule like :
.is-boy{
background: blue;
}
.is-girl{
background: pink;
}
and declare in you angular app a scope var like $scope.userSex = 'boy';
and on your body use ngClass like this
<body [ngClass]="{'is-boy': userSex === 'boy', 'is-girl': userSex === 'girl'}" ...
:host-context selector
You could use the :host-context selector to apply styles to your component based on the parent component.
styles:[`
:host-context(.parent1) div{
border: 1px solid blue;
}
:host-context(.parent2) div{
border: 1px solid blue;
}
`]
This allows you to conditionally apply styles based on a the selector that wraps the component.
plunker
edit:
So in your case - your parent would have a div with class .boy and a div with class .girl
You could load these containing divs with some flag controlled by ngIf
If you want to be permanent store class value in localStorage. To set the theme use ngClass with variable set to theme you need.
I'm trying to remove the value of an inherited CSS property using Jquery.
.class1 #id1 div.class2 input.class-input{
border-color: #bbb3b9 #c7c1c6 #c7c1c6;
}
Anyone tell me how to remove this "border-color".
Thank.
Create a new class for example
.new_class{
border-color: #00ffdd !important;
}
!important does the trick!
Check this
You can use jQuery, but you'll have to assign a value to the border-color property. You can use transparent though:
$('.class-input').css('border-color', 'transparent');
Edit: Or you can disable the whole border:
$('.class-input').css('border', 'none');
You can either swap the on your div to change the color, or set the border color to empty using
$(".class1").css("border-color", "");
But I would recommend swapping out the class using the removeClass and addClass JQuery functions.
If you still want to keep the width of the border:
border-color: transparent;
If you want to remove the border all together
border: 0;
Edit: border: none; will give your the same result
So your jquery could look something like this:
$(".class-input").css("border","0");
However I would suggest using CSS if you don't need to make it animated. Since you raised the concern about .class1 #id1 div.class2 input.class-input.myclass (I'm assuming that's what you mean since you wouldn't be throwing a div into an input box.
You can use the CSS pseudo-selector :not
.class1 #id1 div.class2 input.class-input:not(.my-class){
border: 0;
}
The simplest way to handle this is to add another reference to give your override code a higher specificity.
.class1 #id1 div.class2 input.class-input [#MyNewID]{
border: none;
}
This removes the border for the area where you have added the ID so that if you are using this same format in other pages you can add an additional ID on the element on the page where you want the border to "disappear"
Please don't use !important this is a lazy way to override code and is not necessary 95% of the time. It will also cause you problem later when you are trying to change this if you are pushing down site wide skins.
My webview is using horizontal scrolling like a book to show the HTML contents. I am using scroll function to do this. My question is, how can I add a bottom border on every page using JS or jQuery?
I recommend using css to accomplish this. If you want your page's body to have a border, you would simply add this rule to your css:
body {
border-bottom:5px #f00 solid;
}
To accomplish this same result using jQuery, add this to your scripts:
$(document).ready(function() {
$('body').css({'border-bottom':'5px #f00 solid'});
});
Let me know if this accomplishes your goal!
Add a class to every page, then use that to add a border to all of them at once.
If the class name is page, then use this jQuery:
$(".page").css("border-bottom","1px solid black");
You can use any border style.
In JQuery UI, there are a lot of CSS double classes, for example for JQuery UI's tabs
.ui-widget-content .ui-state-default
{
border: 3px solid #EEEEEE;
background: #ffffff url(BGDel.png) repeat-x;
font-weight: bold;
color: #ffffff; outline: none;
}
The above works fine if it is in a CSS file.
I want to use javascript / Jquery to change one of property, like
$(".ui-widget-content .ui-state-active").css({"font-weight":"normal"} );
It doesn't work. Could anyone help how to set or change the CSS double class properties through script? Thanks.
$(".ui-widget-content .ui-state-active").css({"font-weight":"normal"} );
This line does not change the CSS class itself, it only selects an element matching this selector .ui-widget-content .ui-state-active.
So please do an "Inspect element" for example in firebug or Google Developer Tools, find needed element, and see if you are using the right selector.
Since .css() function puts all given code into style attribute, it should override any class that is in CSS file, so i think, that you should try a different selector to match your element.
There are two class apply on your element first is .ui-widget-content and second is .ui-state-default.
in your example you set css to .ui-widget-content or .ui-state-active. but it is not correct because the a another css .ui-state-default apply on that element.
so you need to use !important or also apply jquery code for.ui-state-default class
try -
$(".ui-widget-content .ui-state-active").css('font-weight', 'normal!important' );
or
$(".ui-state-default").css('font-weight','normal'); // for fire fox use css('font-weight', '400');
or
$(".ui-widget-content .ui-state-active .ui-state-default").css('font-weight', 'normal');
I am doing a code that do some js injection of code in page, with JQuery. But in my input that i get in some pages modify it, I am putting all important attributes and define them as !important, but it's impossible to put all the attributes in all the tags.
Someone know how to disable all other css inside a div?
Solution I think:
I found a solution but i don't want to use it. Its eliminate al css from the page, while i am injecting the code after using that code I eliminate my css and code and apply the original code from the webpage
Thanks
If you're using that many !importants you're doing it wrong.
The solution to this problem is to properly organize your css. Important stuff last, because it overrides what was previously styled. Also use your selectors wisely. Example:
<a class="link">Link</a>
.
a:link { color: red; }
.
.
.
.link { color: green !important; } // Nop
a.link { color: green; } // Yup
If you override everything it will work with normal CSS rules on every page. Not what you were hoping for, but it is a solution.
css:
#myInsertDiv {
color: blue;
padding: 0;
margin: 0;
background: white;
border: 0px;
/* etc you have to restyle EVERY possible value */
}
html:
<div id="myInsertDiv"></div>
The main issue is you have to style every attribute, and reset everything else to a default value.
Or you can insert all the style information into the style attribute on the div, but that is probably doing it wrong too.
If I got you right you can use jQuery for modifying CSS properties on any elements of the page (huh), using something like this $('.Myclass').css('color','#ff0000')
And more about selectors in jQuery - http://api.jquery.com/category/selectors/