We Keep Coding

DHTMLX Scheduler timeline view - labels with longer text don't appear in tree mode

I have a question to which I can't find the answer for some time.
It's about DHTMLX scheduler timeline view in tree mode. The problem is that labels with longer text than the available space for the folder elements of the tree(these which have children) disappear, they are not shown in the first column of the timeline view. I can't understand why is this happening. Is there some kind of a setting on the scheduler, which I'm missing. It is important to note that styling of the scheduler has to be with the dhtmlxscheduler_material.css file or in other words material design.
Here is an image of the scheduler with the problem shown
I also provide a code sample which simulates the problem.
https://docs.dhtmlx.com/scheduler/snippet/9445edbf

This behavior can be fixed by the following style:
.dhx_scell_expand{
position:absolute!important;
}
Also in material skin, it requires some additional styling to make it look better, which may look like this fragment:
.dhx_scell_expand{
position:absolute!important;
}
.dhx_scell_name{
margin-left: 26px;
text-align: left !important;
}
Of cause, you can experiment with it to make appropriate for your project.
Also, in a case with long section names, you can change the default width of the section names column through the "dx" parameter:
scheduler.createTimelineView({
...
dx: 300, //200 by default
...
});
Here is an example with additional styling, and the resized names section :
http://snippet.dhtmlx.com/5/a3da39a40
Also, you can separate the section name using the </br> tag, change the height of the section through the "folder_dy" property, and align multiline text through CSS(line-height/ margin), like in the following example:
http://snippet.dhtmlx.com/5/87845739f

Positioning button inside leaflet layer control

I'm using the leaflet styled layer control plug in to customize my map control.
I'm trying to add a button to the top right corner of my controls that closes the controls (primarily for mobile use).
I found this question and it works, but now I'm wondering how I can position this button. I want it to be in the top right corner of the control.
When I position the class "leaflet-control-close" it works (I tested with "position: relative; float: right;" and it did float right but stayed at the bottom), but if I give it an absolute position at the top of the page it seems to be appear behind my overlays.
I want it to push down the overlays a little bit so that it doesn't overlap.
EDIT: here is a jsfiddle showing what's happening. It's a little convoluted because the styled layer control files don't have a CDN so I just pasted in the CSS and javascript. I made a note where I add the button in the original Javascript, and below that JS is the JS to create the map and overlays.
I know the button on a desktop is kind of annoying because when you close the control with it, it immediately pops back open because your mouse is hovering. In my actual code I've set the display to none if the screen width is larger than tablet size, because that's the only time I feel like I need the button.
I customized the styled layer control javascript in order to include the button:
L.Control.StyledLayerControl = L.Control.Layers.extend({
onAdd: function(map) {
this._initLayout();
this._update();
this._addButton();
map
.on('layeradd', this._onLayerChange, this)
.on('layerremove', this._onLayerChange, this);
return this._container;
},
_addButton: function () {
var elements = this._container.getElementsByClassName('leaflet-control-layers-list');
var button = L.DomUtil.create('button', 'layer-control-close', elements[0]);
button.innerText = 'Close control';
L.DomEvent.on(button, 'click', function(e){
L.DomEvent.stop(e);
this._collapse();
}, this);
}
)};

Bootstrap Tour targets and modals not displaying (Leaflet maps)

Demo
Codepen
PRESS FULL SCREEN ICON ON MAP IN CODEPEN TO START TOUR
Desired Outcome
The bootstrap tour element should appear over the top of everything, along with highlighting the element its targeting.
What I'm getting
Ignore the difference in red button compared to image above, content doesn't matter
Problem
When the user toggles the fullscreen button (using leaflet fullscreen plugin), it starts the tour.
The tour is activating fine, but the elements of the tour are not responding properly, my hunch is that it is struggling to compete against the fullscreen map for attention at the front as it were.
Currently, the popover isn't displaying, even when in the dev tools I put its z-index as high as it will go. The dark overlay also isn't displaying over the top of the fullscreen map.
Lastly the target is not being highlighted properly. When inspecting the target on other pages with the tour working, it is still the original element, but when inspecting element on this page, it's not the element, but a new bootstrap div placed over the top. No idea why it's not working in the same way.
What I've tried
Tour code
//Bootstrap tour
function takeTour() {
console.log("Taking tour");
("use strict");
// Instance the tour
var tour = new Tour({
name: "leafletTour",
storage: false,
steps: [
{
element: "#custom-control",
title: "One Stop Tour",
content: "There is only one stop in this tour",
placement: "right"
}
],
backdrop: true
});
tour.init();
tour.start(true);
}
My understanding is that bootstrap tour assigns the target elements new classes as they are selected, which are then set to z-index: 1101
I have been trying to brute force higher z-index's onto the bootstrap tour elements, but with no luck - no matter how high I set them, they aren't fighting to the top level.
I've also forced the map to be z-index: 100 !important, and still overrides to the top - despite in the dev tools still showing as z-index: 100 !important
Any ideas/advice would be great.

I have reviewed your code, its really strange but i have found one solution :
Just add class
.fade{
opacity:1 !important;
}
Here you can find working example.
https://codepen.io/anon/pen/MveMrL

jquery tooltip not trigger even the element has tooltip plugin associated with it.

I have an issue with jquery tooltip. Basically, the issue is: after several updates of the tooltip content, the tooltip is not shown again when I mouse hover the element when the tooltip was initially associated with.
To be more specific:
My tooltip is associated with an element <div class = "tooltipShow">
The content of the tooltip is updated every time by using:
$('.tooltipShow').tooltip("option", "content", newContent)
Every time after this step, I can see the content of tooltip changes by doing
console.log($('.tooltipShow').tooltip("option")).
The return is an object with newContent, position and etc.
However, after several updates, the tooltip simply just not show again when I mouse hover <div class = "tooltipShow"> although I can see that this element still has tooltip plugin associated with it and even the tooltip content is updated one. It seems like the tooltip is never triggered again since I cannot see any tooltip element is added when I mouse over <div class = "tooltipShow">
My jQuery version is "1.8.0"
I will be much appreciated if anyone can help me out~

mouseover on text html

In my javascript file there is,
var htm = '<div style="overflow:hidden;height:24px;width:150px;" onmouseover="tooltip(this)">' ;
function tooltip(sp)
{
sp.title = sp.innerHTML;
}
So on mouse over a text the tooltip is displayed.But the tool tip does not stay longer. meaning the position is not fixed.
Can the code be modified such that mouse over should be done on the text and the tool tip also........

If all you want is a "built-in" tooltip, there's no need at all to do it dynamically. Just code the HTML element with a "title" attribute containing the text you want. The browser will show the tooltip on mouseover. If you want something fancier, you should probably look at a jQuery add-on (or some other framework).

Here is a standards based tooltip that will serve you well.
<div title="This is your tooltip">Some Text</div>
If you then wish to add on top of this, you can use the title attribute to get the text you want to display as a tooltip, which is how various tooltip plugins work.