I have a nasty problem with JSTree JQuery Plug in and Css.
Due to the fact my web application has its css (that I cannot change) over the JStree's css, now the tree view has strange spaces beetween nodes as shown in the screen shot that I have attached (please look at red circle) and these spaces shoud not be here like the original plug-in is.
Could someone give me a Css solution for that? Thank you in advance.
screen-shot:
You can do this by creating a new CSS class with margins set to 0 and attaching it to your jsTree nodes when initializing jsTree. Do it by passing a li_attr to the tree config like this:
var data = [
{ "id": "root2", ..., "li_attr": { "class": "smaller-margins" } }
]
See demo - JS Fiddle
Related
The problem is that the leaflet map inside the vue3 App loads perfectly and looks great. Also, when you click on a location with two icons in the same position, they open perfectly, but when you click on the same place again, the icons disappear and the "spider" remains visible (see picture).
spider remains
The methods in the Vue3 App are:
methods:{
setupMarkers(){
this.markers.clearLayers();
this.cursesData.forEach(cursa =>this.ficaMarkers(cursa));
this.map.addLayer(this.markers);
},
setupLeafletMap(){
this.map=L.map("mapContainer").setView(this.center,6);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",{
attribution:'OpenStreetMap',
}).addTo(this.map);
this.markers= L.markerClusterGroup({
//spiderfyOnMaxZoom: true,
});
},
ficaMarkers(cursa){
this.markers.addLayer(L.marker([cursa.coordenades[0],cursa.coordenades[1]],{title:cursa.nom})
.bindPopup(cursa.distancies)
)
},
},
If someone could help me, I would be very grateful.
Thanks.
It is a similar issue as in Uncaught TypeError: this._map is null (Vue.js 3, Leaflet) :
What seems to be the culprit is the proxying of this.map by Vue, which seems to interfere with Leaflet events (un)binding. It looks like Vue 3 now automatically performs deep proxying, whereas Vue 2 was shallow.
In your case, the same thing happens for this.markers (which is the Leaflet MarkerClusterGroup).
A solution consists in "unwrapping" / un-proxying the map and the mcg whenever you use them, e.g. with Vue3's toRaw:
toRaw(this.map).addLayer(toRaw(this.markers));
Then we retrieve the normal MCG behaviour, i.e. if you click on the cluster while it is already spiderfied, nothing happens (whereas initially the Markers were collapsing, but the spider legs were remaining indefinitely)
Fixed CodeSandbox: https://codesandbox.io/s/markers-hide-spiders-stay-forked-l2ruqh?file=/src/App.vue
The browser version is Chrome 87.0.4280.88
Here is how I accidentally detected this bug:
There are two independent divs on the page and both are position: fixed;
One of them has a hover effect with which its mix-blend-mode is changed.
The other one has glassmorphism style on it with backdrop-filter: blur(...px);
The filter works only when the other element on the page is set to mix-blend-mode: normal; otherwise it looks like as if it was not supported.
I am going to quit using that hover effect for now anyway but if there is a trick then it would be nice to let the world know about it.
Came across this bug as well (Chrome 90).
Quick Fix:
Add any backdrop-filter rule to the same element that has the mix-blend-mode rule applied.
Example:
.blend {
mix-blend-mode: difference;
backdrop-filter: opacity(1); /* fixes the chrome-bug */
}
The previous solution also worked for me (Chrome 93). Although I've had to wrap my element inside another and apply the mix-blend-mode to it to make it work like so:
.wrapper {
mix-blend-mode: multiply;
}
.blend {
backdrop-filter: opacity(1);
}
Save me a lot of hours. Thanks a bunch!
in one of my scene I have
<div id='MenuList'></div>
then I add list to it like this:
$('#MainListTitles').sfList({
data : [ 'AAA', 'BBBB', 'CCC']
});
How can I customize colors and height of each list item ?? I tried in css like this:
#MenuList.sf-ui-list {height: 333px; text-align: right; background-color:#ffffff} - works
#MenuList.sf-ui-list-item {background-color:#000000} - not working
First of all, "#MenuList.sf-ui-list-item" would never work, because you don't have the same element with id "MenuList" and class "sf-ui-list-item". This is basic css. Correct usage would be "#MenuList .sf-ui-list-item".
On the other hand, Samsung does a very lousy job with it's SmartTV SDK. It's so bad that it looks like they don't even want people to develop apps for it.
According to the API doc, you should indeed style class "sf-ui-list-item", but if you run your project with "Debug Samsung Smart TV App using Web Inspector" you can see that they use class "sf-ui-list-blured".
So, logical step would be to style:
#MenuList .sf-ui-list-blured { ... }
I would recommend that you maybe create your own styles and pass them as 3 parameters in ".sfList" command (classes: focusCssClass, blurCssClass and selectCssClass as stated in API doc).
I need a option to hide the header from a dojox.grid.DataGrid grid.
Didn't find anything.
I'm grateful for any info!
I use in dojo 1.6 (and probably works since dojo 1.3)
#myGrid .dojoxGridHeader { display:none; }
You can use CSS:
.dojoxGrid-header { display:none; }
This solution is taken from:
http://dojotoolkit.org/reference-guide/dojox/grid/DataGrid.html#hiding-the-headers-of-a-grid
u can connect at the postrender of the data grid. then find the headerGrid element created
then put style display to none.
//workaround the grid calls postrender after
//the component is at the dom.
//so then i can change the style to reset the header to invisible
dojo.connect(grid,"postrender",function(){
var headerGrid =this.domNode.firstElementChild;
headerGrid.style.display="none";
});
I would recommend switching to using the new and improved dgrid instead of datagrid, it is a lot better!
The setting for hiding headers is the attribute 'showHeader' which is a boolean value.
Check out this dgrid tutorial that talks you through defining grid structures including 'showHeader'.
I want to create a node such as paragraph, h1, h2 etc inside a tiny mce editor. Could not find any reference in documentation. :(
I have tried following code. It works perfect in FF but not in IE. Kindly help.
tinyMCE.activeEditor.selection.setNode(tinyMCE.activeEditor.dom.create('p', {id : 'paraId'},'new paragrapg created'));
Thanks
You should create the new element on the iframes document. Also, try to use different html tags to check if tiny has a problem inserting p-tags.
with(document.getElementById("iframe_id").contentWindow){
var new_elem=document.createElement("span");
new_elem.id='paraId';
tinyMCE.activeEditor.selection.setNode(new_elem);
}