I dont know if am using the right title for this issue.
I have 2 input that triggers a bootstrap datepicker, one for the calendar and the other for the time.
<input type="text" class="form-control" placeholder="date" id="surveyDatepicker">
<input type="text" class="form-control" placeholder="time" id="surveyTimepicker">
Datetimepicker is initiated this way:
$('#surveyDatepicker').datetimepicker({
showClose: true,
format: 'L',
icons: {
close: 'closeText'
},
debug: true
});
$('#surveyTimepicker').datetimepicker({
format: 'LT',
debug: true,
showClose: true,
icons: {
close: 'closeText'
}
});
I change the default x as suggested in this post How to add close text to datetimepicker bootstrap?
The close button is displayed correctly at the bottom of the calendar container just below the calendar.
But in the time container, the close button is displayed at the very top of the container just above the time selectors.
How can I move the close button inside the time container just below the time selector?
I solved this with css and flex.
Havent check if its working in all browsers but so far is the best i can do.
.bootstrap-datetimepicker-widget {
ul {
display: flex;
flex-direction: column;
li.picker-switch.accordion-toggle {
order: 2;
}
}
}
Related
I have a transition-group that renders a div, and within that is a component with a v-for attribute that renders several items. I then have a button that adds a new item to the beginning of the array. That transition works perfectly.
The only thing I don't like, is that the entire list loads with the transition on page load, and I'd like to disable it only on page load. I've searched Stack and Google but couldn't find a way. Is there a way to do this, so that transitions still works on button click, but is disabled for page load?
<transition-group
name="item-list"
tag="div">
<item-row
v-for="item in items"
:key="item.id"
:item="item" />
</transition-group>
.item-list-enter-active,
.item-list-leave-active,
.item-list-move {
transition : 250ms cubic-bezier(0.59, 0.12, 0.34, 0.95);
transition-property: opacity, transform;
}
.item-list-enter {
opacity : 0;
transform: translateX(50px) scaleY(0.5);
}
.item-list-enter-to {
opacity : 1;
transform: translateX(0) scaleY(1);
}
.item-list-leave-active {
position: absolute;
}
.item-list-leave-to {
opacity : 0;
transform : scaleY(0);
transform-origin: center top;
}
I wish I could've found a more "Vue-y" way of handling this, however I ended up going this route. Essentially I added a class to the body and removed all transitions. Then on the created lifecycle of my component, I remove that class. This removes the transition on page load, but still keeps the transition on click of the button like I want.
You can dynamically change the name value of the transition-group. Maybe on page load have a value different from the value that has the correct class name that the CSS targets. Then in the mounted lifecycle hook you can change it back to the correct class name.
You need to bind the duration for transition-group
template:
<transition-group
:duration="duration"
name="item-list"
tag="div">
<item-row
v-for="item in items"
:key="item.id"
:item="item" />
</transition-group>
script:
data() {
return {
duration: 0,
items: [
{id: 1},
{id: 2}
]
}
},
methods: {
add() {
if(this.duration===0) this.duration = 250
this.items.push({id: 'xxx'})
}
}
In case anyone comes across this like I did.
I ended up achieving this by having a transitionsOn flag added to the data (didn't seem to matter what it was initialised to), and a computed name for the transition, i.e.
<transition-group :name="transitionName">
in computed, I then had, for a transition called 'flash'
computed: {
transitionName() {
return this.transitionsOn ? 'flash' : 'disabled';
},
},
I would then set this.transitionsOn = true when I wanted it to fire.
Took a lot of fiddling about to figure this out but it seems to work OK
I'm trying to use a Quill.js editor inside a Vuetify v-dialog, but the toolbar dropdowns are not closed when the user clicks outside the current opened dropdown.
I made a js Fiddle:
https://jsfiddle.net/6d7bef5n/
<div id="app">
<v-app>
<quill-editor v-model="content"></quill-editor>
<v-dialog v-model="dialog">
<quill-editor v-model="contentKo"></quill-editor>
</v-dialog>
<v-btn #click.stop="dialog = !dialog">Open Quill in a Modal</v-btn>
</v-app>
</div>
Vue.use(VueQuillEditor)
Vue.use(VueQuillEditor)
new Vue({
el: "#app",
data() {
return {
content: "I'm OK",
contentKo: "I'm Wrong, Toolbar dropdowns are not closing on blur",
dialog: false
}
}
});
It seems that the v-dialog component does something wrong on the events inside his content slot, probably for the open/close behavior, but didn't found what.
Thanks
As #MarlburroW pointed out Vuetify's VDialog components stops the propagation of the click event when the user clicks inside of the dialog.
https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VDialog/VDialog.js#L284
In my case I had a custom directive which detects clicks outside of the target element, for example for a dropdown component. This worked, but if you used such a component inside of Vuetify's dialog the custom directive would not work, because the VDialog stopped propagation of the click event.
Vuetify has its own outside click directive which they use for menus, selects...etc. It does not suffer from this issue.
https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/directives/click-outside.ts
I had a look at the differences between Vuetify's directive and my own and the reason it works is that they use capturing instead of bubbling for the event listener.
The following codepen demonstrates it:
https://codepen.io/geersch/pen/LoLgYK
onClick = function (e) { console.log('The click event bubbled up.'); };
document.body.addEventListener('click', onClick, { capture: true });
// document.body.addEventListener('click', onClick, { capture: false });
dialog = document.querySelector('#dialog');
dialog.addEventListener('click', function (e) {
e.stopPropagation();
});
So I just changed my directive to use capturing too.
.quill-editor {
user-select: auto !important;
-moz-user-select: auto !important;
-webkit-user-select: auto !important;
-ms-user-select: auto !important;
}
Try it. It works for me.
I am using sideNav of MaterializeCSS in my application. I do not want to close sideNav while clicking outside. It can be achievable in modals like this:
{ dismissible: false }
How to do this in sideNav?
MaterializeCSS doesn't have a built-in method for achieve this task, but you can use a workaround, unbinding the click event from sideNav overlay:
$(function(){
$(".button-collapse").sideNav();
$(".drag-target").unbind('click');
$("#sidenav-overlay").unbind('click');
});
Update:
As of late, you can modify options of the sidenav by doing the following
$(".button-collapse").sideNav({
menuWidth: 300, // Default is 300
edge: 'left', // Choose the horizontal origin
closeOnClick: false, // clicking outside of the nav will not close it
draggable: true, // Choose whether you can drag to open on touch screens,
onOpen: function(el) { }, // A function to be called when sideNav is opened
onClose: function(el) { }, // A function to be called when sideNav is closed
});
});
you can take a look here to learn more: http://materializecss.com/side-nav.html
what I am trying to do is on open, menu 1, showing 'Click me to start'. Menu 2, which currently says 'This is menu 2', just for building purposes, is hidden. Then, on first click, menu 1 hides and menu 2 shows, then toggles back on second click. The problem is that once menu 2 is showing and menu 1 is hidden, it won't toggle back.
<div id="nav" class="nav">
<div id="whiteboardtext1" class="whiteboardtext1"><p>Click here to start</p></div>
<div id="whiteboardtext2" class="whiteboardtext2"><p>this is menu number 2</p></div>
</div>
.nav{
width:700px;
float:left;
}
.whiteboardtext1{
position:absolute;
margin-top:110px;
margin-left:215px;
width:300px;
height:100px;
font-size:30px;
font-family:whiteboard;
text-align:center;
border:1px solid #fff;
cursor:pointer;
}
.whiteboardtext2{
z-index:1;
position:absolute;
margin-top:50px;
margin-left:50px;
width:650px;
height:350px;
font-size:30px;
cursor:pointer;
font-size:30px;
font-family:whiteboard;
text-align:center;
border:1px solid #fff;
cursor:pointer;
}
$(document).ready(function(){
$('#whiteboardtext2').hide();
$('#whiteboardtext1').toggle(
function() {
$('#whiteboardtext1').stop().animate({
'opasity':'0'
}, 'fast');
$('#whiteboardtext2').stop().animate({
'opasity':'1'
}, 'fast');
$('#whiteboardtext1').fadeOut();
$('#whiteboardtext2').fadeIn();
},
function() {
$('#whiteboardtext1').stop().animate({
'opasity':'1'
}, 'fast');
$('#whiteboardtext2').stop().animate({
'opasity':'0'
}, 'fast');
$('#whiteboardtext2').fadeOut();
$('#whiteboardtext1').fadeIn();
})
});
I pretty sure the code is correct, but I just can't get it to work.
If anyone can help, I would really appreciate it.
Thank in advance
me
If I understand you correctly - http://jsfiddle.net/M8Tgx/
I changed CSS rules for .whiteboardtext2 just added display:none; by default.
I rewrite your JavaScript to this:
$(document).ready(function(){
$('#whiteboardtext1').click(function(){
$('#whiteboardtext1').fadeOut();
$('#whiteboardtext2').fadeIn();
});
$('#whiteboardtext2').click(function(){
$('#whiteboardtext1').fadeIn();
$('#whiteboardtext2').fadeOut();
});
});
You code is not correct, because you are applying toggle #whiteboardtext1 element, but when it first call, it hide and the #whiteboardtext2 get displayed, and you dint apply any event on that, so it is not working as you are expecting. and opacity is correct css property.
You can try this to work
$(document).ready(function(){
$('#whiteboardtext2').hide();
$('#whiteboardtext1').show();
$('.nav').on('click', 'div', function() {
var _this =$(this);
_this.stop().animate({
'opacity':'0'
}, 'fast', function(){_this.hide();})
_this.siblings().stop().animate({
'opacity':'1'
}, 'fast').show();
});
});
This is because the toggle handler is bound to the #whiteboardtext1 element. Whenever #whiteboardtext1 is clicked, one text will fade out and the other will fade in, but #whiteboardtext2 has no click handler, so clicking it has no effect.
Also, opasity is not a valid CSS attribute, so animating it has no effect except to delay the subsequent animations. Assuming you wanted to fade the texts in/out, not a delayed sudden change.
Use this:
var $text1=$('#whiteboardtext1');
var $text2=$('#whiteboardtext2');
$text1.click(function(){
$text1.stop().fadeOut("fast");
$text2.stop().fadeIn("fast");
}
$text2.click(function(){
$text2.stop().fadeOut("fast");
$text1.stop().fadeIn("fast");
}
I have a dojo dijit tab container and I want the tabs to flash a few times when an event occurs and it is not the selected tab. For example, when I receive a chat message I want the "Chat tab" to flash a few times as a visual notification that a chat has been received. I'm having a hard time finding the right control (the tab) to modify. Here is the code:
The HTML:
<div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region:'center',splitter: true">
<div id="tabChat" title="Chat" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="iconClass:'i-chat', design: 'sidebar'">
<div id="pnlChatLog" style="background-color:#FFF; padding:0px;" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center', splitter:true">
<div id="divChatLog" style="width:100%; height:100%; overflow-y:scroll; overflow-x:hidden;">
</div>
</div>
<div id="pnlChatMessage" style="background-color:#FFF; padding:0px; overflow:hidden;" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom', splitter:false">
<input id="txtChatMessage" style="width:100%; margin:0px; border:0px;" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="intermediateChanges:false,placeholder:'Enter Message'" />
</div>
</div>
<div id="tabQuestions" title="Questions" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="iconClass:'i-help', design: 'sidebar'">
<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center', splitter:false, gutters:false">
<div style="background-color:#FFF; padding:0px; border-top:0px;" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center', splitter:true">
<div id="gridQuestions"></div>
</div>
</div>
</div>
The javaScript:
//Chat message Event
chat.on("message", function(e) {
//Message code is here...
//TODO: Make the tab flash if it is not the current tab
});
Note: The messaging code (not shown here) works. I just need to know what javaScript will replace the TODO section so the tab blinks/flashes for a few seconds at this point.
To get to the tab button you have to use the tab element's "controlButton" then modify the domNode. Here is an example:
//A method for the blinking using setInterval. The top line shows
//how to get the actual tab that you want to modify. Then add and remove the
//Hover classes for a nice flashing/blinking effect.
function blinkTab(tabId, count, interval) {
var tabbutton = dijit.byId(tabId).controlButton.domNode;
var interval = setInterval(function(){
if(count % 2 == 0) {
tabbutton .className += " dijitTabHover";
tabbutton .className += " dijitHover";
}
else {
//Not sure this is the best way to remove a class but I couldn't find
//a "clean" way to do it with dojo.
tabbutton .className = tabbutton .className.replace( /(?:^|\s)dijitTabHover(?!\S)/ , '');
tabbutton .className = tabbutton .className.replace( /(?:^|\s)dijitHover(?!\S)/ , '');
}
if(count == 0) {
tabbutton .className = tabbutton .className.replace( /(?:^|\s)dijitTabHover(?!\S)/ , '');
tabbutton .className = tabbutton .className.replace( /(?:^|\s)dijitHover(?!\S)/ , '');
clearInterval(interval);
}
count--;
}, interval);
}
//Now make the calls where desired
//Chat message Event
chat.on("message", function(e) {
//Message code is here...
blinkTab("tabChat", 10, 500);
});
//Question Event
questions.on("message", function(e) {
//Question code is here...
blinkTab("tabQuestions", 10, 500);
});
You might just want to change the "class" of the tab title span (or is it a div? don't remember). The easy way is to use firebug, check the element used for the tab title, identify it in the node hierarchy, then put an id on your tab like tabMsg or something, then you justy ned to dijit.byId to get the right tab, and then go to the title node and addClass/removeClass every seconds or 0.5s to make it "blink".
You might want to add a "blinking" property to your tab, so that while this is true you switch classes, and when you click on the tab you set it to false and disable the blinking.