Rails 3.2
I am using bootstrap-datetimepicker.js
I have the defaults set to:
$.fn.datetimepicker.defaults = {
maskInput: false,
pickDate: true,
pickTime: true,
pick12HourFormat: false,
pickSeconds: true,
startDate: new Date(),
endDate: Infinity,
orientation: "auto",
collapse: true
};
But when I try to pick date/time, if the form is at the bottom of the screen, it's cut off.
I set the orientation to "auto", and I understand that this is supposed to fix the problem, but it's not. Any suggestions?
Related
For some reason fullcalendar doesnt add fc-h-event class to events in my "dayGridMonth" view:
which ends up looking bad:
(the second event)
here are my options:
this.calendarOptions = {
plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin],
locale: gbrLocale,
initialView: "dayGridMonth",
headerToolbar: {
start: "",
center: "",
end: ""
},
selectable: true,
events: this.fetchEvents,
editable: true,
showNonCurrentDates: false,
eventResizableFromStart: true,
dragScroll: true,
dayMaxEvents: 2,
navLinks: true,
dateClick: this.openAddNewEvent,
eventClick: this.openEditEvent,
eventDrop: this.eventDrop,
eventResize: this.eventResize
};
Any idea how to add this class in this view, or can u see mistake in my options?
It should be a normal behaviour where full day event is highlighted while time range event is marked with circle dot.
Here is the Codesandbox example with 2 types of event.
https://codesandbox.io/s/zen-darkness-fyfrz?file=/src/components/Calendar.vue
I was looking for option:
eventDisplay: "block"
Documentation: https://fullcalendar.io/docs/eventDisplay
render chart view
how the chart looks
So I feel like I've tried everything under the sun to remove that red rectangle above the chart. Anyone know how to remove it? Most of the examples with setting up options and legend like below might work with chartjs but not vue-chartjs if I'm not mistaken.
options: {
legend: {
display: false,
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
You litterly posted the answer yourself, the second object in the renderChart function is the options object so if you put it like this it will work:
{ responsive: true, maintainAspectRatio: true, legend: { display: false } }
Next time please dont post a screenshot of your code but include it as text in your post since it is a lot easyer to read and use for people
Is there a way to have both centered slides and an infinite loop, along with thumbnails with swiper.js? I have the following settings, but when I add loop true it doesn't seem to work.
var mySwiper = new Swiper('.swiper-container',{
paginationClickable: true,
centeredSlides: true,
initialSlide:1,
speed:1200,
centeredSlides: true,
slidesPerView: 'auto'
http://machinas.com/wip/hugoboss/fall2014/startpage/variable-width/
Thanks
centeredSlides is not really compatible with Loop mode. Try to increase loopedSlides and loopAdditionalSlides parameters.
eg:
centeredSlides: true
loop: true
loopAdditionalSlides: 100
I am using extjs 4.0.7. I want to disabled tab and Enter key event when user using Combobox. I have tried to use keyUp and KeyDown event. But I didn't get any alert for it.
Here is my code:
{
xtype: 'combo',
store: ds,
id:'UserBO_SelectComponentId',
displayField: 'displayName',
valueField: 'userId',
typeAhead: false,
hideLabel: true,
disabled: false,
hideTrigger:true,
multiSelect:true,
delimiter: ";",
anchor: '100%',
triggerAction: 'all',
listeners: {
change: function( comboField, newValue, oldValue, eOpts ){
selectUserCallBack2(newValue,'UserBO_SelectComponentId',comboField,oldValue);
},
select:function(comboField,oldValue){
testRec(comboField,oldValue)
},
keypress:function(comboField,e){
disabledKeysOnKeyup(comboField,e)
}
},
listConfig: {
loadingText: 'Searching...',
enableKeyEvents: true,
emptyText: 'No matching posts found.'
},
pageSize: 10
}
Can anyone please suggest what is the problem here?
The keyup, keydown and keypressed events only fire if enableKeyEvents is set to true. Default this is set to false, so you need to add enableKeyEvents:true to the combobox config. And then do special treatment for enter and tab key.
You don't need to listen to key events and tab into that. What you want to do is set autoSelect to false. It's true by default. When set to false the user has to manually highlight an item before pressing the enter or tab key to select it (unless the value of typeAhead were true), or use the mouse to select a value.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.field.ComboBox-cfg-autoSelect
I am using following code to create a form in my application.
var startAddressPanel = new Ext.form.FormPanel({
title: 'Address',
fullscreen: true,
scroll: 'vertical',
id: 'start_address',
defaults: {
labelWidth: '30%'
},
items: [txtFromStreet,
txtFromCity,
selFromProvince,
txtFromPostalCode,
selFromCountry]
});
In the resultant form each field has a small gap underneath.
Any suggestions.
Increase the labelWidth percentage until the gap no longer exists.