As the title says, for example, I want to create a CSS class named myViewport to overwrite ui-grid-viewport (ui-grid).
This should have been discussed several times here. You can disable the horizontal bar with enableHorizontalScrollbar option. I don't think you would require css to achieve this unless you are trying out something different.
$scope.grid = {
enableHorizontalScrollbar: 0
};
It can take any one of the following values:
0 = disable;
1 = enable;
2 = enable when needed;
And note that you would need to pass the uiGridConstants to your controller.
You shall also check this github repository for more info.
https://github.com/angular-ui/ui-grid
I find a solution it's CSS element>element Selector, I add an id to parent element for example:
<div id=""test>
<div>
<div class="ui-grid-viewport(object)">...</div>
</div>
</div>
in the style.css
the name of class should be div#test >div> .ui-grid-viewport{}
this is a solution not simple, because I should find the position of ui-grid-viewport.
Related
in my tailwind.config.js I've setup this
module.exports = {
prefix: "tw-",
}
then I tried class="tw--top-4" but top: '-4px' is not reflected. I read the doc the negative value can be class="-top-4" but what about you want to use it with prefix? I also tried class="-tw-top-4" but no luck.
The working variant right now is tw--top-4 (but for some reason autocomplete shows -tw-top-4 instead, it's probably a bug), so negation comes after the prefix. There is a discussion about it on Github, but right it is like that.
To actually apply it you also need to add position for the element, e.g. relative or an absolute and etc. (don't forget your prefix too)
Example:
<div class="tw-text-red-500 tw-relative tw--bottom-4">
One
</div>
<div class="tw-text-green-500">
Two
</div>
<div class="tw-text-blue-500">
Three
</div>
Playground
I am trying to modify this project to show me some dates with colors, but i dont know how should i edit a specific element, lets say with id="3" what is inside the div with id ="March". Until now in all my atempts i only succeded coloring all divs with id="3".
So my question is how do i modify the proprietes of an element with id="3" && id="March"?
To target a div within a div do this:
<div id="3">
<div id="March"></div>
</div>
#3 #March {
color: purple;
}
Also try to use reasonable variable names in a camelCase naming convention.
Just use the DOM API for this.
In your case:
let march = document.getElementById('March')
let third_of_march = document.getElementById('3')
A small tip: IDs should be unique. The DOM API only returns one element. You should use classes in your use-case. This would make it even more simple.
let every_third_day = document.getElementsByClassName('3')
You can simply iterate over all elements and do whatever you want to do.
Looking for good practices about angular folder structure I stumble upon this piece of code:
content-layout.component.html:
<div [class]="theme">
<div class="mat-app-background">
<app-nav></app-nav>
<div class="container">
<router-outlet></router-outlet>
</div>
<app-footer></app-footer>
</div>
</div>
As far as I understand, the class tag is used to bind this component HTML with a CSS class.
But the square brackets caught my attention, is there any real difference between the [class] and class for css binding? I can't hit the correct search term/feature name to google it myself
the brackets [] indicate that the value is a property in your component, so instead of saying apply the class theme to the element, it will look for a property theme in your component and use whatever is stored in there.
class="theme" // apply class theme
// Component
public theme = 'theme';
// HTML
[class]="theme" // use what's stored in property "theme"
or
[class]="'theme'" // use string 'theme'
[] is a way to bind the data between ts and HTML, so in this case, the theme is a variable, on the other side container is a direct property
what you understood about class is right, where coming to [class], based on the value, class will be applied to that element. if the value is true or some value then that class will be applied to that element or else it will ignore that class. so basically you are using a specific class for some functionality and not using it for another
eg: <div [class.classOne]="true"></div> // now div element will have classOne class because result is true or some value.
references for better understanding about classes:
https://angular.io/api/common/NgClass,
Difference between [ngClass] vs [class] binding
I'm using the following instance of a react component in a view:
<Jumbotron>
Lot's of important content
</Jumbotron>
I want an individual style (i.e. a different background image for this instance. So this doesn't work:
<Jumbotron className="individual">
Lot's of important content
</Jumbotron>
Wrapping the instance in a div also doesn't work. How can I do this with simple markup and CSS so that I can simply style the individual class in CSS? AFAIK properties won't help to customize instances...
You can either pass in the style attribute or you can pass through the className attribute in the same way
<Jumbotron className="background--black">
And have your component like this -
const Jumbotron = ({className}) => {
<div className={className}>
Here is the jumbotron
</div>
}
export default Jumbotron
And import a css file that has that class in, if you're using className. But I would probably recommend just using style attribute if it's a one off.
Can I edit a HTML-tag's CSS using DART?
I have done some searching but I couldn't really find out how to do it, or if it even is possible.
The reason to do this because I would like to change a button's location on a page.
You can change or view css properties through Element.style. The Element.style is an instance of CssStyleDeclaration. You can do the following:
Element element = document.querySelector("div")
..style // edit any of the properties of this variable
..style.background = "orange";
I guess you are looking for something like
var el = document.querySelector('.somediv');
// or '#someid' or other CSS selector to get hold of an element
el.style.color = 'blue';
You may want to look at the dart class CssStyleSheet which can grab a sheet and delete, insert and add rules. You need to know the index of the rule in the style sheet.