Develop Reference

How to add sticky header to bootstrap-table that has a dropdown filter as the title?

I am trying to use bootstrap-table and give it an "Excel feeling". With the option to quickly filter a column based on the values inside. But I can't seem to make it work with sticky headers, there is a bootstrap-table addon for the sticky header (data-sticky-header="true").
I tried to create something using bootstrap 5 dropdown and attach it to the title, and it works great, but when the sticky header is activated (scroll the head out of view so it kicks in), the filter and the dropdown stop working.
Here is the example, you can see that it works fine until you try to scroll down.
Maybe someone has a solution or option to use a custom sticky header that would work?
Edit:
Followed by T J answer to change the overflow, it fixed the problem where the dropdown wouldn't show on the sticky header.
There was a problem where the filter wouldn't apply, and I fixed it by changing:
const checkboxList = document
.querySelector("#departmentDropdownMenu")
.querySelectorAll("input");
to:
const dropdownUL = cb.parentElement.parentElement.parentElement;
const checkboxList = dropdownUL.querySelectorAll("input");
But now a problem that I am having is that when I scroll, this filter apply once but then if I click on the dropdown again it "reset" to how it was when it started (when I scrolled past it's entry point). It changes the filter but on view it appear to "reset" to that position every time. If something is checked there when I started scrolling it will appear checked everytime the dropdown opens again.
I made the updates to this example

Remove overflow: hidden; from .fix-sticky class
.fix-sticky {
position: fixed!important;
/* overflow: hidden; */
z-index: 100;
}

Highcharts: how to bring pop-up boxes above the stock-tools menu?

I have this jsfiddle code from where we can see how moving the mouse over the chart is creating pop-up boxes. The issue for me is the case when these pop-up boxes are shown above the stock-tools menu and it results like
So is there any way how can I bring the pop-up boxes before the stock-tools, so that I can avoid the case which I captured above?
I tried with changing the z-index property of some classes (which I detected dynamically), but was not able to fix it.

Enable outside property and set z-index for a tooltip container with a value greater than 10:
tooltip: {
outside: true
}
CSS:
.highcharts-tooltip-container {
z-index: 10 !important;
}
Live demo: https://jsfiddle.net/BlackLabel/3m2wue7b/
API Reference: https://api.highcharts.com/highstock/tooltip.outside

Bootstrip 4 tooltip position: auto right

I want my tooltip to be on the right of the elements on desktop, because it fits my design best. However this however raises an issue when working on a smaller screen. The bootstrap 3 documentation says it supports auto right placement, which should prefer the tooltip on the right and if that is impractical it will auto pick a side. I am using bootstrap 4 and I tried using that option, but it wont work.
Is there any way to achieve the same result in bootstrap 4?

If using 'right auto' doesn't work you could use a function to return the value based on screen size:
placement: function() {
return $(window).width() > 767 ? 'right' : 'auto';
}
This isn't a responsive solution as it doesn't update if the window size changes, but it should do for most cases. If you want fully responsive behavior you'll need re-initialize tooltips on size change.

Opening bootstrap select in bootstrap table issue

The Problem
I am using the bootstrap-table plugin and the bootstrap-select plugin, which both work very nice.
But I get an issue when I use the bootstrap-select inside a bootstrap-table.
If the select box of the last row opens, the table size changes instead of the selectbox going "over" the table area creating a scroll area which I do not like.
Like in the image below:
I have tried to "fix" this effect using the below javascript code, but to no avail. The code gets executed but the problem is still there. I do not see which css is responsible for this behaviour and any help is highly appreciated.
$('.table-responsive').on('show.bs.select', function () {
console.log("triggered show bs select");
$('.table-responsive').css( "overflow", "hidden" );
});
$('.table-responsive').on('hide.bs.select', function () {
console.log("triggered hide bs select");
$('.table-responsive').css( "overflow", "auto" );
})
Example
The behaviour can be seen in:
Jsfiddle:http://jsfiddle.net/e3nk137y/8612/
Edit
I have it working now but only with applying padding-bottom on the table and using the following js code:
$('.table-responsive').on('show.bs.select', function () {
$('.table-responsive').css( "overflow", "inherit" );
$('.bootstrap-table').css( "overflow", "inherit" );
$('.fixed-table-body').css( "overflow", "inherit" );
});
I leave the question open for now since this is not a "nice" fix in my oppinion, especially the added padding which is needed to "hide" the select box again.

You can add the option container: 'body'. This will place the drop-down outside the table and will prevent the issue. If there's a problem with body, just use any element that contains the table, which is large enough to contain the drop-down menu.
Jsfiddle

The class .fixed-table-body seems to be causing this. Removing overflow-x: auto; and overflow-x: auto; fixes your issue.

The class .table-responsive seems to be causing this. Removing overflow-x: auto; fixes your issue. You can find the style in bootstrap.css

toggling element with javascript is making the element appear too small until I resize the browser

edit
Since originally posting this question, I've gone down a couple more paths trying to solve the issue. It's still not solved, but now my questions are different. The original question is below, and then I'll add a section below that with updates.
original question
I'm working on a Rails 4 application and having some trouble with JavaScript and the Chartkick gem.
I have two JavaScript functions that make it so that a user can click an icon and an element will drop down below the icon/appear on the page, and the icon will switch from a right-pointing arrow to a down-pointing arrow. The code is this:
function ReverseDisplay(d)
{
if(document.getElementById(d).style.display == "none")
{
document.getElementById(d).style.display = "block";
}
else
{
document.getElementById(d).style.display = "none";
}
}
$(function() {
$('.toggle-icon').click(function() {
$(this).find('i').toggleClass('fa-arrow-circle-o-right fa-arrow-circle-o-down');
});
});
And the haml:
%a{href: "javascript:ReverseDisplay('toggle-stats#{item.id}')", class: 'toggle-icon'}
%i.fa.fa-arrow-circle-o-right
%div{id: "toggle-stats#{item.id}", style: "display: none;"}
= the items to be displayed
It works. However, I expect the items that drop down to take up the full width of the page, like so:
But instead, when I first click the toggle icon, they show up squished, like this:
If I then resize the browser just a tiny bit, the graph pops out to full-width, and it stays that way no matter what I do from there. I can't figure out how to get ahold of the generated mark-up, because this chart comes from Chartkick, as a gem. The generated html in the browser has this line:
<div dir="ltr" style="position: relative; width: 300px; height: 300px;">
Where the width: 300px is what's being changed to width: 1000px when I change the browser size. I don't have to change the browser size permanently or significantly. Once that width has changed to 1000px the first time it stays there - but the minute I refresh the page and click the icon to toggle the chart again, it's back to 300px. I don't know how to hook into this div, because it's generated by the gem and I don't know how to add a class to it. I've tried adding styling to a parent element that ensures all of that parent elements' children are width: 100%, but that doesn't do anything.
Anyway, I don't think that adding a class to it is the solution here. I just have no idea what is - I don't JavaScript incredibly well. I'm pretty much completely new to all front-end work as a whole. What's going on here, and how can I make these charts always be the full width of the page when they're toggled?
Notes: Am testing this in Chrome. I tested in Firefox and it does the same thing.
OK, I'm starting to wonder if this has something to do with the fact that I'm using a JavaScript function in order to capture dynamic item IDs - a page may have any number of these toggle-able charts, and so calling a jQuery function on each id seems impossible, because I don't know what ID is.
I removed the jQuery call, however, and the problem persists.
One of those times when rubber-ducking the Stack Overflow question box has not yet answered my question. So I guess I'll submit and hope for outside help here. :/
adjusted question
This question in the Github issues for Chartkick has lead me down a different path. The solution is not necessarily in attempting to restyle the charts at all. Instead, what I'm trying to do is trigger a resize event, because the chart automatically regenerates when the browser window is resized. This is both what's causing the problem and where the solution seems to lie.
My code:
.row
.col-sm-12
%h3.title-block.second-child
Stats by Video
.panel-groupd#faqList
- #claim.presenter.videos.each_with_index do |video, index|
.panel.panel-default
.panel-heading
%h4.panel-title
%a.chart{data: { toggle: "collapse", parent: "#faqList" }, href: "#video#{index}" }
= "'#{video.title}' at #{video.event.display_name} on #{display_date(video.recorded_at)}"
%div.panel-collapse.collapse{id: "#video#{index}"}
.panel-body
- if video.impressions.count > 0
%h4
Impressions by Hours (24 hours)
= line_chart video.impressions.group_by_day(:created_at, range: 1.day.ago...Time.now).count
...a couple more charts
:javascript
$(".chart").click(function() {
window.dispatchEvent(new Event('resize'));
});
So the intention here is that when I click the .panel-heading, this both drops down the .panel-body with the charts in it and resizes the window, which makes the charts resize correctly (or, rather, should).
It kind of works, in that, when I first click the .panel-heading trigger, it does not resize the charts, but when I click it again, the charts are resized perfectly for a split second... just before they become hidden from view again. :(
I've tried adding a time out to the javascript, like so:
:javascript
$(".chart").click(function() {
setTimeout(1000);
window.dispatchEvent(new Event('resize'));
});
But it doesn't appear to do anything at all.
So what I'm wondering here is how to get this resize event to work once the dropdown .panel-body is out so that the charts will resize appropriately on their own.
Here's a screen cast of the current problem, in case I didn't describe it clearly enough:
https://youtu.be/5quMGABoDs8

I don't know anything about Ruby or Chartkick, but in order to override that inline styling, you would have to use !importantin the css.
So, if you try that technique of giving all the children of the parent element width: 100% again, you might want to implement it something like this:
.importantRule { width: 100% !important; }
$( "parentElement > childElement" ).addClass('importantRule');
(First line goes in your CSS file, second line goes in JS)