How to allow fixed height in this dropdown menu? (Column Car)
I have been fiddling endlessly to fix the height issue. I want a fixed height dropdown menu max 300px. I have used AutoRowSize height feature and other height features within the handsontable site, but none seem to have worked.
I have run out of ideas. Any suggestions or alternatives I can try?
I am using Handsontable in Handsontable feature (Found Here).
Fiddle http://jsfiddle.net/72dgoLva/3/
columns: [
{
type: 'handsontable',
handsontable: {
colHeaders: ['Marque', 'Country', 'Parent company'],
autoColumnSize: true,
data: manufacturerData,
getValue: function() {
var selection = this.getSelectedLast();
// Get always manufacture name of clicked row
return this.getSourceDataAtRow(selection[0]).name;
},
}
},
{type: 'numeric'}
]
.handsontableEditor .ht_master {
height: 300px;
overflow-y: auto !important;
width: calc(100% + 2px);
}
.handsontableEditor .ht_clone_top {
transform: none !important;
}
... seems to do the job. Updated fiddle.
I had to use !important to override inline styles placed by HoT on elements, on the fly. To limit the chances of this affecting other instances, prefix selectors with a specific identifier for this instance.
Related
I have a Kendo listbox with a toolbar that allows sorting (up/down) and delete of a list item. When my listbox has enough items that extends it beyond the view of a mobile device, scrolling down causes the toolbar to scroll off screen. Because of this, if a user wants to move the bottom item of the listbox up, they have to scroll down, select the item, then scroll back up to access the toolbar actions, which makes for poor user experience. How can make the toolbar scroll along with list, or even just duplicate the toolbar at the bottom of the list?
Here is my widget definition:
$("#myMenus").kendoListBox({
selectable: "multiple",
toolbar: {
scrollable: true,
tools: [ "moveUp", "moveDown", "remove" ]
},
reorder: function(e) {
e.preventDefault();
var UID = $(e.items[0]).attr("data-uid");
var dataSource = e.sender.dataSource;
var dataItem = e.dataItems[0]
var index = dataSource.indexOf(dataItem) + e.offset;
dataSource.remove(dataItem);
dataSource.insert(index, dataItem);
e.sender.wrapper.find("[data-uid='"+UID+"']").addClass("k-state-selected");
},
});
I was able to fix the location of the toolbar using CSS. This is needed if your listBox is going to use a non-fixed height, as in my case, I needed to use "height:100%" so the size of the listBox would equal the content. You'll need to play around with the width and margin-left values to suit your situation.
<style>
.k-listbox {
width: 275px;
height: 100%;
}
.k-listbox-toolbar {
top:10;
position:fixed;
width:auto;
z-index: 1;
margin-left: 42px !important;
}
</style>
I'm using jQuery Masonry to develop a responsive grid of photos. I'm using a simple CSS proportional grid, and everything works fine (other than the fact that floats don't work vertically). The moment I add masonry this layout breaks.
$(document).ready(function() {
// select container
var $work = $(".work");
// set columns based on window width
var columns = 3,
setColumns = function() { columns = $(window).width() > 768 ? 3 : 2; };
$work.imagesLoaded(function() {
$work.masonry({
itemSelector: '.project',
columnWidth: function(containerWidth) {
return containerWidth / columns;
}
});
$(window).on('resize', function() {
// set columns now that the browser width is different.
setColumns();
$work.masonry('reload');
}).resize();
});
});
A jsfiddle demonstrating the issue can be found here.
Above the 768px breakpoint, things work (albeit with lots of flickering), but below the break point what should be two columns only fits into one.
Fixes I've tried:
Setting columnWidth to 1 fixes it in Safari and Firefox, but not Chrome.
Setting the width of one of the columns to 47.5% instead of 49% (which accounts for one 2% margin), but then my grid doesn't line up visually.
I suspect it's something to do with widths and margins being ever so slightly over, but I've checked my code thoroughly and the numbers should add up to a nice even 100% width. It's only when Masonry comes in that it breaks.
Thoughts? Any help would be greatly appreciated.
Set the margins to 0 and the masonry should fit it all together. Here is a demo:
http://jsfiddle.net/uMgwm/1
/* basic grid structure */
.half, .third, .two-third, .quarter {
float: left;
margin: 0;
}
.two-third + .third, .third:nth-child(3n+0), .quarter:nth-child(4n+0) {
margin: 0 0 0 0;
}
.half:nth-child(2n+0), .third:nth-child(3n+0), .quarter:nth-child(3n+0) {
margin-right: 0;
}
I am returning data via ajax to populate a jquery dialog. The ajax is basically an html table with a variable amount of rows.
I'd like the dialog to expand to show the rows, up to a certain vertical size (350px), at which point it should show a vertical scrollbar.
So, this seems to work fine - the dialog resizes correctly depending on the number of rows. But, I never get the vertical scrollbar - so if I have 20 rows, then I only get to see the last 9.
How do I force the vertical scrollbar if the height would have been more than 350px?
$.ajax({
type: 'POST',
url: 'myurl',
data: postdata,
dataType: 'json',
success: function (result) {
if (result.success && result.data) {
var $dialog = $('<div></div>').html(result.data).dialog({
autoOpen: false,
title: 'History',
modal: true,
height: Math.min((result.rows * 25) + 150, 350),
width: 800
});
$dialog.dialog('open');
}
event.preventDefault();
}
});
You should add css property overflow:auto for content div.
$("<div></div>").css({height:"350px", overflow:"auto"});
If you need ONLY vertical scroll overflow-y:auto and overflow-x:hidden
use css max-height: 350px; and overflow:auto; .. should be fine
I know this is kind of old but none of these worked for me. Here is what is working as of jQuery UI 1.10.
$("#helptext").dialog({
title: 'Blog Help',
autoOpen: false,
width: '90%',
height: ($(window).height() - 200),
modal: true
});
Adjust Height and width as you like. I have allot of text in my dialog and didn't want to scroll the whole page.
I didn't want to give a fixed px height so I found a solution giving the model the following css rules.
.modal {
display: inline-block !important;
max-height: 90%;
overflow: auto;/* Or scroll, depending on your needs*/}
I hope it works for you.
For me worked:
.jconfirm-holder {
overflow-y: auto;
}
My problem is that when the chart drawing area of is smaller than a highchart tooltip, a part of the tooltip is hidden where it overflows the chart drawing area.
I want the tooltip to be visible all the time, no matter the size of the chart drawing area.
No CSS setting helped and no higher z-index setting helped either.
Here is my example... http://twitpic.com/9omgg5
Any help will be mostly apreciated.
Thank you.
This css helped me:
.highcharts-container { overflow: visible !important; }
OK, sorry for the delay. I could not find a better solution, but I found a workaround.
Here is what I did and what I suggest everyone to try:
Set the tooltip.useHTML property to true (now you can have more control with html and CSS). Like this:
tooltip: {
useHTML: true
}
Unset all the default tooltip peoperties that may have something to do with the default tooltip functionalities. Here is what I did...
tooltip: {
shared: false,
borderRadius: 0,
borderWidth: 0,
shadow: false,
enabled: true,
backgroundColor: 'none'
}
Make sure that your chart container's css property "overflow" is set to visible. Also make sure that all DOM elements (div, section, etc....) that hold your chart container also have the css "overflow" property set to "visible". In this way you will make sure that your tooltip will be visibile at all times as it overflows his parent and his other "ancestors" (Is this a correct term? :)).
Customize your tooltip formatter as you wish, using standard CSS styling. Here is what I did:
tooltip.formatter: {
< div class ="tooltipContainer"> Tooltip content here < /div >
}
This is how it all looks like:
tooltip: {
tooltip.formatter: {
< div class ="tooltipContainer"> Tooltip content here < /div >
},
useHTML: true,
shared: false,
borderRadius: 0,
borderWidth: 0,
shadow: false,
enabled: true,
backgroundColor: 'none'
}
If you have a better solution, please post.
A modern approach (Highcharts 6.1.1 and newer) is to simply use tooltip.outside (API):
Whether to allow the tooltip to render outside the chart's SVG element box. By default (false), the tooltip is rendered within the chart's SVG element, which results in the tooltip being aligned inside the chart area. For small charts, this may result in clipping or overlapping. When true, a separate SVG element is created and overlaid on the page, allowing the tooltip to be aligned inside the page itself.
Quite simply this means setting this one value to true, for example:
Highcharts.chart('container', {
// Your options...
tooltip: {
outside: true
}
});
See this JSFiddle demonstration of how setting this value to true fixes space/clipping issues.
Adding simply this CSS worked in my case (minicharts in table cells):
.highcharts-container svg {
overflow: visible !important;
}
The tooltip option useHtml was not required:
tooltip: {
useHTML: false
}
Works on both IE8/9 & FF33.1 (FF was causing trouble).
I recently got the same problem, but with bootstrap container ! (bs3)
None of those solutions worked but I found by my own.
Its due to bootstrap _normalizer properties
svg:not(:root) {
overflow: hidden !important;
}
So add both :
.highcharts-container, svg:not(:root) {
overflow: visible !important;
}
I know the question is old but I just wanted to share my solution, it's based on the other two answers but I think that you obtain a better-looking result with this code:
Tooltip options:
tooltip: {
useHTML: true,
shared: false,
borderRadius: 0,
borderWidth: 0,
shadow: false,
enabled: true,
backgroundColor: 'none',
formatter: function() {
return '<span style="border-color:'+this.point.color+'">' + this.point.name + '</span>';
}
}
CSS:
.highcharts-container {
overflow: visible !important;
}
.highcharts-tooltip span>span {
background-color:rgba(255,255,255,0.85);
border:1px solid;
padding: 2px 10px;
border-radius: 2px;
}
#divContainerId .highcharts-container{
z-index: 10 !important; /*If you have problems with the label hiding behind some other div or chart play with z-index*/
}
None of the solutions worked for me. When the tooltip was bigger than the chart it simply didn't show.
Eventually we realized that Highcharts actually hides the tooltip in the class highcharts-tooltip-box, so the solution is to set it to inherit which the class default:
.highcharts-tooltip-box {
visibility: inherit !important;
}
After that overflow still need to be set to visible:
.highcharts-container,
svg:not(:root),
.chart-container {
overflow: visible !important;
}
And make sure to set the z-index higher in the container if you're having any problems.
I would just like to add an example and prove that .highcharts-tooltip-box
doesn't have to be set for overflow to work.
/* .highcharts-tooltip-box {
visibility: inherit !important;
} */
.highcharts-container,
svg:not(:root),
.chart-container {
overflow: visible !important;
}
Demo:
https://jsfiddle.net/BlackLabel/3fubr1av/
I have a programmatically generated dijit.form.Select. Unlike most other widgets, the Selects do not offer a resize method like
dijit.resize({w: width, h: height});
I have not found a standardized way of setting the width of a select. This is quite bad because the autosizing makes Dialogs "explode" on long select values.
Is there a standard way to resize a select I have missed? Or do I have mess with the markup of the select the hard way?
Thanks!
This can be achieved with CSS by setting the width of the inner label like this:
.tundra .dijitSelect .dijitButtonText {
text-align: left;
}
.tundra .dijitSelectLabel {
width: 120px;
overflow: hidden;
}
Why wouldn't you simply do this by setting the widget's style?
http://jsfiddle.net/QEjYD/1/
Unfortunately, due to how the widget is written, this doesn't work if you hook up the width in a CSS class, or if you set the width style after the widget has been created.
Give style to constructor:
var mySelect = new Select({
id: 'mystatus',
name: 'mystatus',
style: {width: '150px'},
required : false,
store: os,
searchAttr: 'label',
}, "mystatus");
I would use
dojo.marginBox(selectWidget.domNode, {w: width, h:height})
try this
.dijitSelect .dijitButtonNode {
width: 16px !important;
}
dom-style.set(dojo.query('.dijitSelect')[0], 'width', with);