I'm using tippy to create responsive (position-aware) dropdowns. I have the following options:
tippy(this.inputEl, {
content: this.dropdown,
allowHtml: true,
trigger: 'manual',
...,
placement: 'bottom-start',
popperOptions: {
modifiers: [
{
name: 'flip',
fallbackPlacements: ['bottom-end', 'bottom-start', 'top-end', 'top-start']
}
]
}
});
The problem is that the initial placement is incorrect on small screens. It shows the dropdown always on bottom-start. After scrolling, it renders the dropdown correctly.
I tired to call update on the popperInstance after I show the dropdown, but it didn't work.
Related
How to display the time label of the timelineDay view of the fullcalendar at the bottom ?
as you can see in this image below. the time is on top of the grid. I want it to be at the bottom of the grid. How do we do that? there's no article about it in the official documentation.
below is my code to display those things you see in the image above. I wonder what parameter or property do we need to add so that the time will appear at the bottom, not on top
var calendarEl = document.getElementById('calendar');
var calendar = new Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid','timeline'],
header: {
left: 'prev,next today',
center: 'title',
right: 'timeGridDay,timeGridWeek,dayGridMonth,listWeek'
},
defaultView: 'timelineDay',
allDaySlot: false,
slotLabelFormat: {
hour: 'numeric',
hour12: false,
minute: '2-digit',
omitZeroMinute: true,
meridiem: 'false'
},
showNonCurrentDates: true,
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
drop: function(arg) {
// is the "remove after drop" checkbox checked?
if (document.getElementById('drop-remove').checked) {
// if so, remove the element from the "Draggable Events" list
arg.draggedEl.parentNode.removeChild(arg.draggedEl);
}
}
});
calendar.render();
Note: am referring to the "HOURS" displayed,not the control buttons on top
Try adding a footer section and move it there from your header section. The footer takes the same exact values as a header and will display at the bottom of the calendar. For more info you should check out https://fullcalendar.io/docs/toolbar
The issue seems to be in the latest Kendo UI Grid Demo as well.
http://dojo.telerik.com/AJApA
The grid works in small screens like tablets.
Open the above demo link in large screen and it works fine.
Move the slider between the code and result window to the left to the maximum and try again. Upon clicking the dropdown, the dropdown list blinks and closes off.
Sorry I can't add comments yet, but try to change the pageSize to number 5, it works this way, if you increases the number after 2 pages it will blinks again.
It is strange, but some how it works when it is 5.
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 5
}
instead of:
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
}
Following code create grid column with combo box in header but only working in IE for other browser combo box is not click able.
columns : [ {
header : 'Selected Year<br/><select style="width:80px" id="mndyearlist"</select>',menuDisabled : true,width:100}]
Thanks
Click on header has handler attached, and each click is bubbling up from select. Additionaly there is also drag&drop attached by default, which doesn't help either. So, you should change that behaviour. You can for example extend Column like so:
Ext.define('Ext.grid.column.SelectColumn', {
extend: 'Ext.grid.column.Column',
alias: 'widget.selectcolumn',
// disable D&D
draggable: false,
// handle click event
onElClick: function(e, t) {
var target = e.getTarget('select');
// if event is from select supress default behaviour
if (!target) {
return this.callParent(arguments);
}
}
});
Then just use that column in your grid, and your select should work.
Working sample: http://jsfiddle.net/9aTUY/4/
Having a strange issue with jqplot. I've created a horizontal bar chart with 2 series and 5 labels; all populated with variables from a table.
var plot1 = $.jqplot('chart1', [
[[SERIESA[0],TITLE[0]], [SERIESA[1],TITLE[1]], [SERIESA[2],TITLE[2]], [SERIESA[3],TITLE[3]], [SERIESA[4],TITLE[4]]],
[[SERIESB[0],TITLE[0]], [SERIESB[1],TITLE[1]], [SERIESB[2],TITLE[2]], [SERIESB[3],TITLE[3]], [SERIESB[4],TITLE[4]]]], {
seriesDefaults: {
renderer:$.jqplot.BarRenderer,
// Show point labels to the right ('e'ast) of each bar.
// edgeTolerance of -15 allows labels flow outside the grid
// up to 15 pixels. If they flow out more than that, they
// will be hidden.
pointLabels: { show: true, location: 'e', edgeTolerance: -15 },
// Rotate the bar shadow as if bar is lit from top right.
shadow: false,
// Here's where we tell the chart it is oriented horizontally.
rendererOptions: {
barDirection: 'horizontal'
}
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
This renders a lovely horizontal bar chart. I would like for the two series to be stacked under each label, but when I add the line
stackSeries: true,
above my seriesDefaults my bars all vanish. Everything else (labels, ticks, etc) remains the same. Is there something in addition to the stackSeries option I need to add?
I am not sure what might be the reason with your code, what you showed appears to be all right. Maybe something wrong with the way you set the data, but then again it wouldn't work at all.
Check out my example it might help you out.
I found a way to fix my problem (not entirely, but sufficiently for my need). This issue only occurs when I use custom lables pulled from somewhere else; if I use generic "1,2,3,4,etc." the graph stacks properly and shows data. Ideally I would have custom lables, but I can just put a simple table beside the graph to act as the axis labels.
Actually you can have custom labels, by adding tickt, for example:
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickOptions: {
angle: -90
},
labelOptions: {
fontSize: '11pt',
},
ticks: ['tick 1', 'tick 2'],
}
In the code below, if I set the activeTab to 0, the contents of /viewer/welcome show up as expected. If I set activeTab to 1 (like below), the second tab is activated on load, but when I click on the first tab, the content never displays. I can see it loading the content for the tab BEFORE I click on the tab (if I set autoLoad: false, it doesn't load it at all), but even though it loaded, it doesn't display.
{
xtype: 'tabpanel',
activeTab: 1,
items: [
{
xtype: 'panel',
loader: {
url: '/viewer/welcome/',
renderer: 'html',
autoLoad: true
},
layout: {
type: 'fit'
},
title: 'Welcome'
},
...
}
Why doesn't the content of the tab actually render when the tab is activated? Why does it work if that tab is the active tab on load, but not when it is activated otherwise?
If I make these changes, the text displays all the time as expected, but I get an extra page load from the spurious activate call.
{
xtype: 'tabpanel',
activeTab: 1,
items: [
{
xtype: 'panel',
loader: {
url: '/viewer/welcome/',
renderer: 'html',
autoLoad: false
},
layout: {
type: 'fit'
},
title: 'Welcome',
listeners: {
activate: function(me, opts) {
me.getLoader().load();
}
}
},
...
}
I'm just not understanding why the tabs are not managing this content as part of being a tab.....
I think the problem here is what you have indicated - the tabs are not managing content. The reason why they are not managing it properly is the HTML content that gets returned from loader is just that - some HTML, it is not an ExtJS Component. It is arguable that ExtJS "should" manage content that it has loaded but the docs allude to the contrary: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Component-cfg-html It might be worth while filing a bug on this.
Also, I noticed you had a fit layout specified on the welcome panel. Since you have no other items contained in that panel, you probably don't need that setting - incidentally it may (or may not) improve how the loaded html fragment gets handled.
Good luck.
I found out that in ExtJS 5.1 using the reference name didn't work. Had to put in an itemId