I would like to change background color in a (bootstrap) grid in yii, depending on compared cell values.
It took me a while to figure out where do I even have to place CSS class to get something - .../protected/css/styles.css:
.notice {
background:#FFF6BF;
color:#514721;
}
I hope this is the right place.
In my grid:
'columns' => array(
...
array(
'name' => 'Pcs',
'cssClassExpression' => '$data["Pcs"] <> $data["Pcs"] ? "notice" : ""',
),
this way, my css definition is applied only in every second row. I've read a lot about this in different topics: CGridView. Add custom class to table rows preserving original „odd“ and „even“ and also here in stackoverflow.com.
I know there are "odd" and "even" rows, but I still don't get the picture. I've tried to manually change rowCssClassExpression
'rowCssClassExpression' => '',
because I thought if I disable basic yii row coloring, my css will apply, and in html source I can see there are proper class definitions for each row, but still, rows background color remained the same. What should I do to make it work?
Thanks a lot!
Your css rules are being ignored. The selector that's being applied is table tr td thus yours should be as follows
table tr td.notice {
background:#FFF6BF;
color:#514721;
}
If this doesn't work you could always set the rules using !important
Related
i sort a column in antd Table component and the entire column takes a default color. The problem is that i have custom css applied on my rows but when i sort them the default color of antd for sort override my custom css. I am writting reactjs
<Table
size='small'
dataSource={this.state.codes}
rowClassName={(record, index) => ((record.package_name===null ? 'disable' : ''))}
columns={[ }]
My own css that applied to all the row is on the rowClassName
What i want is to when i sort a column the default sort css not to be applied and override my custom css.
I have found a solution to my problem, the css selector that is responsible for sort in antd is this td.ant-table-column-sort. So inside my CSS file i have insert this code:
.even > td.ant-table-column-sort {
background-color: transparent;
}
Where even is my custom CSS
Is there a way to add a css class name to empty paragraphs in ckeditor so I can target them with css?
Empty paragraphs in ckeditor are not really empty because they contain a br tag so I can not use :empty to target them.
From what I can see, the good thing is that those <br> inside empty paragraphs have an attribute which makes them easy to target.
In the future, you might use a pure CSS solution like this one.
p:has(> br[data-cke-filler="true"]) {
/* styles here */
}
For now, you either have to style the directly.
Depending on what you're trying to accomplish, maybe applying css to the <br> would suffice.
br[data-cke-filler="true"] {
/* styles here */
}
And if you are able to run javascript in ckeditor. This can easely be done today.
Examples : with jQuery
$( "p:has(br[data-cke-filler="true"])" ).addClass( "MyEmptyParagraphsClass" );
or
$( "br[data-cke-filler="true"]" ).parent().addClass( "MyEmptyParagraphsClass" );
Example : with Native Javascript
var brs = Document.querySelectorAll("br[data-cke-filler="true"]");
brs.forEach(function(br) {
br.classList.add("MyEmptyParagraphsClass");
});
In CKEditor 4, you can have a configuration file.
And you can add the custom config with the options here.
In your case, you might need these options :
config.ignoreEmptyParagraph = false;
config.fillEmptyBlocks = false; // Prevent filler nodes in all empty blocks.
Meanwhile in CKEditor 5, you can try these documentations about Block Widget :
Adding a css class to block elements
Inline and block content
The same view, the same DetailView, the same code, different model, different end result:
What sets column width in this case? Why it is shifting with each record? Is this a Bootstrap or Yii2 issue? I tried to analyse generated code with Chrome Dev Tools, but got no conclusions. As you can see, there is a lot of empty spaces in both columns, so column width shifting should not occur.
Most important -- how to prevent that? How to make sure, that every view will look exactly the same, no matter what data will be printed inside DetailView?
Also you can use the public propetry template to achieve this. For example:
<?= DetailView::widget([
'model' => ...,
'attributes' => [[...], [...]],
'template' => "<tr><th style='width: 15%;'>{label}</th><td>{value}.</td></tr>"
]) ?>
In this case I have two columns where I am forcing the widht of first to 15% of total.
You can also use this approach to apply more style of your generated table.
The answer to question in title (What sets column width / distribution in Yii2's DetailView?) is "I don't know" or "Nothing sets this". However, adding these lines:
table.detail-view th {
width: 25%;
}
table.detail-view td {
width: 75%;
}
to site.css is one of many approaches to "fix" this problem.
.fix-width > tbody > tr > th {
width: 20%;
}
echo DetailView::widget([
'options' => ['class' => 'table table-striped table-bordered detail-view fix-width'],
'model' => $model,
'attributes' =>[],
]);
The correct answer is the width of the contents. If you look carefully to the content you see for different witdh of content. Alias different width of label column and value column. In this case the width is automatically manager by the widget. You can set them by css
I wonder how ExtJS makes columns hidden without any visible CSS changes!
The problem that I had - I can't set the CSS rule to hide children icon in that hidden column. F.e. if the hidden td had class 'hidden', I can use something like that:
td.hidden img {display:none;}
But in this case I can do it only in renderer with manipulating grid.columns[col].isHidden().
renderer: function(value,td,record,row,col,store,view) {
return grid.columns[col].isHidden() ? '' : someFunctionToRenderColumn();
},
It's ok, but then if I show hidden column it will not refresh grid and shows empty column. Of course I can add one more event for show/hide that column, but it is so difficult! Has it any simple way?
It gives them a width of 0px:
<colgroup>
<col class="x-grid-cell-gridcolumn-1023" style="width: 0px;">
</colgroup>
... and that should hide your img too. Except if you've given them an absolute positionning or something. You should try to position your img using float, margin and padding. Or you will have to toggle the 'hidden' class yourself using the hide and show event of the column.
You can hide columns by targeting the corresponding col element. No need to put classes on each of the individual tds.
Here's a fiddle I made earlier: http://jsfiddle.net/MrLister/MupLH/
which has
<table>
<col><col class="invisible"><col>
...
and the CSS:
.invisible {visibility:collapse}
But you don't even need a class; you can also use col:nth-child(2) if you know the column number.
It seems like it should be so simple, but I simply cannot get this done (I don't even need it done dynamically). For example, suppose I have a simple 2 column grid setup like so:
columns : [
{header: 'USER', dataIndex: 'firstName', width:70, cls: 'red'},
{header: 'CATEGORY', dataIndex: 'category', width:100}
]
The cls: 'red' attribute only effects the header and not the actual column. I have seen elsewhere that I should be using a custom renderer (maybe), but if I try something like:
{header: 'USER', dataIndex: 'firstName', width:70,
renderer: function(value) {
this.addCls('red');
return value;
}
}
I still get the boring white background. I have also seen people using a renderer function definition like so : function(value, metadata, record, rowIndex, colIndex, store), but when I used an alert() to test the input parameters I get undefined for everything except value, which makes me believe that maybe this was only valid for versions before ExtJs 4.
I also tried returning something like '<span class="red">' + value + '</span>' in my renderer function, but this only highlighted the text, rather than change the entire background of the column.
I do not want to override the default Ext css classes because I want to apply the background colors to a specific grid in the app, and not all of them.
Furthermore, all the columns of the grid in question may have different colors (note that in the example I only added the class to the first column).
Assume that red is defined as .red {background:#FF0000;} in my css file.
While the grid-faq suggested by atian25 does not apply to ExtJs 4, I was able to use it to guide me towards the correct answer to my question.
In the javascript, add an ID attribute to your column definition:
{header: 'SomeHeader', id: 'myColumn' dataIndex: 'theData'}
This will generate the following css class for all the td elements in that column:
.x-grid-cell-myColumn
In your css file (which must be loaded after the Ext css file) add the following definition:
.x-grid-table .x-grid-cell-myColumn {background:#FF0000;}
And bingo, you have a bright red background for said column. Using this same technique you can customize individual columns any way you want.
NOTE: without using the .x-grid-table selector the "row" classes specificity will win. You will also need to redefine .x-grid-row-over if you want to maintain a hover effect over your custom column.
Add a tdCls attribute to your column header definition, with a value of the CSS class you want to use.
columns : [
{header: 'USER', dataIndex: 'firstName', width:70, tdCls: 'red'},
{header: 'CATEGORY', dataIndex: 'category', width:100}
]
you'd better read this: http://www.sencha.com/learn/grid-faq/
the section 'To modify a cell/row/column'
The goal is to apply one cls to column, which I did with getRowClass and then remove it after 1-2 sec. The websync is pushing new data every 5 seconds, so when this changes to cell appear, it should be like a blink of a changed column(cell), that goes back to "white"(default) before new data refresh? The value assigned to compare new records with is 0, but in a real case is last value that is being compared!