I have data and each row/user is formatted something like this:
{
first: <string>
active: <bool>
}
I wish to apply a background color to the entire row if active property is false. Currently I have this, to try to get style applied to every row
rowClassName = (rowData) => {
return {'greyed' : true}; //will be {'greyed': !rowData.active} but this is for demonstration
}
<DataTable value={this.props.users.toJS()} //in render
selectionMode="single"
selection={user}
onSelectionChange={this.props.dispatch.editAccount}
rowClassName={this.rowClassName}
>
<Column field="first" header="First" filter={true}/>
</DataTable>
.greyed{ //in css
background-color: red;
}
which is only applying the style to every other row (see picture)
Any ideas on what I should try? i posted this question on the primeFaces forum 3 days ago and never got a response: https://forum.primefaces.org/viewtopic.php?f=57&t=58605
I just ran into this problem while trying out PrimeReact. My issue turned out to be that the default selector that sets the row background was more specific than my own.
This is the default:
body .p-datatable .p-datatable-tbody > tr:nth-child(even) {
background-color: #f9f9f9;
}
so just having
.specialRowColor { background-color: 'blue' }
is not specific enough to override the default. Instead I needed to do this in my css:
.p-datatable .p-datatable-tbody .specialRowColor {
background-color: blue;
}
Solved by overriding the css like this
.ui-datatable tbody > tr.ui-widget-content.greyed {
background-color: #808080;
}
Related
I'm working on building a responsive mobile navigation menu, and ran into an error with toggling open/close
The way I decided to go about it is to add className="show" that has a property of display: block to what's currently active, and className="hide" with a property of display: none.
This is my set up:
import {MenuOpen, MenuClose} from '../assets/AssetsIndex';
function menuActive() {
let menu = document.getElementById('mobile-menu');
let menuOpen = document.getElementById('menu-open');
let menuClose = document.getElementById('menu-close');
menu.classList.contains('active') ? open() : close();
function close() {
menu.classList.add('active');
menuClose.classList.add('show');
menuOpen.classList.add('hide');
menu.style.transform = 'translateX(0%)';
}
function open() {
menu.classList.remove('active');
menuOpen.classList.add('show');
menuClose.classList.add('hide');
menu.style.transform = 'translateX(100%)';
}
}
Initializing the menu icon with the class name:
<MenuOpen className='menu show' onClick={menuActive} id='menu-resting' />
<MenuClose className='menu hide' onClick={menuActive} id='menu-open' />
Scss:
.menu {
cursor: pointer;
margin: 0 auto;
position: absolute;
right: 2%;
z-index: 100;
&:hover path {
fill: #fff;
}
path {
fill: #fff;
}
}
.show {
display: block;
}
.hide {
display: none;
}
Error:
I went about displaying the menu container in the same way, so I'm not sure why I can't do the same with an SVG element. I've tried adding the properties with JS but ran into the same issue of the property value is null.
If anyone can tell me what I'm doing wrong that would be greatly appreciated.
There is no element with id menu-close in your code. Probably a typo. Assuming id prop of the MenuClose component is the id of the underlying element you have menu-open there.
Also, I would suggest using state hook for controlling whether the Menu is open or closed.
I am creating a list of offers with ng-repeat. Depending of each offer status, they should have different colors and, when active, it should have a different specific status as well. The active logic works well, but what is happening now, is that they all render as true, so they're all the same color. Feel free if you have any other ideas of doing this.
This is what I see when I inspect, after it renders:
ng-class="{'offer card-active-false card row text-left': currentOfferId === offer.id, 'offer card card-false row text-left': currentOfferId !== offer.id}" class="offer card card-true row text-left"
Here is what I have on HTML:
<div ng-repeat="offer in $parent.offersList track by $index">
<button ng-click="$ctrl.setCurrentOffer(offer)">
<div ng-if="" ng-class="{'offer card-active-{{offer.status}} card row text-left': currentOfferId === offer.id, 'offer card card-{{offer.status}} row text-left': currentOfferId !== offer.id}">
//then I have my divs
</div>
</button>
</div>
CCS:
.card-true {
background-color: #00FF44;
}
.card-false {
background-color: #C4C4CC;
}
.card- {
background-color: yellow;
}
.card-active-true {
background-color: #fff!important;
border-color: #00FF44;
}
.card-active-false {
background-color: #fff!important;
border-color: gray;
}
.card-active- {
background-color: #fff!important;
border-color: yellow;
}
thanks!
Put classes that always need to be present in a normal class attribute.
Then simplify the classes you need and separate them so you don't have to over-complicate the logic. My suggestions may be off, but it should look something like this:
card-status-... - driven by offer.status
card-active - driven by `currentOfferId === offer.id'
Then you could easily put the logic in ngClass, which lets you specify an array whose members can be strings that represent class names or objects whose keys are class names and whose boolean values indicate whether the class should be included. Like so:
<div class="offer card row text-left"
ng-class="[
'card-status-' + offer.status,
{'card-active' : currentOfferId === offer.id}
]">
Now in your CSS you can set up those classes by combining selectors:
.card {
background-color: yellow;
}
.card-status-true {
background-color: #00FF44;
}
.card-status-false {
background-color: #C4C4CC;
}
.card.card-active {
background-color: #fff !important;
border-color: yellow;
}
.card.card-active.card-status-true {
background-color: #fff !important;
border-color: #00FF44;
}
.card.card-active.card-status-false {
background-color: #fff !important;
border-color: gray;
}
Here is my solution, remove the complicated logic, which is obviously not binding properly inside the ng-class, it will only confuse and its not worth the time.
Note: I have used $scope variables instead of this, please use the GIST of the JSFiddle I'm sharing and try to build your code, I am unsure of the color requirements, please check and tell me if the code resolves your issue.
JSFiddle Demo
CODE:
var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope) {
$scope.offersList = [{id:1, status: false}, {id:2, status: false}, {id:3, status: false}, {id:4, status: false}];
$scope.currentOfferId = 0;
$scope.setCurrentOffer=function(index){
$scope.currentOfferId = $scope.offersList[index].id;
$scope.offersList[index].status = !$scope.offersList[index].status;
}
$scope.filterClass = function(offer){
var bool = offer.status ? 'true' : 'false';
if($scope.currentOfferId === offer.id){
return 'offer card-active-'+bool;
}else{
return 'offer card card-'+bool;
}
}
});
It's not completely clear which classes you want applied to which situation. You need to hand ng-class an array with each separate condition, this was probably the root of your problem.
You can also use ternary for this (angular v.1.1.4+ introduced support for ternary operator) which makes things look a little neater:
<div ng-class="[offer.id ===currentOfferId ? 'card-active-true' : 'card-active-false',
offer.status ? 'card-active-true' : 'card-false' ]"
class="offer card row text-left" >
I have a list of html items and I need to select every 3 over 3. (1,2,3,7,8,9,13,14,15 e.t.c)
Please suggest me, is it possible to do using css nth-child selector and what formula should be in parentheses? Or only way is JavaScript?
Hooray! I've found the solution! Thanks for your answers!
My version is:
.item:nth-child(1+6n),
.item:nth-child(2+6n),
.item:nth-child(3+6n) {
/* styles */
}
Are all the elements of the same type? You might be able to use :nth-of-type(3). :nth-child selects children of children too if I am not mistaking.
What is your scenario(purpose)? There are many way to archive it ~
Here is one way use override technique:
li:nth-of-type(n+13) {
color: green;
}
li:nth-of-type(n+10) {
color: red;
}
li:nth-of-type(n+7) {
color: green;
}
li:nth-of-type(n+4) {
color: red;
}
li:nth-of-type(n+1) {
color: green;
}
I have write a simple demo with SCSS here:
https://jsbin.com/gihuki/1/edit?html,css,output
I use Ext.grid.Panel in my project, but I think the default row height is too large and I can't modify the row height, so the whole grid makes me feel uncomfortable.
However, I find the panel-grid example in Extjs-4 doc is quite good. In it the row height is adjusted to fit the words height.Thus the whole grid is very compact.
So I wonder how can I set the grid row height?
One way you could change the row height is by using css. Each row uses padding along with the content for the height so if you were change the padding in this class it would make the row higher/lower:
.x-grid-cell-inner {
overflow: hidden;
padding: 3px 6px;
white-space: nowrap;
}
Also, you can take a look here:
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.view.Table-method-getRowClass
The following code uses a getRowClass function for the grid to specify a CSS class for specific rows:
JavaScript Code
viewConfig : {
forceFit : true,
getRowClass : function(record, index) {
if (index % 2 == 0)
return "red";
else
return "green";
}
},
The height can then be modified with CSS:
CSS Code
.red .x-grid-cell {
background-color: #FFFFDD;
height: 30px;
}
I have a gridpanel and 5 columns in that. Problem is that column headers and row data are not aligned. I believe its just the problem in my project only as when i create an example with the same code then everything works fine. Check the following image:
Can anyone suggest what could be the problem?
Please apply below css as per the requirements.
1) For Customizing specific ExtJS GridPanel, apply below css:
#testgrid_id table caption,table th,table td {
padding : 0px !important;
margin : 0px !important;
}
Note: Here, above "#testgrid_id" is the id of specific Grid Panel.
2) For applying to all ExtJS GridPanels, apply below css :
table caption,table th,table td {
padding : 0px !important;
margin : 0px !important;
}
Thanks!
Actually I found out that most times, the grid is under some panel.
Hence the actual problem is with this class
.x-grid-cell-inner
{
overflow: hidden;
padding: 2px 6px 3px;
**text-overflow: ellipsis;
white-space:nowrap;**
}
This is because the width of the or
<td class=" x-grid-cell x-grid-cell-gridcolumn-1099 "><div class="x-grid-cell-inner "></div></td>
Does not get set. Making the Div overflowing the columns and screwing up the whole grid alignment.
Probably because i nested the GridPanel into another panel OR a Row expander in my case or under some modal dialogue or whatever it may be causing the settings not to take place.
A Quick Fix.
**white-space:normal;**
Will do the trick and squeeze the contents into the column. However it does not apply the ellipses so it is a bit annoying if the content is long, its not hidden with "..."
I will try to find another solution that does the trick, but guess what, time to deploy this to the server!
I hope this helps someone
I have this bug using GXT 2.2.5 (Chrome Version 26.0.1410.43m).
Solution:
#media screen and (-webkit-min-device-pixel-ratio:0) {
.x-grid3-row td.x-grid3-cell
{
box-sizing: border-box;
}
}
Note, if your CSS contains something like:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
remote it.
I had exactly the same problem.
For me the problem was, was that I was setting HTML ids on my column headers. ExtJS then appends funny things to the ID, like titleEl, textEl, triggerEL.
Eg:
<div id="myPackageGridId1-titleEl" class="x-column-header-inner">
This must somehow screw up the column listener.
Solution : use class instead.
In my case (GXT 2.2.1) I fixed the problem by subclassing GridView, overriding getColumnStyle, and setting adj to 0:
import com.extjs.gxt.ui.client.GXT;
import com.extjs.gxt.ui.client.Style;
import com.extjs.gxt.ui.client.widget.grid.GridView;
public class GridViewBugFix extends GridView {
private boolean fixHeaderDisplacement = true;
public GridViewBugFix() {
super();
}
#Override
protected String getColumnStyle(int colIndex, boolean isHeader) {
String style = !isHeader ? cm.getColumnStyle(colIndex) : "";
if (style == null) {
style = "";
}
int adj = GXT.isWebKit ? 2 : 0;
if (fixHeaderDisplacement) adj = 0;
style += "width:" + (getColumnWidth(colIndex) + adj) + "px;";
if (cm.isHidden(colIndex)) {
style += "display:none;";
}
Style.HorizontalAlignment align = cm.getColumnAlignment(colIndex);
if (align != null) {
style += "text-align:" + align.name() + ";";
}
return style;
}
}