I a tried in Chrome and FF.
See the following fiddle: http://jsfiddle.net/RY6F5/1/
'width' is not read up by the dialog() instance.
Same issue with 'height'. However 'color' is read. Any ideas/
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information.</p>
</div>
#dialog {
color: red;
width: 100px;
}
$("#dialog").dialog({
title: 'Information',
"buttons": [{
id: 'ok',
text: "Ok",
click: function () {
$(this).dialog("close");
}
}]
});
Just add the width to the js, see code below.
http://jsfiddle.net/RY6F5/1/
$("#dialog").dialog({
title: 'Information',
width:100,
"buttons": [{
id: 'ok',
text: "Ok",
click: function () {
$(this).dialog("close");
}
}]
});
Or with CSS:
http://jsfiddle.net/RY6F5/6/
Well I have an answer. It can be done by adding the width: parameter but fetching the width from the CSS of the id:
$("#dialog").dialog({
width: parseInt($('#dialog').css('width')), // Convert to integer to remove px
title: 'Information',
"buttons": [{
id: 'ok',
text: "Ok",
click: function () {
$(this).dialog("close");
}
}]
});
Related
I want to remove this triangle from panel, it comes while showing tooltip using extjs3.
CODE SNIPPET
var tooltipHide = new Ext.ToolTip({
anchor: 'bottom',
target: 'summaryButton',
anchorOffset: 0, // center the anchor on the tooltip
width: 300,
mouseOffset: [0, 25],
autoHide: false,
closable: false,
autoScroll: true,
html: '<div style="overflow:hidden;height:480px;width:300px;">' +
mycaseSummaryData + '</div>',
});
I am calling tooltip on mouseover event using tooltipHide.show().
You can do using css, In css you just need to set background-size: 0px;.
like below example:
<style>
.x-custom-tooltip .x-tip-anchor{
background-size: 0px;
}
</style>
In this FIDDLE, I have created a demo using your code and put some modification. I hope this will help/guide you to achieve your requirement.
CODE SNIPPET
Ext.onReady(function () {
new Ext.Panel({
title: 'Example of tooltip in ExtJS 3.4',
renderTo: Ext.getBody(),
padding: 10,
items: [{
xtype: 'button',
text: 'Summary Button',
listeners: {
afterrender: function (btn) {
btn.tooltipHide = new Ext.ToolTip({
anchor: 'bottom',
cls: 'x-custom-tooltip',
target: btn.getEl(),
anchorOffset: 0, // center the anchor on the tooltip
width: 300,
autoHide: false,
autoScroll: true,
html: '<span style="color: green;">This tooltip using showBy method and css....<span>',
});
btn.el.on('mouseover', function (e) {
this.tooltipHide.showBy(this.getEl(), 'tl-tr');
}, btn);
btn.el.on('mouseout', function (e) {
this.tooltipHide.hide();
}, btn);
}
}
}, {
xtype: 'tbspacer',
height: 20
}, {
xtype: 'button',
text: 'Summary Button 2',
listeners: {
afterrender: function (btn) {
btn.tooltipHide = new Ext.ToolTip({
target: btn.getEl(),
anchorOffset: 0, // center the anchor on the tooltip
width: 300,
mouseOffset: [0, 25],
autoHide: false,
closable: false,
autoScroll: true,
html: '<span style="color: red;">This tooltip show by without css and removed anchor.<span>',
});
btn.el.on('mouseover', function (e) {
this.tooltipHide.show();
}, btn);
btn.el.on('mouseout', function (e) {
this.tooltipHide.hide();
}, btn);
}
}
}]
});
});
When displaying a long noData message on High Chart, the text is not wrapping and is going out of screen/chart.
DEMO: http://jsfiddle.net/9xLyo7xj/
lang:{noData:'this is a really long sentence that is supposed to wrap around the window but somehow it is not - I would like it to wrap for easier reading'}
HTML
<button id="add">Add data</button>
<button id="remove">Remove data</button>
<button id="showCustom">Show custom message manually</button>
JS
$(function() {
var chart,
btnRemove = $('#remove'),
btnAdd = $('#add'),
btnShow = $('#showCustom');
btnAdd.click(function() {
chart.series[0].addPoint(Math.floor(Math.random() * 10 + 1)); // Return random integer between 1 and 10.
});
btnRemove.click(function() {
if (chart.series[0].points[0]) {
chart.series[0].points[0].remove();
}
});
btnShow.click(function() {
if (!chart.hasData()) {
chart.hideNoData();
chart.showNoData("Your custom error message");
}
});
$('#container').highcharts({
title: {
text: 'No data in line chart - with custom options'
},
series: [{
type: 'line',
name: 'Random data',
data: []
}],
lang: {
noData: "this is a really long sentence that is supposed to wrap around the window but somehow it is not - I would like it to wrap for easier reading"
},
noData: {
style: {
fontWeight: 'bold',
fontSize: '15px',
color: '#303030',
width: 400px
}
}
});
chart = $('#container').highcharts();
});
Following is my JS:
ShowHoverServerImageModalWindow: function () {
$("#divSettings").dialog({
width: 200,
height: 200,
modal: false,
title: "Server Image",
autoOpen: false,
closeOnEscape: true,
draggable: false,
resizeable: false,
/*position: "my position!!", */
buttons: [
{
text: "Close",
click: function () { $(this).dialog("close"); }
},
]
});
//Show the dialog
$("#divSettings").dialog('open');
},
I want the modal to be opened where my curser is at
How can i do that?
source: http://jqueryui.com/demos/dialog/ and http://docs.jquery.com/Tutorials:Mouse_Position
$("#divSettings").dialog({
... //your previous code
position: [e.pageX, e.pageY]
});
Easily found on google.
or just before you trigger the pop-up:
EDIT: now include the trigger.
$(document).click(function (e) {
$("#divSettings").dialog('option', 'position', [e.pageX, e.pageY]);
$("#divSettings").dialog('open');
});
When I click on the link 'alert' then the message will only popup once, which is correct. Strangely if I click on the link 'dialog' and then on the link 'alert' then the message is popping up twice consecutively, which is incorrect.
How can I fix this so that the message will only be displayed once?
HTML
<p id="test">alert</p>
dialog
jQuery
$(function() {
$("p#test a").click(function() {
alert('alert');
});
}
function showDialog(){
$("<div class='popupDialog'>Loading...</div>").dialog({
closeOnEscape: true,
height: 'auto',
modal: true,
title: 'About Ricky',
width: 'auto'
}).bind('dialogclose', function() {
jdialog.dialog('destroy');
}
You can try this script.
<script type="text/javascript">
$(document).ready(function () {
$("p#test a").click(function () {
alert('alert');
});
});
function showDialog1() {
$("<div class='popupDialog'>Loading...</div>").dialog()({
closeOnEscape: true,
height: 'auto',
modal: true,
title: 'About Ricky',
width: 'auto'
}).bind('dialogclose', function () {
$(this).dialog('destroy');
});
}
<script>
I need to change the value of the input buttons created in the jQuery UI dialog modal to present them in the language of the user.
I don't see how to do it.
var $dialog = $('<div><div style="padding:10px;text-align:left">'
+'New name'
+'</div>'
+'<div style="padding:0 10px 10px 10px;text-align:left;">'
+'<input id="dialogInput" style="width:370px" type="text"/>'
+'</div></div>')
.dialog({
modal: true,
title: 'title',
width: 400,
buttons: {
**'Ok'**: function() {
$(this).dialog('close');
return true;
},
**'Cancel'**: function() {
$(this).dialog('close');
return true;
}
}
});
Thanks!
Found a solution
var $dialog = $('<div><div style="padding:10px;text-align:left">'
+'New name'
+'</div>'
+'<div style="padding:0 10px 10px 10px;text-align:left;">'
+'<input id="dialogInput" style="width:370px" type="text"/>'
+'</div></div>')
.dialog({
modal: true,
title: 'title',
width: 400,
buttons: {
**'Ok'**: function() {
$(this).dialog('close');
return true;
},
**'Cancel'**: function() {
$(this).dialog('close');
return true;
}
}
});
// i was missing the parent() traversing needed since the form is embedded in the dialog popup
$dialog.parent().find('button:contains("Ok")').text('New Ok text');
$dialog.parent().find('button:contains("Cancel")').text('New cancel text');