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
Related
I am working the (fantastic) jQuery DataTables plugin and have begun to use the 'Responsive' extension so that it responds well on varied devices etc.
It is working fine however it adds some buttons to allow each row to be expanded to show the columns which have been hidden.
However, this is actually really annoying since it shows all the columns I have deliberately not shown as well as not looking ideal (imho).
Does anybody know how to remove these buttons?
Cheers,
Jack
I did a bit more or an intensive search of the docs and found that these 'expanded rows' are refered to as child rows and can be disabled as follows.
Initially I simply included the
"responsive": true,
tag in my datatables. These child rows may be disabled with:
"responsive": {
"details": false
},
I thing you can override the CSS style of this button and hide it from user:
table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before {
display:none
}
Change also the padding of the cell:
table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child,
table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child {
padding-left: 10px; /* Instead of 30px */
}
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)
I am using Chosen library to enable easy filtering on a dropdown control and i am facing one issue now.
I am using bootstrap tab control to arrange the items in a form and if i place the Dropdown inside the inactive tab item width of Choosen dropdown is 0 (invisible at all ).
How can i fix this?
#Html.DropDownListFor(model => model.OriginalItem.AuthorId, (SelectList)ViewBag.LicensorList, "Select", new { #class = "chosen-single chosen-default" })
$('#OriginalItem_AuthorId').chosen({ no_results_text: "Oops, nothing found!" });
This is the way i am using chosen library
This is because the width is calculated by Chosen before the dropdown is visible.
There are at least two workarounds:
CSS workaround :
.chosen-container {
width: 100% !important; /* desired width */
}
JS workaround (on Chosen initialization) :
$(".chosen-select").chosen(
{
width: '100%' /* desired width */
});
Just use width in percentage within single quotes:
<select chosen width="'100%'" ... ></select>
This works also for modal windows in which the content is compiled without being visible (width=0).
A responsive chosen using this technique can be seen here: http://plnkr.co/edit/RMAe8c?p=preview
There is issue of Tabcontainer when we set "AutoPostBack=True" of TabContainer, then it sloves issue of shrinking dropdown width after changing tabpanel.
Please Mark it if it is workable
I"m making a script for a portfolio. when you click on one of the portfolio items a div will appear with the jquery onclick function like this:
$('#portfolioItem').click(function() {
$('#divThatWillApear').show();
This all works fine. I also downloaded a slider called glide.js. this slider also work fine.
But as soon as I combine my script and the slider togheter the slider is acting wierd.
I've created a jsfiddle : http://jsfiddle.net/skunheal/fzftX/2/
the slides dont scale to the full width of the slider. but when you rescale the window they do. when I remove the display none from my parent element (portfolioOverlay) it suddenly works all fine...
any one has an idea whats going wrong and how to fix it?
Hope to hear from anyone!
An easy fix would be to initialize the slider after clicking show, to fix this problem.
$('#show').click(function () {
$('#portfolioOverlay').show();
$('.slider').glide();
});
Demo Fiddle
Your .slider width is messing up as the width of the display:none; parent.
I "fixed" it by adding to your .slider
width: 100%;
to
width: 500px; // same as parent element, this means you are joining the width to the width of the parent however
Updated jsFiddle:
http://jsfiddle.net/cB3Pn/
As the portfolioItem is display:none on load it's size/position can not be calculated by your code. Removing the display:none CSS and adding the following to the bottom of your JavaScript will fix this as it will hide the portfolioItem once the JavaScript has run.
$('#portfolioOverlay').hide();
You could trigger the resize event yourself after showing the slider:
$('#show').click(function() {
$('#portfolioOverlay').show();
$(window).resize();
});
On the first click, it works as expected:
the class is changed
and the html content is changed from 'Show...' to 'Close...'
the content area is expanded with the slideDown effect,
Good so far.
On the second click, ...
the class changes
the html content is changed from 'Close...' to 'Show...'
The content area does NOT go away as expected.
On the third click, ...
the class is changed
the html content is changed
the already-shown content is re-shown with the slidedown effect.
So everything is working except for the 2nd click when the content is supposed to be hidden again.
Here's the jQuery:
-
$('.open_user_urls').live('click', function() {
$('#user_urls').slideDown('slow');
$(this).addClass('close_user_urls');
$(this).removeClass('open_user_urls');
$(this).html('Close Search History');
return false;
});
$('.close_user_urls').live('click', function() {
$('#user_urls').slideUp('slow');
$(this).addClass('open_user_urls');
$(this).removeClass('close_user_urls');
$(this).html('Show Search History');
return false;
});
Here's the HTML it's acting on:
<h3 class='open_user_urls'>Show Search History</h3>
<div id='user_urls'>
// an OL tag with content
</div>
And the only applicable CSS:
#user_urls { display: none; }
EDIT - I replaced my jquery code with functionally equivalent code supplied in an answer below, but the problem persists. So the cause must be elsewhere. I do recall this code working originally, but then it stopped. I'm stumped. Time to strip everything else out piece by piece...
EDIT 2 - Since the bug must be elsewhere, I'm accepting a code improvement for my jquery as the answer. Thanks.
Edit 3 - Found the source of the problem.
Inside the #user_urls div I have an series of OLs with the following css:
.url_list {float: left; width: 285px; list-style-position: outside; margin-left: 25px;}
Each OL contains a list of 20 urls and is meant to display in as many multiple columns as required to display all the URLs.
Removing the float: left; on these OL tags causes the problem to go away.
So having a float on the content contained in the DIV thats showing and hiding is causing it not not hide at all. Why would this happen?
EDIT 4: Adding a inside the #user_urls DIV allows the hiding action to work properly.
Perhaps something like this would be simpler?
$(".open_user_urls").toggle(
function () {
$(this).text("Close Search History").siblings(".user_urls").slideDown("slow");
},
function () {
$(this).text("Show Search History").siblings(".user_urls").slideUp("slow");
}
);
The toggle function is designed for precisely the scenario you're encountering.
To reiterate the problem and resolution to this question...
Inside the #user_urls DIV were a series of OL tags, each floated left. It was the float that was causing the problem.
Adding a <br style='clear: left;' /> inside the #user_urls DIV fixed the problem.
From what I've found, jQuery needs to have the height style set in order to slide it correctly. A work around I've used is to set the height before you slide it closed.
$('#user_urls').css('height', $('#user_urls').height() + 'px');
After you set it once, it should work correctly from then on. Check out this tutorial for a more detailed explanation.
Since this question was opened, jQuery have put in a fix for this themselves.
Updating to the latest version of jQuery solved the problem for us with no CSS changes. (jQuery 1.4.4 as of Dec 9th 2010)
Found via discussion on Google Groups in turn found from d12's answer. According to duscussion, in some jQuery 1.3x versions this bug affected several actions, slideUp, fadeOut, and toggle, if the element being hidden/slid up is a a non-floated parent containing floated children.
I think Conor's answer might put you on the right track. I might also suggest slideToggle and toggleClass:
http://docs.jquery.com/Attributes/toggleClass
http://docs.jquery.com/Effects/slideToggle
I could be as easy as:
$("h3.open_user_urls").click(function () {
next("div#user_urls").slideToggle();
});
I can't duplicate your bug. I used your exact code and I cannot replicate your issue.
This must be a script error from a different place in your JS code.
Thanks for this question. It really got me on my way figuring out the problem toggling an element with floated children.
Another resource that really helped and explains the behavior a bit can be found
on this Google group discussion.
Putting a non breaking space in your div is another solution similar to what The Reddest suggested that worked for me on a similar issue.