I have an issue regarding a kendo dialog window including an upload.
When I upload multiple elements the list gets longer and longer and at some point gets bigger than my browserwindow and runs out of bounds at the bottom of the screen.
The insert button then is below the bottom bound of the browser but the browser doesn't allow me to scroll (firefox + chrome).
How can I limit my window to the browser screen and not exceed it?
#(Html.Kendo().Dialog()
.Name("ImageBrowser")
.Content( Html.Partial("ImageBrowserContent").ToString())
.MinWidth(400)
.MinHeight(800)
.MaxHeight(1000)
.MaxWidth(800)
.Modal(true)
.Visible(false)
)
#(Html.Kendo().Upload()
.Name("imageUpload")
.Messages(mess => mess.Select("Upload"))
.Async(a => a
.Save("Upload", "Image")
.Remove("RemoveUpload", "Image")
.AutoUpload(true)
)
)
I have provided a dojo here for you which hopefully is what you are after.
https://dojo.telerik.com/eqaZibIL
It uses the javascript version but you can just apply the function I have created to the dialog initial event. like so:
#Html.Kendo().Dialog().Events(e => e.InitOpen("dialog_resize"))
(This is some code I have modified for handling kendoWindow's so could be optimized more I think)
function dialog_resize() {
//THIS GETS THE POPUP DIALOG
var popUpDialog = $('#dialog').data("kendoDialog");
//THIS GETS THE CONTENT AREA FOR THE ENTIRE DIALOG
var contentArea = $(".k-widget.k-window.k-dialog");
//THIS GETS THE ACTUAL CONTENT AREA OF THE DIALOG IE.WHAT YOU WANT DISPLAYED
var innerForm = $("#dialog");
var windowHeight = $(window).innerHeight();
var windowWidth = $(window).innerWidth();
//CALCULATE THE WIDTH OF THE DIALOG AND SET IT TO 80%
//OF SCREEN REALESTATE TO STRECH OUT.
//NOT REQUIRED IF YOU ARE SETTING THE WIDTH MANUALLY.
contentArea.width(windowWidth * 0.8)
//CENTER THE DIALOG ON THE SCREEN.
popUpDialog.center();
//GET 97% OF THE AVAILABLE DIALOG CONTENT AREA TO SHOW Y-SCROLL BAR
var fixedHeight = (contentArea.height() * 0.97);
var fixedWidth = contentArea.width() * 0.965;
//SET THE HEIGHT, WIDTH AND SCROLL BAR OF THE CONTENT AREA
//SHOWING BLUE BORDER TO SHOW THE ITEM IS POSITIONING CORRECTLY IN DIALOG
innerForm.height(fixedHeight).width(fixedWidth).css({
maxHeight: fixedHeight + 'px !important',
maxWidth: fixedWidth + 'px !important',
overflowY: 'scroll',
overflowX: 'hidden',
border: '1px solid blue'
});
}
Hopefully you can follow what is going off here.
As long as you have set the maxHeight for the dialog on initialization all this seems to work correctly. I have applied a blue border to the content area just for demo purposes so you can see it in action.
Related
I would like to have a customized Dialog styling, having another background color and a rounded border, as it looks nicer than the gray rectangle that comes by default.
This is partially possible, by styling the Contentpane of the Dialog. The problem is, that the underlying Dialog Style is still there, in which the contentpane is shown. And it seems the Dialog UDID itself cannot be changed, nor can the "Dialog" style be overwritten in the designer nor by code.
Form hi = new Form();
hi.getUnselectedStyle().setBgColor(0xffffff);
Button but = new Button("open dialog");
but.addActionListener(e -> {
Dialog d = new Dialog(BoxLayout.y());
d.setUIID("Container"); // this line has no effect, the outside dialog component is still visible
Style s = d.getContentPane().getUnselectedStyle();
s.setBorder(RoundRectBorder.create());
s.setBgColor(0x00ff00);
s.setBgTransparency(255);
s.setMargin(5, 5, 5, 5); // adding some margin between contentpane and Dailog container, to be more obvious
d.setDisposeWhenPointerOutOfBounds(true);
// title
Label title = new Label();
title.setText("Confirmation");
d.add(title);
// body field with spanlabel info text
SpanLabel bodyLabel = new SpanLabel("Body Text");
d.add(bodyLabel);
// delete button
Button okButton = new Button("Ok");
okButton.addActionListener(e2 -> {
d.dispose();
});
// exit button
Button exitButton = new Button("Cancel");
exitButton.addActionListener(e3 -> {
d.dispose();
});
d.add(GridLayout.encloseIn(2, okButton, exitButton));
d.show();
});
hi.add(but);
hi.show();
In above image, the outermost dark gray is the tinted area outside the dialog. The green is the content pane with the intended rounded border. the light grey in between comes from the Dialog style that I would like to get rid off.
Can this be done?
Short answer: setDialogUIID("Container");
However dialogs are a bit problematic to customize via code, I would strongly recommend styling them via the designer/css as we just didn't design them for hand styling and so you're relying on internal implementation details that might break.
When you invoke getContentPane() on the Dialog you're styling the content pane of the Dialog. Not the Dialog itself so the dialog styling still has the non-transparent background. You can use getDialogStyle() to style the Dialog itself. I'm not sure how well that will work.
What is the workaround to create 3 buttons with the same design but different texts (short text, medium length text, long text):
a) do I need 3 different images as a background ? What if i don’t know the length of the text ?
b) or I can use a single image and shrink/stretch it horizontally/vertically somehow when a text needs more/less space to fit in?
I hope i don’t need hundreds of images for each button :)
I’m just a beginner. What is the best practice ?
Here is how I create a responsive button and text:
buttonSprite2 = game.add.sprite(352, 76,'button');
buttonSprite2.position.set(200, 0);
buttonSprite2.inputEnabled = true;
buttonSprite2.events.onInputDown.add(listener2, this);
var style = { font: "32px Arial", fill: "#ffffff", wordWrap: true, align: "center", backgroundImage:'button'};
buttonText2 = game.add.text(0, 0, "stop text", style);
buttonText2.wordWrapWidth = game.world.width - 400;
// trying to center the text within the button
buttonText2.position.set(buttonSprite2.x + 100, buttonSprite2.y+15);
// trying to make the button responsive
if(buttonText2.width < game.world.width - 400){
buttonSprite2.width = buttonText2.width + 200;
}
else{
buttonSprite2.width = game.world.width - 300;
buttonSprite2.height = buttonText2.height + 30;
}
You need to load(in preload function) image only once. But you need to add(in create function) 3 images for 3 buttons.
For changing size of this button images according to text size. First you add image then add text. Now, after adding text, check for height or width of that text object and change size of the button image according to the height and width of text.
You may define seperate function to do this. So, you can get rid of redundant code if you have too many buttons.
Using Vaadin Flow Java API I would like to emulate a Vaadin 8 Window feature: particularly I need to emulate Caption behaviour.
I mean a fixed top "Title" not scrollable as the real content of the Dialog. Anyone can tell me some Example I could learn from ?
Thanks in advance
This is the workaround I found.
public MainView() {
Button button = new Button("Click me",
event -> {
Dialog dialog = new Dialog();
HorizontalLayout horizontalLayout = new HorizontalLayout();
VerticalLayout verticalLayout = new VerticalLayout();
Div headerDiv = new Div();
Div bodyDiv = new Div();
bodyDiv.getElement().getStyle().set("overflow", "auto");
bodyDiv.getElement().getStyle().set("max-height", "420px"); // !!!
dialog.add(headerDiv, bodyDiv);
headerDiv.add(horizontalLayout);
bodyDiv.add(verticalLayout);
horizontalLayout.add(new Label("Hi there !"));
for (int i = 1; i <= 20; i++) {
verticalLayout.add(new TextField("TextField_" + i));
}
dialog.open();
});
add(button);
}
The trouble is that I have to fix max-height size to avoid scrolling of all the contained components. So I cannot take advantage from the auto-size behaviour of the Dialog Container. Also tried using setFlexGrow, but I did not reach the solution.
Any Hint ?
In Vaadin 10+ there is no component called Window, but there is component called Dialog. It does not have Title like Window, but otherwise it has similar baseline. I.e. it is popup. Based on your question you have found already that.
Dialog itself is component container, which means you can add components there. I would just create e.g two Divs (the simplest of the layout components in Vaadin 10). I would style the first one to have fixed height and place the Title there. And then I would apply component.getElement().getStyle().set("overflow", "auto") to the other one, which is the actual content body. The mentioned style will enable the scrollable feature. You could potentially use VerticalLayout / HorizontalLayout instead of Div as well depending what you need.
See also: https://vaadin.com/docs/v10/flow/migration/5-components.html
In Dynamics CRM, how do you set the height of an iframe programmatically? The following function doesn't do anything, the iframe always comes up the same size. Even when you go to iframe properties and change the row numbers there, it still doesn't cause any changes in size.
function doOnLoad(sender, args) {
setIframeHeight();
}
function setIframeHeight() {
//lowest control in iframe
var element = $('btnInsert');
//the following line gets called, and what's displayed is 25
alert(window.parent.parent.frames[0].document.getElementById('IFRAME_TransactionProduct_RA_d').parentNode.height);
//the following line doesn't do anything
window.parent.parent.frames[0].document.getElementById('IFRAME_TransactionProduct_RA_d').parentNode.height = 5000000;
}
you may try this in iframe code:
//set div(show iframe) height = iframe body height * 1.2 window.parent.parent.frames[0].document.getElementById('IFRAME_ApprovalProcess_d').style["height"] = ($(body * 1.2)) + "px";
//but it may get some issue if the contenter in the form not load,so that window.parent.parent.frames[0].document.getElementById('IFRAME_ApprovalProcess_d') this can be undifined.
To get the height of a element you can do like you have but to set you have use style, like that:
parentNode.style.height = "100px";
I'm using DOJO's ContentPane module. I have a div element in one of the panes and I need to give it a certain height - 100 pixels less than the height of the ContentPane so that the div changes its height dynamically when you change the ContentPane size by dragging the splitters. I'm new to Dojo and would be happy if somebody could help me with this.
Thanks.
I think the best solution is via nested BorderContainers with properly set splitters, because that way dijit/layout will take care of resizing and you won't need to write any JavaScript code and your layout will be based solely on CSS.
It's kinda cumbersome to explain, so I created a working example for you at jsFiddle: http://jsfiddle.net/phusick/Ayg8F/ + a diagram:
NB: Do not forget to set height: 100% for html, body and the top BorderContainer.
The drawback of this solution is you will have to replace plain divs with ContentPanes. If you do not want to or can't you can use dojo/aspect and connect to BorderContainer or ContentPane resize method and resize your divs manually whenever the size changes:
require([
"dojo/ready",
"dojo/aspect",
"dijit/registry",
"dijit/layout/ContentPane",
"dijit/layout/BorderContainer"
], function(
ready,
aspect,
registry
) {
ready(function() {
var bc = registry.byId("borderContainer1");
aspect.after(bc, "resize", function() {
// calculate and set <div> size here
console.log("resize divs");
});
});
});