I have used primeNg component on bootstrap's bs-modal,i used scrollbar for multiple notes. when click on p-calendar component, calendar is hiding behind scroll bar. As per showing in image.
Add following dependacnies
HostListener from angular-core
import $ from 'jquery';
and write following code to your ts component file.
#HostListener('document:click', ['$event'])
openCloseCalendar(ev) {
if("P-CALENDAR" == ev.path[2].tagName || ev.path[3].tagName){
let calElem = ev.path[2] || ev.path[3];
let target = $(calElem).find(".ui-datepicker")[0];
let calTop = $($(calElem).find("input")[0]).offset();
if(calTop && calTop.top){
$(target).css({"display":"block", "min-width": "200px", "position": "fixed", "top": calTop.top, left: ev.offsetY})
}
}
}
Try adding [appendTo]: 'body' in your p-calendar.
Related
How to fix the problem of having the navbar as position: fixed in Sitecore 9.3. I saw some solutions on the blogs, but it only fixes the issue on the Sitecore 8 versions.
Basically when I open the partial design in Sitecore Experience Editor, I have set my navbar as position fixed in theme css file, and it shows the navbar below the scWebEditRibbon. I also saw that scWebEditRibbon is now position fixed, still it does not fix my issue since I also have position fixed on my element.
I fixed the issue by using the script provided Richard Szalay, I just changed the variable as you can see here:
Here is the script:
// Repositions a position-fixed header so that it always appears under the SC experience editor ribbon
define(["sitecore"], function (Sitecore) {
return {
priority: 50,
execute: function (context) {
// TODO: Change this CSS selector to suit your application
var FIXED_NAV_SELECTOR = '#navbar';
// the 'cross piece' is a blank div that is sized to match the iframe content (where the actual ribbon is)
var scWebEditRibbon = window.parent.document.getElementById('scWebEditRibbon');
var nav = window.parent.document.querySelector(FIXED_NAV_SELECTOR);
if (scWebEditRibbon && 'MutationObserver' in window) {
var observer = new MutationObserver(function (mutations) {
nav.style.top = scWebEditRibbon.style.height;
});
observer.observe(scWebEditRibbon, { attributes: true, attributeFilter: ['style'] });
}
}
};
});
I want to apply a specific css class on the entire ionic2 selector class, rather than on the ion-content.
For example I have a page with a selector:
selector: 'home-page'
Now I want to toggle a css rule ( toggle a class 'resize-page' ) via TS function inside the ionic2 page. So each time I push the button it adds or toggles this class to the entire page selector.
You can use ngClass:
<ion-content [ngClass]="getClass()">
</ion- content>
And in your .ts file:
buttonClickedTimes = 0;
getClass(): string {
// based on how many times the button is clicked
// return 'class-1' or 'class-2'
this.buttonClickedTimes % 2 == 0 ? 'class-1' : 'class-2';
}
clickButton(): void {
this.buttonClickedTimes ++;
}
OR, as iWork suggested in a comment:
<ion-content [class]="buttonClickedTimes%2 === 0 ? 'class-1' : 'class-2'"></ion-content>
I'm having a chart build with ChartJS. I'm including datasets.label in multipleTooltipLabel template and facing an update issue. When changing a datasets.label and running chart.update() the tooltip is not updated. I created a JSFiddle demonstrating the issue.
The code I use to include datasets label in tooltip:
var options = {
multiTooltipTemplate: "<%=datasetLabel%>: <%= value + ' %' %>"
};
Beside that option I followed ChartJS usage example for Line charts.
Change label and update chart:
myNewChart.datasets[0].label = 'updated label';
myNewChart.update();
Label shown in tooltip is not updated...
I had a look in ChartJS source code and figured out that showTooltip function is called with a ChartElements array which was not updated.
Update: I might cached the issue. label of dataset is set on each point element and not updated if it changes. showTooltip used this "cached" dataset label when drawing a tooltip. Perhaps this should not be a question on StackOverflow but a bug report for ChartJS.
I found a solution:
myNewChart.datasets[0].points.forEach(function(point) {
point.datasetLabel = 'updated label';
});
This might also be the way it should be done. Chart.js documentation of update method says you should set myLineChart.datasets[0].points[2].value = 50; to change the value. That's confusing cause on creation dataset expects the values in data property. points is generated by Chart.Line Class on init. Naming may be different for other chart types (eg. it's bars for a bar chart).
I'm not quite sure if myLineChart.datasets[0].label value is used somewhere or if could be unchanged.
I could solve your problem by changing the original data object (data.datasets[0].label='updated label') then running myNewChart.initialize(data).
var option = {
plugins: {
tooltip: {
callbacks: {
label: function (context) {
//console.log(context);
label = 'new string ' + context.label + ', ' + context.dataIndex;
return label;
}
}
}
}
};
myChart.options = option;
ToolTips / Points Events are configurable with chartJS options...
Find more here: https://www.chartjs.org/docs/latest/configuration/tooltip.html
I am trying to build an iOS app using Promotion. It works fine as long
as I use the build in default design. But I want to be able to style for example
the navbar as I want (different colors and different background images).
How can I do this using Promotion?
Thanks!
You can use Teacup to easily customize your views. https://github.com/rubymotion/teacup
Add teacup to your gemfile, create a file appearence.rb in app/styles/appearence.rb and paste the following code:
Teacup::Appearance.new do
style UINavigationBar, {
tintColor: UIColor.blackColor
}
style UIBarButtonItem, {
tintColor: UIColor.blackColor
}
style UITableViewCell, {
layer: { # style the layer!
shadowRadius: 3
},
backgroundView: { # style the background!
backgroundColor: UIColor.blackColor
},
imageView: { # style the imageView!
contentMode: UIViewContentModeScaleAspectFill
}
}
style UISearchBar, {
tintColor: UIColor.colorWithRed(0.733, green:0.733, blue:0.733, alpha:1)
}
end
Add this line to your app delegate before loading your views
Teacup::Appearance.apply
Hope it helps.
The problem is very elemental.
If you go to http://flexigrid.info/ with IE9, and explore the 'example 2' section, and the columns resize over the visible place, that it will activate the horizontal scrollbar. And you hover the rows, you experience growing up the Flexigrid size. I don't experience IE7 and IE8, only IE9. This problem has by height: auto configurate. I didn't find solution yet. Please help me!
Actually, the solution that #Szenti posted will only work for 1 flexigrid on the page, if there are multiple, it will only takes the height value of the 1st bDiv it founds and apply the fix to all.
My revised version I think will apply to situations where there are many flexigrids on the page at one time.
ie9Fix: function() {
var bDivH = $(this.bDiv).height();
var bDivTH = $('table', this.bDiv).height();
if(bDivH != bDivTH && p.height=='auto') {
$(".bDiv").css({height: bDivTH + 18});
}
},
I had this same issue. Thanks #Szenti for the Answer, however, once this was in place I then had flexigrid resize issue when the results in the table where regenerated via AJAX. This occured in latest Chrome, Firefox and IE7/8.
So I added a (some would say dirty) browser sniff into the mix.
Global var:
var ie9 = false;
if ($.browser.msie && parseInt($.browser.version, 10) == 9) {
ie9 = true;
}
Then where #Szanti's method is called I just wrap it in:
if (ie9) {
this.ie9Fix();
}
Now works a treat in all browsers.
The solution:
You have to edit the flexigrid js. Append the g object with this:
ie9Fix: function() {
if($(".bDiv").height() != $(".bDiv table").height() && p.height=='auto') {
$(".bDiv").css({height: $(".bDiv table").height() + 18});
}
},
You have to call ie9Fix function in 2 places
In the g.dragEnd() function last row (this.ie9Fix();)
In the g.addRowProp() you have to write a new event:
.mouseleave(function(){
g.ie9Fix();
})
That's it!