I'm trying to provide dynamic styling to a MatHeaderCell instance like this:
[ngStyle]="styleHeaderCell(c)"
I've created a demo here.
I can see that:
styleHeaderCell(c)
Receives the column and returns and object however the style is not applied, and so the column still has a min width of 12rem and I want it to be 4rem. Thoughts?
It appears to be a syntax issue in your styles helper function.
Give this a try.
public styles: any = {
ID: {
'min-width': '4rem',
'background-color': 'red'
}
};
STACKBLITZ
https://stackblitz.com/edit/angular-material-data-table-module-styling-7vhrth?file=src/app/app.component.ts
These two URLs point to files which are identical except for one thing:
mobileCSS.html
noCSS.html
The mobileCSS.html file contains this line:
<link rel="stylesheet" href="/code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.css">
The noCSS.html file has the same line commented out:
<!--link rel="stylesheet" href="/code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.css"-->
Both pages use AngularJS to populate two <select> elements, one of which acts as a slave to the other. Both also contain a set of checkboxes to show the internal state of the model.
When jquery.mobile-1.4.3.css is used:
The initial values of the <select> elements are not displayed
The checkbox inputs do not update
Is this a known issue? Can you suggest a workaround for this?
Partial solution: correctedCSS.html
This reveals that jQueryMobile is not correctly updating, and that the decorations it adds hide the fact that the <select> and <checkbox> elements are being correctly updated by AngularJS:
.ui-checkbox .ui-btn {
z-index:0; /* in jquery.mobile-1.4.3.css, this is set to 2 */
}
.ui-select .ui-btn select {
opacity:1; /* in jquery.mobile-1.4.3.css, this is set to 0 */
}
Screenshots http://dev.lexogram.com/tests/angularJS/angularVSjqueryMobile.png
I am not too good at angular because I am also at learning stage but as per my knowledge something like below code can help.
JS
$scope.endonyms = [{code: "en", name: "English" }, { code: "fr", name: "Français" }];
$scope.selectedOption = $scope.endonyms[2];
HTML:
<select ng-options="endonym as endonym.name for endonym in endonyms"
ng-change="setSource()" ng-model="selectedOption">
The solution is as #Omar suggested:
you need to refresh checkboxes $(element).checkboxradio("refresh") and selectmenus $(element).selectmenu("refresh") after updating their values dynamically
However, timing is an important issue. When the AngularJS controller is first created, the jQueryMobile decorative elements have not yet been created, so they cannot be refreshed. Also, when AngularJS changes the value of a $scope property, the corresponding DOM element is not immediately updated, so calling "refresh" in the next line is pointless.
// Delay initial "refresh" until the page is ready
$(function () {
$("#source").selectmenu("refresh");
$("#target").selectmenu("refresh");
$("input[type='checkbox']").checkboxradio("refresh");
})
// Wait 1 millisecond before refreshing an item whose $scope property has been changed
function refreshChangedItems() {
window.setTimeout(function () {
$("input[type='checkbox']").checkboxradio("refresh");
$("#target").selectmenu("refresh");
}, 1)
}
You can find these fixes in solutionCSS.html
I'm stuck with a project I get at work. I need to change the background color of some days. It's a calendar where the user should see, which days are available and which not. I found out that there is an attribute called "data-date", but I didn't found a possibility to use it.
Is there any way to manipulate the background of specific days?
I think there must be a way, cause the cell which shows the current date has another color too.
For the views month, basicWeek and basicDay you can change the rendering of the days by providing a dayRender function. E.g.:
$("#calendar").fullCalendar({
dayRender: function (date, cell) {
cell.css("background-color", "red");
}
});
The documentation for dayRender is available here: http://arshaw.com/fullcalendar/docs/display/dayRender/
And here's a working example on jsfiddle: http://jsfiddle.net/kvakulo/CYnJY/4/
For those looking to simply change the color of past dates, target .fc-past in your css and add a background-color property. E.g.,:
.fc-past {
background-color: silver;
}
dayRender: function(date, cell){
if (moment().diff(date,'days') > 0){
cell.css("background-color","silver");
}
},
If any one want to jquery fullcalendar previous all day red(or any other) colored then this is the code.
var $calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultView: 'month',
dayRender: function (date, cell) {
var check = $.fullCalendar.formatDate(date,'yyyy-MM-dd');
var today = $.fullCalendar.formatDate(new Date(),'yyyy-MM-dd');
if (check < today) {
cell.css("background-color", "red");
}
}
});
Regin Larsen code help me achive this.
Thanks Regin Larsen.
Why not using the "data-date" attribute?
$("#calendar").fullCalendar(function() {
viewRender: function() {
$("[data-date="+$.fullCalendar.formatDate(new Date(), "yyyy-MM-dd")+"]").css("background-color", "red");
},
....
When working with external libraries, you should try not to take advantage of anything that was generated by the library. Since in the next version, if they change the way the library works internally, the library will still be backward compatible but your code will stop working. So try to use the library API as much as possible instead of doing hacks.
Answering your question, one way to do it will be, add a new event to all the days that are not available. This can be done by creating event object and doing a renderEvent(.fullCalendar( 'renderEvent', event [, stick ] )). While creating an event object assign the background color as the color you want and set the color, text color, border color to the same as background if you dont want it to be visible.
Edit:
Regin Larsen's answer seems better. I didn't notice that in the documentation.
To compare using the date parameter for a specific day:
$("#calendar").fullCalendar({
dayRender: function (date, cell) {
if (date.isSame('2016-08-04')) {
cell.css("background-color","red");
}
}
});
isSame comes from moment.js, which is used by fullcalendar:
http://momentjs.com/docs/#/query/is-same/
getDate does not work I guess, use moment instead.
inside var calendar = $('#calendar').fullCalendar({ ... }
dayRender: function (date, cell) {
var today = moment('2018-06-22T00:00Z');
if (date.isSame(today, "day")) {
cell.css("background-color", "blue");
}
},
Yes, I have been here: CSS Sprite not working
No, I don't get it. What does he mean by 'points'?:
"In other words:
For each ID value, apply 100 points
For each class value (or pseudo-class or attribute selector), apply 10 points
For each element reference, apply 1 point"
What are these 'points'? I read the articles and I get that there is order in specifying CSS codes, but I still don't understand. Right as this is I am only getting the very first sprite in the set. FYI-I used a sprite generator. (This one to be exact)
You can view the source code here. I would suggest zooming in on your browser to see everything properly.
Ricky: The img tag is occluding the background. I recommend changing it to a div. Also, you didn't include the NOS object in your code. Here's what I came up with:
<script>
var NOS = {
itemno: 0,
menuClasses: [
'img-blog',
'img-files',
'img-forums',
'img-login',
'img-logout',
'img-mail',
'img-news',
'img-profile',
'img-reg',
'img-settings',
'img-shop',
'img-status'
],
toggle: function() {
$('#menuimg').removeAttr('class').addClass(function() {
++NOS.itemno;
if (NOS.itemno > NOS.menuClasses.length - 1) {
NOS.itemno = 0;
}
return NOS.menuClasses[NOS.itemno];
});
}
}
</script>
From this sample: http://code.msdn.microsoft.com/windowsapps/ListView-item-templates-7d74826f
I attempted to isolate Scenario 5 in to it's own project, but I get the following result:
original (correct): top.
isolated (incorrect): bottom.
It's obviously a CSS related issue, but I can't figure out what needs to change to cause the elements to display correctly.
this is simply a result of my javascript ignorance:
when using "strict", the key is the groupInfo in the binding of the list. to set it manually through javascript:
WinJS.UI.setOptions(listView5, {
itemDataSource: myData4.dataSource,
layout: { type: WinJS.UI.GridLayout, groupInfo: groupInfo }
});