I am trying to create a modal window with windowManager.open({...}) that will have a (probably long) list of items. Only way to ensure that it will display properly is to set fixed height to modal and make it's content scrollable.
Documentation on windowManager.open isn't really helping me here. I was able to find some examples describing scrollbars option:
editor.windowManager.open({
scrollbars: true,
height: 300,
...
});
But it is not working for me. If only someone could give me a hint on this, maybe I need to use some kind of Panel for my modal's body?
I will really appreciate if someone could update my Fiddle.
Hah, I've spent all of yesterday trying to figure this out but as soon I've posted my question I've found the answer myself.
I was trying to repaint the dialog after setting overflow: auto manually by calling win._bindings.repaint[0]() and it gave me an error:
Cannot read property 'autoScroll' of undefined
And it turned out that autoScroll is what I was looking for:
editor.windowManager.open({
autoScroll: true,
height: 300,
...
});
Related
I am using in js.cytoscape library and the diagram is generated statically for a demo.
Now I am facing an issue with the mouse scroll, which Zooms in and out so much.
Is there a way to control this? I have seen the same happens in the provided demos. But it is not acceptable. Any work around.
Appreciate the help.
Thank you
The property wheelSensitivity changes that fast scroll behaviour, when you give it a value between 0 and 1, so just put this in your code:
var cy = cytoscape({
container: yourContainer,
elements: yourElements,
style: yourStyle,
layout: yourLayout,
wheelSensitivity: 0.5
});
If you have more questions like this, consider looking at the documentation of cytoscape, where you can find the answer most of the time. If you can't find the solution, feel free to ask on stackoverflow :)
Another thing, please show us what you already tried via code. Thank you
Its a weird question but i hope i can get some suggestions or examples from you guys i wanna create a User info panel like google let me show you in image
now here is my picture with xtype: 'image', in it and i am using extjs 6
i want the same thing just like google here
help me with any suggestion thanks in advance:)
You can write tool-tip with target property.
Ext.create('Ext.tip.ToolTip', {
target: Ext.getCmp('image-1021').getEl(),
anchor: 'bottom',
width: 400,
height: 300,
layout: 'fit',
items: [{}]
});
for more information you can refer this link
hope this helps.
Just giving brief info the right-top side where image is shown, on its click show tooltip with top anchor.Check if you are able to add image/label/buttons inside tooltip as items.If this is not possible you will need to create XTemplate and add this xtemplate inside tooltip.
Any question further ?
I don't mean to be vague, but I'm not sure what is going on.
This code works:
this.J.button_update.click(function () {
self.J.dialog_hold.dialog({
resizable: false,
modal: true,
width: 305,
height: 360
});
});
It produces:
As you can see there is plenty of room on the right border. What you may not notice is that all my content is off centered by about 5px. To fix this I thought I would just decrease the jquery dialog width by 5px as such:
width: 300, // decreased by 5
However this breaks the dialog for some reason. It produces this:
How can I troubleshoot further?
A fiddle of the issue has been provided below:
Go to developer mode in firefox and inspect the element one by one for its width and other properties..It will help you in finding the problem..
It turns out that the file_input element is not being detected by the browser element inspector for Firefox. Not sure why. Because the opacity was set to 0 it could not be seen. The complicating factor is that it could not be inspected. Or more precisely only part of the element is inspectable. I found this by removing elements until the dialog became "unbroken". Then I turned the opacity up for this element to see that it was breaking the dialog.
This some what lengthy process could have been shortened if the DOM inspector would have detected the offending element.
I'm going to file this as a bug against the DOM inspector as it only highlights part of the file input even though it detects the other part of it. Very misleading.
First up, I know this question is probably asked several times, but everyone's layout is different!
I have a mapping application and with a left side tool bar. This tool bar has jquery tabs. I cant get a scroll bar on these tabs. even after overloading .ui-tabs-panel. I know just by adding a height:somepx here gives me scroll bars, but thats not what i want. I want the height to be always till all the way down. I have tried several things but nothing works :(
I suspect its because of my other layout properties which are there to keep the layout liquid (make map adjust to screen sizes and keep left side bar constant).
Here is the stripped down version in Jsbin:
http://jsbin.com/exeguw/edit#source
Can some one please help me get the vertical scroll bar?
Thanks!
If you set the tab div to the height of the #map div (adjusted for tab headers) after the tabs are created, then overflow will kick in and make the contents scrollable:
javascript:
function ResizeTabs() {
$("div.scroll-tab").height($("#map").height() - 80);
}
$(function() {
$(window).resize(ResizeTabs);
$('#tabs').tabs({
create: ResizeTabs
});
});
Updated jsBin.
EDIT: now handles window resizing as well!
Try this
http://jsbin.com/exeguw/9/edit#javascript,html,live
I need to display an image in a resizable dialog (so far all the specific image popup libraries I have tried do not fit my needs).
All I want to do is maintain the aspect ratio during resizing. Sounds easy, but it's not.
I thought something like this might work, but no dice:
var d = $("").dialog({title:title, width:400, height:400});
d.resizable( "option", "aspectRatio", true );
Any pointers greatly appreciated, tks
Due to the way it's hooked in, I find it easiest to just do the resizable portion yourself, like this:
$("div").dialog({
title:"Title",
width:400,
height:400,
resizable: false
}).parent().resizable({
handles: 'n,e,s,w,se,sw,ne,nw',
aspectRatio: true
});
You can view a demo here, you can also destroy and re-create it...but that's a bit wasteful, so just create it above, specify the max/min height/width in the resizable instead of the dialog if needed. This should work: .parent().resizable("option", "aspectRatio", true), but it doesn't due to the way the widgets hooked in, so the eaiest solution is to just create the resizable yourself with the options you want when you create the dialog.
Side note: you're using .parent() here because you wan the dialog container that contains the title bar and your content. It's created/wrapped like this when you create the dialog.