I have this following code in dojo which is using dojox/form/CheckedMultiSelect:
var checkedMultiSelect = new CheckedMultiSelect ({
id:"something",
dropDown: true,
multiple: true,
labelText:"something",
store: dataStore,
style : {width:"240px"} // this doesn't work
}, "placeholder");
How do I set a width to this widget?
I use dojo 1.9
Check out this fiddle:
http://jsfiddle.net/phusick/qrSWu/
stolen from this post:
Dojo CheckedMultiSelect text wrap and horizontal scrolling
You have to overwrite some css styles...
.narrow .dojoxCheckedMultiSelectWrapper {
width: 200px;
}
If I am not wrong, then this is what you want to add the following style:
.dojoxCheckedMultiSelectSelect{
width: 240px;
}
Related
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.
I'm using the jPlayer plugin along with jQuery UI's slider widget. Everything seems to be setup but I seem to be experiencing some trouble when it comes to dragging the volume up and down. Dragging either way makes the volume jump too far up/down. The functionality is controlled through the slide property, I'm just not sure how to get it to drag accordingly.
JSFiddle
Problem :
Since you have position: absolute for jp-volume-bar-knob, the ui-slider-horizontal bar lost its width (the horizontal bar over which the slider slides).
Option 1:
Instead of applying slider to jp-volume-bar-knob try applying it to jp-volume-bar it seems to be working fine then.
Here is the updated demo http://jsfiddle.net/dhirajbodicherla/9co0ac65/2/
However, the initial volume level and initial slider value have to be set.
Option 2:
You can set the following css and still apply slider to jp-volume-bar-knob
.ui-slider-horizontal{
height: 0;
border: transparent;
width: 100%;
}
Here is the demo http://jsfiddle.net/dhirajbodicherla/9co0ac65/3/
Update
Try something like this
In this the volume bar works fine.
Default value is replicated on the slider.
$(document).ready(function () {
var myPlayer = $("#jquery_jplayer_1"),
options = {
ready: function (event) {
if (event.jPlayer.status.noVolume) {
// if there is no volume add custom styling
}
// Setup the player with media.
$(this).jPlayer("setMedia", {
title: "Bubble",
m4a: "http://jplayer.org/audio/mp3/Miaow-07-Bubble.mp3",
oga: "http://jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
});
},
volumechange: function (event) {
if (event.jPlayer.options.muted) {
myControl.volume.slider("value", 0);
} else {
myControl.volume.slider("value", event.jPlayer.options.volume);
}
},
swfPath: "http://jplayer.org/latest/dist/jplayer",
supplied: "mp3, oga",
wmode: "window",
useStateClassSkin: true,
autoBlur: false,
smoothPlayBar: true,
keyEnabled: true,
remainingDuration: true,
toggleDuration: true
},
myControl = {
volume: $(".jp-volume-bar-knob")
};
// Instance jPlayer
myPlayer.jPlayer(options);
myControl.volume.slider({
animate: "fast",
max: 1,
range: "min",
step: 0.01,
value: $.jPlayer.prototype.options.volume,
slide: function (event, ui) {
myPlayer.jPlayer("option", "muted", false);
myPlayer.jPlayer("option", "volume", ui.value);
}
});
});
I adopted this from jplayer demo and modified a bit based on the question.
Here is the updated demo http://jsfiddle.net/dhirajbodicherla/9co0ac65/6/
update 2
Change the volume bar markup to something like this
<div class="jp-volume-bar"></div>
Instead of changing all the .jp-*'s css, change jquery-ui's css to something like this
.ui-slider-horizontal{
background: #444;
cursor: pointer;
display: inline-block;
position: relative;
height: 4px;
width: 100px;
}
.ui-slider-range{
background: #cc181e;
}
Here is the demo http://jsfiddle.net/dhirajbodicherla/9co0ac65/10/
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;
}
The previous version had a 'titleShow': false, setting, however it seems to have been removed for the new version.
I know I can hide it programmatically using jquery but I'd prefer to use a built in feature to remove it??
You can disable title helper -
$(".fancybox").fancybox({
helpers: {
title: null
}
});
Top disable the title;
$(".fancybox").fancybox({
helpers: {
title: false
}
});
I used this css to hide title:
#fancybox-title-float-wrap {
display: none;
}
In CSS file: give visibility:hidden in
fancybox-title-float-left,
fancybox-title-float-main,
fancybox-title-float-right,
If you just delete the title attribute from the the anchor tag there is not title shown. Doesn't that work for you?
I had to rip out the line of code that appends the title as I could find no way of doing it using the API..
c.appendTo("over"===b.type?a.inner:"outside"===b.type?a.wrap:a.outer)
in the .css file, change:
.fancybox-opened .fancybox-title {
visibility: visible;
}
to
.fancybox-opened .fancybox-title {
visibility: hidden;
}
Tested on 2.0.5.
title: null
I have checked it and it works for me.
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);