For my UI-Grid I've created conditional formatting with the following row template in the $scope.gridOptions object:
rowTemplate: '<div ng-class="{\'recruiter-row-active\':row.entity.activePositions!=0, ' +
'\'recruiter-row-passive\':(row.entity.activePositions==0 && row.entity.passivePositions !=0),' +
'\'recruiter-row-free\':(row.entity.activePositions==0 && row.entity.passivePositions==0)}">' +
'<div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" ' +
'class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell></div></div>'
The classes look like this:
.ui-grid-row .recruiter-row-active {
background-color: #ff816b !important;
}
.ui-grid-row .recruiter-row-passive {
background-color: #fcff9d !important;
}
.ui-grid-row .recruiter-row-free {
background-color: #70cc79 !important;
}
The class for the html row in question is "ui-grid-row" and "ng-scope" and the parent element has class "ui-grid-canvas"
I was able to get my conditional formatting to work when I also implemented a
.ui-grid-row .ui-grid-cell {
background-color: inherit !important;
}
However I don't want to affect the other grids in my web app.
How would I get my conditional row formatting to override the default?
You can use scss and wrap your grid with a:
<div view="my-colors">
<!-- your grid element goes here -->
</div>
in the scss file, wrap the styling you want to affect only that view with:
[view="my-colors"] {
.ui-grid-row .ui-grid-cell {
background-color: inherit !important;
}
}
Related
I need to dynamically change a p-card component in my APP. But it's simply not working...
Heres what I've tried so far :
<div class="card-image-comp">
<p-card [class.activeCard]="profileCardSelected === 1" (click)="selectProfileType(1)">
<img src="../../../assets/icons/person.png">
</p-card>
<p>Paciente</p>
</div>
<div>
<p-card [class.activeCard]="profileCardSelected === 2" (click)="selectProfileType(2)">
<img src="../../../assets/icons/estetoscopio.png">
</p-card>
<p>Profissional de Saúde</p>
</div>
...
My function:
selectProfileType(numCard: number){
this.profileCardSelected = numCard;
}
This part is working just fine, the issue is that the component is not obeying it's new class.
I've tried the normal stuff:
.activeCard {
background-color: black;
}
...
div {
.activeCard {
background-color: black;
}
}
...
.personalCardComp {
.activeCard {
background-color: black;
}
}
... and even some nasty stuff
:host {
::ng-deep .activeCard {
background-color: black;
}
}
...
:host {
::ng-deep p-card.p-element.activeCard {
background-color: black;
}
}
As I said before, the class is applied correctly, but the card only changes when I apply the css to the div children of the p-card...
Basically if I could apply the class to this div children It would work just fine... Is there a way to do so? Apply the class to p-card but the div children obbey...
Be sure to properly import your .scss file and then:
:host ::ng-deep {
.p-card.p-component {
background: black;
}
}
I am working on a web component library with StencilJS, and I have a problem using the CSS + Selector. I have a Breadcrumb web component, which will contain multiple breadcrumb items (web component as well). Every Breadcrumb item after the first item should add > smybol with ::before. Therefore I use the CSS + selector
df-breadcrumb.tsx
export class DFBreadcrumb {
render() {
return <ol class="breadcrumb">
<slot></slot>
</ol>
;
}
}
df-breadcrumb-item.tsx
export class DFBreadcrumbItem {
/**
* Link
*/
#Prop() link: string;
render() {
return this.link ? <li class="breadcrumb-item"><a href={this.link}><slot></slot></a></li> :
<li class="breadcrumb-item"><slot></slot></li>
;
}
}
test.html
<df-breadcrumb>
<df-breadcrumb-item link="#">Start</df-breadcrumb-item>
<df-breadcrumb-item link="#">Library</df-breadcrumb-item>
<df-breadcrumb-item>Item</df-breadcrumb-item>
</df-breadcrumb>
my css rule
.breadcrumb-item+.breadcrumb-item:before {
display: inline-block;
padding-right: .5rem;
color: #6c757d;
content: ">";
}
expected output: Start > Library > Item
current output: Start Library Item
I think this is not working cause Stencil ecapsulates my li tags and their direct parent is not the ol. I read something about using the :host() pseudo class, but could not got it working. Also I have set shadow: falsein my components.
You're right, the problem is the df-breadcrumb-item element.
A simple alternative would be to apply your CSS to the df-breadcrumb-item elements:
df-breadcrumb-item + df-breadcrumb-item:before {
display: inline-block;
color: #6c757d;
content: ">";
}
Alternatively you could add the arrow to the .breadcrumb-item element inside the df-breadcrumb-item component, either depending on a property or by manually checking if the #Element() is the last node.
I am new to css and i would like to know if css can be applied to the properties of tag?
For example in the below code i would like to see entry.count and "files" in blue color.
code
render() {
return(
<div className="AppL" id="AppList">
{this.createApplicationList()}
</div>);
}
createApplicationList() {
var guiResult = [];
for (var key in this.state.AppName) {
var entry = this.state.AppName[key];
guiResult.push(
<Collapsible trigger={entry.AppName + "\t" + "\t" + entry.Count + " files"} className="AppList" transitionTime ="10">
</Collapsible>);
};
return guiResult;
}
my scss for this component
.AppList{
color: black;
border-bottom: 1px solid #00a886;
padding-top:10px;
padding-bottom:10px;
}
.Collapsible .Collapsible__trigger {
color: blue;
}
.Collapsible selects all elements with the Collapsible class. Collapsible_trigger does the same for the Collapsible__trigger class. Together, the rule selects all .Collapsible__trigger elements within .Collapsible elements, and styles them with blue text.
This is based purely on your provided HTML code. The JavaScript appears to be irrelevant.
.Collapsible .Collapsible__trigger.is-closed also works and is more specific. Depends on your use-case.
I'm using CSS modules and by far everything was working great.
We started to use external UI library along with our own one, so I'm writing components like this:
<div className={styles['my-component']}>
<ExternalUIComponent />
</div>
Assuming that the ExternalUIComponent has its own class that in the final CSS file looks like this external-ui-component, how can I make adjust this component styling from my css file? The below example does not work:
.my-component {
font-size: 1em;
}
.my-component .external-ui-component {
padding: 16px;
// Some other styling adjustments here
}
Please do not use inline styles as someone else suggested. Stay away from inline styles as much as you can because they can cause unnecessary re-renders.
You should use global instead.
.my-component {
:global {
.external-ui-component {
padding: 16px;
// Some other styling adjustments here
}
}
}
https://github.com/css-modules/css-modules#usage-with-preprocessors
Also, I recommend using camel case style names which is the preferred way for css-modules.
So your class name would be : .myComponent { ... }
And you can use it in your code as
<div className={ styles.myComponent } >
If you wanted to add more styles , you can use the array.join(' ') syntax.
<div className={ [ styles.myComponent, styles.anotherStyle ].join(' ') } >
This is cleaner!
Here's a shorter form in pure CSS (i.e. no preprocessor needed):
.my-component :global .external-ui-component {
// ...
}
Did you try inline styles for that component ?
https://reactjs.org/docs/dom-elements.html#style
const divStyle = {
color: 'blue',
backgroundImage: 'url(' + imgUrl + ')',
};
function HelloWorldComponent() {
return <div style={divStyle}>Hello World!</div>;
}
Angular JS code I am working on has media queries that can be used to limit the display of blocks with code like this:
#media screen and (max-width: 370px) {
#testGrid {
.gridHeader {
div:nth-child(2),
div:nth-child(3),
div:nth-child(n+7) {
display: none;
}
div:nth-child(6) {
border-top-right-radius: 0.4rem;
}
}
.gridBody {
div {
div:nth-child(2),
div:nth-child(3),
div:nth-child(n+7) {
display: none;
}
}
}
}
}
My comment here was that it's not good to use things like div:nth-child(2) as this would easily break if another column was added. Plus it's also difficult to maintain. I suggested to give the column names class names that matched the contents of the columns.
Still this means that I have the code that defines what shows and what does not show far removed from the HTML. Does anyone have any suggestions on a way that I could do this with AngularJS that would have the showing and hiding of columns next to the actual <div>s
You can get the current width from the $window service so you could try something like this:
DEMO
app.controller('MainCtrl', function($scope, $window) {
$scope.name = 'World';
angular.element($window).bind('resize', function(){
$scope.hideThing = ($window.innerWidth < 400);
// have to manually update $scope as angular won't know about the resize event
$scope.$digest();
});
});
Then in your HTML
<body ng-controller="MainCtrl">
<p ng-hide="hideThing" >Hello {{name}}!</p>
</body>