I have a lot of data in the tooltip of a highcharts bar chart. Each tooltip data has some 50-60 lines and the complete tooltip is not being able to be displayed in the graph container. In order to view all of it, i want a scroll bar in tooltip. Is it possible?
Here is an example of the code.
Working jsFiddle example
Here is the tooltip code. I don't know where to add the scroll bar code.
tooltip: {
useHTML: true,
pointFormatter: function() {
var string = '';
Highcharts.each(toolTip[this.series.data.indexOf(this)], function(p) {
string += p + '</a><br>'
})
return "Incident<br>" + string + "<br />";
}
}
Just add the following CSS:
.highcharts-tooltip>span {
max-height:100px;
overflow-y: auto;
}
However,there would be a problem regarding the auto-closing of the tooltips. You might have to tweak the events of the highchart.
.highcharts-tooltip {
pointer-events: auto !important;
}
.highcharts-tooltip > span {
max-height: 200px;
overflow-y: auto;
}
set overflow-y and pointer-events can scroll On PC. But on mobile, click tooltip will change.
Related
I tried the following code for making my page responsive, but still the elements are moving out. Can anyone lease have a look at it and help me out?
#media only screen and (max-width: 500px) {
.top-bar-section ul {
margin-top: 15px;
}
}
#media only screen and (min-width: 300px) and (max-width: 500px) {
.widget-area {
display: none;
}
.stat {
margin-bottom: 30px;
}
.clients-style-2 .slides li .client-logo {
margin-bottom: 5px;
}
#clients .slides li .client-logo {
margin-bottom: 5px;
}
#icategories li {
margin-bottom: 10px;
}
}
Ref url: http://7drives.in/dsq/index.html
You have a YouTube video in an iframe, and that iframe has a hard coded width of 500px, so this will be a problem on narrower viewports.
CSS Tricks has one solution to this, jQuery below. There are other solutions for responsive iframes, I like that this is a simple drop fix which doesn't require any changes to your HTML, and also that it resizes both the width and the height of your video.
Hope this helps!
// By Chris Coyier & tweaked by Mathias Bynens
$(function() {
// Find all YouTube videos
var $allVideos = $("iframe[src^='http://www.youtube.com']"),
// The element that is fluid width
$fluidEl = $("body");
// Figure out and save aspect ratio for each video
$allVideos.each(function() {
$(this)
.data('aspectRatio', this.height / this.width)
// and remove the hard coded width/height
.removeAttr('height')
.removeAttr('width');
});
// When the window is resized
// (You'll probably want to debounce this)
$(window).resize(function() {
var newWidth = $fluidEl.width();
// Resize all videos according to their own aspect ratio
$allVideos.each(function() {
var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.data('aspectRatio'));
});
// Kick off one resize to fix all videos on page load
}).resize();
});
I am using ionic modal in ionic project. the modal is appearing on page clearly, but when I am trying to enter any text into any textbox the keyboard is appearing on page.
Once the keyboard appeared, I am unable to see the html of modal and also unable to scroll modal.
kindly refer the screenshot.
Thank you.
Waited for long time and did't get any answer, So I have written some css to fix this issue, This is working in my project as well as dominik
also tried this. see the comment by him
#media(min-width: 680px){
.modal{ top: 0; height: 70%; }
body.keyboard-open.modal{ height: 90%; }
body.keyboard-open.modal.scroll{ overflow-y: scroll !important; }
}
.overflow-scroll.keyboard-up:not(.keyboard-up-confirm){
overflow-y: scroll;
height: 100% !important;
top: 0;
}
Had to come up with this fix. it worked for me, so give it a try: Put the code in your app.run
NOTE: this issue is normally caused when you set android:windowSoftInputMode="adjustPan" in your AndroidManifest.xml
Make sure jquery is included in your app.
window.addEventListener('native.keyboardshow', keyboardShowHandler);
window.addEventListener('native.keyboardhide', keyboardHideHandler);
function keyboardShowHandler(e){
setTimeout(function() {
var originalHeight = window.innerHeight-30;
var newHeight = originalHeight - e.keyboardHeight;
$('ion-modal-view ion-content').css("height", newHeight);
}, 0);
}
function keyboardHideHandler(e){
setTimeout(function() {
var newHeight = '100%';
$('ion-modal-view ion-content').css("height", newHeight);
}, 0);
}
I have a jqplot for a line graph but my legend is becoming too huge. I want to implement a scrollable functionality for the legend. I tried to do the following :
table.jqplot-table-legend {
display: block;
height: 350px;
overflow-y: scroll;
}
in the css file and in my ctp file, i tried
legend: {
show: true,
location: 'ne',
rendererOptions: {numberColumns: 2}
}
as was mentioned in previous posts but none seem to work for me.
Please help.
If I apply your css before or after the chart has rendered, it works fine with one change. I had to increase it's z-index so the scroll bar is on top and clickable. Here's an example of applying it after the chart has rendered:
plot1 = jQuery.jqplot ('chart1', data, opts);
var legendTable = $($('.jqplot-table-legend')[0]);
legendTable.css('display','block');
legendTable.css('z-index',100);
legendTable.css('height','100px');
legendTable.css('overflow-y','scroll');
See fiddle here.
I have a grid, with checkcolumn. It's dataIndex is, for example, 'checked'.
I want to disable or hide checkboxes for some rows, where another value, 'can_be_checked' for example, is false/empty.
Renderer is already defined in checkcolumn, messing with it breaks generation of checkbox.
How can I do it?
You may hide the checkbox just inside the renderer, for example:
column.renderer = function(val, m, rec) {
if (rec.get('can_be_checked') == 'FALSE'))
return '';
else
return (new Ext.ux.CheckColumn()).renderer(val);
};
I was looking for a solution to this and came across this question, but no workable solution anywhere to show a disabled checkbox instead of NO checkbox as covered in the other answer. It was kind of involved but here's what I did (for 4.1.0):
I found that the extjs\examples\ux\css\CheckHeader.css file that
is used by Ext.ux.CheckColumn does not have a disabled class, so I
had to modify it to be more like the standard checkbox styling
contained in ext-all.css (which does include a disabled checkbox
class).
I had to extend Ext.ux.CheckColumn to prevent events being
fired from disabled checkboxes.
Finally, I had to provide my own renderer to apply the disabled
class according to my logic.
The code is as follows.
Modified CheckHeader.css:
.x-grid-cell-checkcolumn .x-grid-cell-inner {
padding-top: 4px;
padding-bottom: 2px;
line-height: 14px;
}
.x-grid-with-row-lines .x-grid-cell-checkcolumn .x-grid-cell-inner {
padding-top: 3px;
}
.x-grid-checkheader {
width: 13px;
height: 13px;
background-image: url('../images/checkbox.gif');
background-repeat: no-repeat;
background-color: transparent;
overflow: hidden;
padding: 0;
border: 0;
display: block;
margin: auto;
}
.x-grid-checkheader-checked {
background-position: 0 -13px;
}
.x-grid-checkheader-disabled {
background-position: -39px 0;
}
.x-grid-checkheader-checked-disabled {
background-position: -39px -13px;
}
.x-grid-checkheader-editor .x-form-cb-wrap {
text-align: center;
}
The background-image url above points to this image which normally ships with extjs 4.1.0 at: extjs\resources\themes\images\default\form\checkbox.gif.
The extended Ext.ux.CheckColumn class so that events will not get fired from disabled checkcolumns:
Ext.define('MyApp.ux.DisableCheckColumn', {
extend: 'Ext.ux.CheckColumn',
alias: 'widget.disablecheckcolumn',
/**
* Only process events for checkboxes that do not have a "disabled" class
*/
processEvent: function(type, view, cell, recordIndex, cellIndex, e) {
var enabled = Ext.query('[class*=disabled]', cell).length == 0,
me = this;
if (enabled) {
me.callParent(arguments);
}
},
});
Implementation with custom renderer to apply disabled class according to my own logic:
column = {
xtype: 'disablecheckcolumn',
text: myText,
dataIndex: myDataIndex,
renderer: function(value, meta, record) {
var cssPrefix = Ext.baseCSSPrefix,
cls = [cssPrefix + 'grid-checkheader'],
disabled = // logic to disable checkbox e.g.: !can_be_checked
if (value && disabled) {
cls.push(cssPrefix + 'grid-checkheader-checked-disabled');
} else if (value) {
cls.push(cssPrefix + 'grid-checkheader-checked');
} else if (disabled) {
cls.push(cssPrefix + 'grid-checkheader-disabled');
}
return '<div class="' + cls.join(' ') + '"> </div>';
}
};
Using extjs 5 it is easier to return defaultRenderer in renderer method for target checkboxes and '' for others.
renderer: function (value, metaData, record) {
return (record.isLeaf()) ? '' : this.defaultRenderer(value, metaData);
}
Such won't render checkbox itself but all the events (i.e. checkchange, itemclick, etc) will be remained. If you don't want them either, you may disable them in beforesmth event, for example
onBeforeCheckRequestsChange: function(me, rowIndex, checked, eOpts) {
var row = me.getView().getRow(rowIndex),
record = me.getView().getRecord(row);
return !record.isLeaf();
},
I found the solution to the problem of the checkbox not clickable when usign Aniketos code, you have to make sure that in your code of the column you specify the xtype: 'checkcolumn, that will do the trick
I also ran into this problem and to take it a step further I needed to have a tooltip show over the checkbox. Here's the solution I came up with that seems to be the least invasive on the existing checkcolumn widget...
renderer: function (value, metaData, record) {
// Add a tooltip to the cell
metaData.tdAttr = (record.get("someColumn") === "") ? 'data-qtip="A tip here"' : 'data-qtip="Alternate tip here"';
if (record.get("someColumn") === "") {
metaData.tdClass += " " + this.disabledCls;
}
// Using the built in defaultRenderer of the checkcolumn
return this.defaultRenderer(value, metaData);
}
I have a gridpanel and 5 columns in that. Problem is that column headers and row data are not aligned. I believe its just the problem in my project only as when i create an example with the same code then everything works fine. Check the following image:
Can anyone suggest what could be the problem?
Please apply below css as per the requirements.
1) For Customizing specific ExtJS GridPanel, apply below css:
#testgrid_id table caption,table th,table td {
padding : 0px !important;
margin : 0px !important;
}
Note: Here, above "#testgrid_id" is the id of specific Grid Panel.
2) For applying to all ExtJS GridPanels, apply below css :
table caption,table th,table td {
padding : 0px !important;
margin : 0px !important;
}
Thanks!
Actually I found out that most times, the grid is under some panel.
Hence the actual problem is with this class
.x-grid-cell-inner
{
overflow: hidden;
padding: 2px 6px 3px;
**text-overflow: ellipsis;
white-space:nowrap;**
}
This is because the width of the or
<td class=" x-grid-cell x-grid-cell-gridcolumn-1099 "><div class="x-grid-cell-inner "></div></td>
Does not get set. Making the Div overflowing the columns and screwing up the whole grid alignment.
Probably because i nested the GridPanel into another panel OR a Row expander in my case or under some modal dialogue or whatever it may be causing the settings not to take place.
A Quick Fix.
**white-space:normal;**
Will do the trick and squeeze the contents into the column. However it does not apply the ellipses so it is a bit annoying if the content is long, its not hidden with "..."
I will try to find another solution that does the trick, but guess what, time to deploy this to the server!
I hope this helps someone
I have this bug using GXT 2.2.5 (Chrome Version 26.0.1410.43m).
Solution:
#media screen and (-webkit-min-device-pixel-ratio:0) {
.x-grid3-row td.x-grid3-cell
{
box-sizing: border-box;
}
}
Note, if your CSS contains something like:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
remote it.
I had exactly the same problem.
For me the problem was, was that I was setting HTML ids on my column headers. ExtJS then appends funny things to the ID, like titleEl, textEl, triggerEL.
Eg:
<div id="myPackageGridId1-titleEl" class="x-column-header-inner">
This must somehow screw up the column listener.
Solution : use class instead.
In my case (GXT 2.2.1) I fixed the problem by subclassing GridView, overriding getColumnStyle, and setting adj to 0:
import com.extjs.gxt.ui.client.GXT;
import com.extjs.gxt.ui.client.Style;
import com.extjs.gxt.ui.client.widget.grid.GridView;
public class GridViewBugFix extends GridView {
private boolean fixHeaderDisplacement = true;
public GridViewBugFix() {
super();
}
#Override
protected String getColumnStyle(int colIndex, boolean isHeader) {
String style = !isHeader ? cm.getColumnStyle(colIndex) : "";
if (style == null) {
style = "";
}
int adj = GXT.isWebKit ? 2 : 0;
if (fixHeaderDisplacement) adj = 0;
style += "width:" + (getColumnWidth(colIndex) + adj) + "px;";
if (cm.isHidden(colIndex)) {
style += "display:none;";
}
Style.HorizontalAlignment align = cm.getColumnAlignment(colIndex);
if (align != null) {
style += "text-align:" + align.name() + ";";
}
return style;
}
}