I am working with DataTables JQuery and for each row I have dynamic text.
This datatable shows on Modal.
I am trying to use bootstrap popover but doesn't work right.Its look like overlay by the table.
Half of my popover not appearing.
fiddle link seems working but in my case (loading remote modal with dynamic datatable doesnt work
Table
<td class="noteTable">
<div class="show-popover" data-toggle="popover" title="{{$log->newStatusText}}">
{{substr(($log->newStatusText),0,50)}}
</div>
</td>
And Script is
<script type="text/javascript">
$('[data-toggle="popover"]').popover({
'trigger': 'hover',
'placement': 'left',
});
My datatable script
<script type="text/javascript">
$(document).ready(function() {
$('#showLogTable').dataTable( {
"order": [[ 4, "desc" ]],
"scrollY": 400,
"destroy": true,
"pagingType": "simple",
"scrollCollapse": true,
"dom": '<"top"f>t<"bottom"ip><"clear">'
} );
} );
</script>
Thanks for advance!
UPDATE:
my ugly solution is
fiddle expanding row to bottom (working localhost as expected but on fiddle doesn't look like working)
Update 2
When I set 'container': 'body' popover goes behind modal! Any idea how to bring front?
Here is the solution for modal
This will help for Modal users
$('[data-toggle="popover"]').popover({
'trigger': 'hover',
'placement': 'left',
'container': '.modal-body'
});
Set the container option to body for the popover.
$('[data-toggle="popover"]').popover({
'trigger': 'hover',
'placement': 'left',
'container': 'body'
});
Related
I simply use Tippy capability to have an input field included in the tooltip.
Everything works fine, except that it is impossible to write anything in the input field.
Is it possible to do it? How?
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/tippy.js#3/dist/tippy.all.min.js"></script>
<script>
tippy.setDefaults({
allowHTML: 1,
trigger: 'click',
hideOnClick : 'toggle'
})
function initAllValues() {
tippy('.enery', {
content: document.querySelector('#myTemplate')
})
}
</script>
</head>
<body onload="initAllValues()">
<span class="enery">Text</span>
<div id="myTemplate">
My HTML <strong style="color: pink;">tooltip</strong> content with an input field <input type="number" id="catch_value">
</div>
</body>
</html>
Solution as easier than thought:
One has to set the following option in tippy:
interactive: true option
Note: direct tippy support and discussions is available on their github, including answr to the present question: https://github.com/atomiks/tippyjs/issues/342#event-1935111700
Just do:
interactive: true
as in:
function initAllValues() {
tippy('.enery', {
content: document.querySelector('#myTemplate'),
interactive: true
})
}
or in:
tippy.setDefaults({
allowHTML: 1,
trigger: 'click',
hideOnClick : 'toggle',
interactive: true
})
Also have a look at Tippy's docs: https://atomiks.github.io/tippyjs/v6/all-props/#interactive and FAQ for problems using the interactive property: https://atomiks.github.io/tippyjs/v6/faq/#my-tooltip-appears-cut-off-or-is-not-showing-at-all
I have a grid of divs in rows and columns and a transition group as follows:
<div class="row" v-for="row in grid">
<div class="col-md-3" v-for="col in row">
<transition-group
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:leave="leave"
v-bind:css="false">
<div class="box" :key="col">{{col}}</div>
</transition-group>
</div>
</div>
The grid changes completely when a button is clicked (not shown in above html). The transitions are supposed to scale down the removed .box divs and then scale up the newly added .box divs.
It seems to be working fine. However, for some reason, some .box divs are not being animated at all (scale up or down) and they will just disappear (when removed) or appear at 100% size (when added).
Take a look at this gif to know what I mean:
I am assuming Vue is reusing these DOM elements so its not applying the transition methods on them?!
Here are the transition methods:
beforeEnter: function (el) {
el.style.display = 'none';
},
enter: function (el, done) {
setTimeout(() => {
el.style.display = 'block';
$(el).velocity({
scale: [1, 0.1],
}, {
duration: 2400,
complete: done
});
}, 2400);
},
afterEnter: function (el) {},
leave: function (el, done) {
$(el).velocity({
scale: [0.1, 1],
}, {
duration: 2400,
complete: done
});
},
I have created a pen here: https://codepen.io/anon/pen/WajaOE with the demo shown in the above gif.
(NOTE: The demo generates random data so if things appear to work fine, try refresh to get a bigger grid in one of the sections).
<div class="col-md-3" v-for="col in row">
<transition-group >
</transition-group>
</div>
I am assuming Vue is reusing these DOM elements
Yes, But the problem is:
When leave-cols count less then enter-cols, is means there are not enough transitionGroup Component, so some .box divs can not emit enter event just like first load.
I've taken the code from the example to try to make it work, but my link only links out to youtube.
I linked out to the scripts and styles to try to get it to work, but that didn't help. I'm completely new to this so your help is much appreciated.
<div class="example gc3">
<div class="html-code">
Open YouTube video<br>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
});
</script>
I have a widget on dojo, but it does not display the datagrid. If I make the example outside the widget works. I see the code by firebug, you can not mistake, however, I can see the div inspect and there is nothing inside. The Builder runs, but does not load the grid in div.
Widget.js
define([ "dojo/_base/declare",
"dojo/text!./FormularioQCI.html",
"icm/base/_BaseWidget",
"dojo/store/JsonRest",
"dojo/store/Memory",
"dojo/store/Cache",
"dojox/grid/DataGrid",
"dojo/data/ObjectStore"
],
function(declare, template, _BaseWidget, JsonRest, Memory, Cache, DataGrid, ObjectStore){
return declare("icm.custom.pgwidget.formularioQCI.FormularioQCIWidget", [_BaseWidget], {
templateString: template,
widgetsInTemplate: true,
constructor: function(){
alert("X");
myStore = dojo.store.Cache(dojo.store.JsonRest({target:"rest/formularioQCI/get"}), dojo.store.Memory());
grid = new dojox.grid.DataGrid({
store: dataStore = dojo.data.ObjectStore({objectStore: myStore}),
structure: [
{name:"State Name", field:"name", width: "200px"},
{name:"Abbreviation", field:"abbreviation", width: "200px", editable: true}
]
}, "target-node-id"); // make sure you have a target HTML element with this id
grid.startup();
alert("Y");
dojo.query("#save").onclick(function(){
alert("X");
dataStore.save();
});
var id = 0;
dojo.query("#add").onclick(function(){
dataStore.newItem({
name: "col2-" + id,
abbreviation: "col3-" + id
});
id++;
});
},
/**
* #private destroys this widget
*/
destroy: function() {
//Do any custom clean up here
this.inherited(arguments);
}
});});
Widget.html
<div style="width: 100%; height: 100%;">
<div id="target-node-id">
</div>
<button id="save">Save
</button>
<button id="add">Add Linha
</button>
</div>
you need to write you code in the postCreate function.
Simplest way would be to replace the constructor keyword with postCreate.
The reason being that the "target-node-id" will not be available until the postCreate function call.
postCreate: function(){
this.inherited(arguments);
// Rest of your code here.
alert("X");
...
}
The following code works fine.But when the drop-down list is displayed it should not override the button elements named get value and get displayed value below it..instead the buttons should movedown when the dropdown is displayed and after a particular item is selected the button shoud come to the original position.
<html >
<head>
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<script>dojoConfig = {parseOnLoad: true}</script>
<script src='dojo/dojo.js'></script>
<script>
require([
"dojo/store/Memory", "dijit/form/FilteringSelect", "dojo/domReady!"
], function(Memory, FilteringSelect){
var stateStore = new Memory({
data: [
{name:"Alabama", id:"AL"},
{name:"Alaska", id:"AK"},
{name:"American Samoa", id:"AS"},
{name:"Arizona", id:"AZ"},
{name:"Arkansas", id:"AR"},
{name:"Armed Forces Europe", id:"AE"},
{name:"Armed Forces Pacific", id:"AP"},
{name:"Armed Forces the Americas", id:"AA"},
{name:"California", id:"CA"},
{name:"Colorado", id:"CO"},
{name:"Connecticut", id:"CT"},
{name:"Delaware", id:"DE"}
]
});
var filteringSelect = new FilteringSelect({
id: "stateSelect",
name: "state",
value: "CA",
store: stateStore,
searchAttr: "name"
}, "stateSelect");
var filteringSelect = new FilteringSelect({
id: "stateSelect1",
name: "state",
value: "CA",
store: stateStore,
searchAttr: "name"
}, "stateSelect1");
});
</script>
</head>
<body class="claro">
<input id="stateSelect"><br/>
<br/>
<br/>
<input id="stateSelect1">
<input id="stateSelect">
<p>
<button onclick="alert(dijit.byId('stateSelect').get('value'))">Get value</button>
<button onclick="alert(dijit.byId('stateSelect').get('displayedValue'))">Get displayed value</button>
</p>
</body>
</html>
I'm not sure what you mean by "should not override the button elements" because it certainly should. The drop down menu is supposed to be an overlay, it's not part of the page. Whether or not you want it to be part of the page is different.
You cannot easily do this with the filtering select. The filtering select appends the div it uses to hold options, to the bottom of the page. You cannot show it in the normal flow of the page. You will have to create a custom widget that appends its options inside a container directly below the select input.
But I don't know what you are trying to solve by doing this. My advice would be to leave it as is unless you have a really good reason to change it. The drop down menu is a pretty well-ingrained component of GUIs, so changing the behavior of it is not recommended.
Edit:
If you want to limit the height of the drop-down. Set the "maxHeight" of the filteringSelect.
var filteringSelect = new FilteringSelect({
id: "stateSelect",
name: "state",
value: "CA",
store: stateStore,
searchAttr: "name",
maxHeight: 40
}, "stateSelect");
Here is a fiddle. http://jsfiddle.net/8sh24/