dijit/Dialog sets height on small window sizes - javascript

I have a dijit/Dialog that displays normally at browser window sizes >1102px, but at sizes smaller than that it behaves abnormally. I've figured out that the reason for this is that the JS is adding fixed heights and smaller browser widths (as well as some additional absolute positioning on children nodes). Can someone explain why this exists or how to prevent it from setting those heights/absolute positionings (preferrably without just having to use !important styling everywhere). Or, am I misreading and there is another reason that is happening?
I was able to make a plunker showing that this happens. If you load it when the plunker widget is <1105px you will see a fixed height when you look in dev tools, but if you load it when the plunker is >1105px you will not see a fixed height.
https://plnkr.co/edit/JCY0qRzXPIwNIAUgVOFM?p=preview
require (['dojo/parser', 'dojo/domReady', 'dijit/Dialog'],
function (parser, ready, Dialog) {
ready(function () {
var dialog = new Dialog({title: "Random Title", style: 'width: 990px;'});
dialog.set("content", "hello");
dialog.show();
parser.parse();
});
return {};
});
Note: You have to reload (stop then run) the plunker to reload the dialog at the new browser width. Just changing the browser size while the dialog is open will not cause the fixed height to show up/disappear

To work around this problème you can use the dialog css property to fix the width size as blow snippet :
.dijitLayoutContainer {
width: 990px !important;
}
// set some spacing from parent
.dijitDialogTitleBar,.dijitDialogPaneContent {
width: 980px !important;
}
above a working snippet
require (['dojo/parser', 'dojo/domReady', 'dijit/Dialog'],
function (parser, ready, Dialog) {
ready(function () {
var dialog = new Dialog({title: "Random Title", style: 'width: 990px;'});
dialog.set("content", "hello");
dialog.show();
parser.parse();
});
return {};
});
.dijitLayoutContainer {
width: 990px !important;
}
/*to make spacing right nd left */
.dijitDialogTitleBar,.dijitDialogPaneContent {
width: 980px !important;
}
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.11.3/dojo/dojo.js"></script>
<body class="claro">
</body>

Documentation says:
A dialog by default sizes itself according to its content, just like a plain <div>. If the contents are too large for the screen, then Dialog will automatically add a scrollbar.
Therefore, you usually shouldn’t need to set an explicit size for a dialog. If you do want to, then you need to add width/height to a div inside the dialog, or set a size on the .dijitDialogPaneContent div:
Your example sets width property on Dialog, how to set it inside is shown in this example

Related

Show the button at the table bottom even when the window is very small

I have a table sorter html page, the sample is here.
$('table').tablesorter({
theme: 'blue',
widgets: ['zebra', 'scroller'],
widgetOptions: {
scroller_height: 400
}
});
How can I make the bottom button visible even when the windows height is very small (say, can only show one or two rows)? Ideally scroller_height can be some type like $(window).height()/2 and it can automatically update when the window is resized.
The expected is that even when the window is small, the bottom button appears in the screen without scroll action.
If you want to make the scroller window dynamically adjust its height, there are two demos on the main wiki page under Widgets > Scroller.
http://jsfiddle.net/Mottie/txLp4xuk/2/
http://jsfiddle.net/Mottie/abkNM/8037/
Essentially, all you need to do is adjust the outer scroll window height
$('.tablesorter-scroller-table').css({
height: '',
'max-height': height + 'px'
});
Here is the demo you shared updated, and has a minimum height set to 100px.
I'd say that there are a few ways to achieve what you want, and one easy way is to:
create a function that checks the visibility of your table versus the viewport;
Code below:
function checkVisible() {
var bottom_of_table = $("#mytable").offset().top + $("#mytable").outerHeight();
var bottom_of_screen = $(window).scrollTop() + $(window).height();
if(bottom_of_screen > bottom_of_table){
$("#buttons-container").removeClass('bottom-fixed');
}
else {
$("#buttons-container").addClass('bottom-fixed');
}
}
If it exceeds the viewport, add a CSS class to your buttons container that fixes it to the bottom of the screen. Otherwise, remove this class and display the button container normally, at the bottom of the table.
You'd want to run this function-check on load and on window resize, as follows:
$(document).ready(function() {
checkVisible();
$(window).on('resize', checkVisible);
});
I've updated your fiddle: http://jsfiddle.net/12nt19vg/12/show/
Try resizing the window and let me know if this is the behavior you're looking for.
EDIT: Incorporating your additional spec in the comments, I've added an outer div to your buttons container and modified your CSS to visually create the effect that I think you're looking for.
Please take a look at this fiddle: http://jsfiddle.net/12nt19vg/27/show/

How can I trigger CSS layout recalculation after Javascript DOM updates?

I often find that if I create or reparent DOM nodes in javascript, the CSS engine doesn't recalculate the sizes of the parent containers. This happens in Firefox and Chrome.
For example, the body might stay the same size while new content overflows the bottom. If I resize the window the body grows, but it doesn't "lock in" to its correct size until the window is sized to be at least as big as the body should be.
Is there a way to trigger a full layout recomputation in Javascript?
I can able to trigger CSS Engine via:
document.body.style.zoom = 1.0000001;
setTimeout(function(){document.body.style.zoom = 1;},50); //allow some time to flush the css buffer.
For every time after resizing the window use the following:
$(window).resize(function() {
if(this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger('resizeEnd');
}, 500);
});
$(window).bind('resizeEnd', function() {
document.body.style.zoom = 1.0000001;
setTimeout(function(){document.body.style.zoom = 1;},50);
});
You can trigger a repaint from JavaScript by setting a CSS style to an innocuous value, e.g.
document.body.style.zIndex = 1;
Yes. I tend to put a random className on the <html> element, using:
document.documentElement.className = 'reflow_' + (new Date()).getTime();
which creates:
<html class="reflow_1483757400611">
Tried and tested on everything from Android Browser 4 to Smart TV's via camposat.tv
The browser does recompute the geometry of all elements after DOM manipulation. One likely reason you might see an element "stuck" at a certain height even after its content has changed is this CSS rule:
body { height: 100% };
It tells the browser, make the body element as large in height as the viewport regardless of its content.
Try changing it to:
body { min-height: 100% };
This will tell the browser to make body at least as large in height as the viewport or larger if there is more content.

How do I get a div to change the max-height upon window resize?

code: http://jsfiddle.net/MDnrk/7/
for those too lazy to click the link:
$j(function(){
// need to fix some things that CSS doesn't seem to be able to fix (esp cross browser)
fix_drawer_height()
$j(window).resize(function() {
fix_drawer_height()
});
})
function fix_drawer_height(){
var new_height = document.body.offsetHeight - $j(".redline_info_scrollable").offset().top;
$j(".redline_info_scrollable").css({
'max-height': new_height + 'px;'
});
}
now, in my app, fix_drawer_height() gets called on DOM ready, but it doesn't seem to be called in teh JS fiddle.. so I'm not sure if that is the correct medium to show this problem.
Still not sure what would couse the window resize listener to not set the max-height appropriately. =\
The goal is to have the scrollable div always stretch to the height of the window.
Normally I'd just use height: 100% in the CSS, but that isn't really cross browser, and won't work with how the div is positioned in my actual app.
thanks!
You can use this:
function fix_drawer_height() {
$('.redline_info_scrollable').height($(document).height());
}
and add it in your onload or onresize;
working code: http://jsfiddle.net/MDnrk/13/

TinyMCE width and height disobedient!

According to the (conflicting) documentation of TinyMCE, the editor takes on the size of the textarea (or other) element that it replaces. It also says that you can set the size of the editor by specifying { height: '123', width: '123' } in the init method.
I have tried BOTH and still get only one result - the editor resizes itself to (how it remembers is beyond me) what it was the last time a user resized it.
Its saves the last size because of the theme settings. You can turn it off by using the following
$('textarea.tinymce').tinymce({
theme_advanced_resizing: true,
theme_advanced_resizing_use_cookie : false,
I know all about this, it is very annoying.
Adding this to any loaded CSS file fixed the width for me (I just put it in the global css, not in any of the TinyMCE css files, I did not test with height):
.mceEditor > table {
width:/* my width */ !important;
}
This would affect all instances, which was fine in my case. You can target the toolbar itself with .mceToolbar
You kind of do want TinyMCE to resize the textarea, so it can be wide enough to fit all the toolbar icons.
Here is my fix.
It works also for multiple instances of TinyMCE editors (init() with 'height' property works only for the first instance, so it's a workaround to achieve a fixed or minimum height of the editor box).
.mceEditor td.mceIframeContainer iframe {
min-height: 350px !important;
}
.mceEditor table {
height: auto !important;
}
Although there are a lot of good suggestions here I found the answer by reading the question. There is NO problem with height or width so why all these work arounds with CSS or writing functions, the method in the docs works.
The original challenge was about resizing, the author never said the height or width didn't work, it just didn't do what he/she expected - it was only stated as quoted below:
"the editor resizes itself to (how it remembers is beyond me) what it was the last time a user resized it."
Saidul Islam answered the question correctly and to take it one step further Stuart went on to describe how to turn off the cookies. If you need to set the height and width do it when in init() and be done. You can read more here:
https://www.tinymce.com/docs/configure/editor-appearance/#min_height
Sizing the input area in both height and width works as outlined below.
tinymce.init({
selector: '.profileTextArea',
plugins : 'advlist autolink link image lists charmap print preview code',
min_height: 400
});
tinyMCE.init({
mode : "exact",
.....
mode : "exact" will disable the ability to resize grid by drag
Yes, this is very annoying. I wrote my own function to adjust the height to the given input. You may modify it to set your height/width as you wish:
resizeIframe: function(frameid) {
var frameid = frameid ? frameid : this.editor.id+'_ifr';
var currentfr=document.getElementById(frameid);
if (currentfr && !window.opera){
currentfr.style.display="block";
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) { //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight + 26;
}
else if (currentfr.Document && currentfr.Document.body.scrollHeight) { //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
}
styles = currentfr.getAttribute('style').split(';');
for (var i=0; i<styles.length; i++) {
if ( styles[i].search('height:') ==1 ){
styles.splice(i,1);
break;
}
};
currentfr.setAttribute('style', styles.join(';'));
}
},
im setting width and height to editor area like this
<style>
#content{width: 620px; height: 500px;}
</style>
<textarea name="content" id="content" cols="50" rows="15"></textarea>
I noticed that a containing table was enforcing widths, and also the icon set are td's, so there's a minimum width they'll collapse down to, so if you have many icons in a single row - it could be messing all over your widths.
Sort of related SO question of mine, ended up being quite related to your problem: Able to float td elements consistently?
I found the TinyMCE text-area (called '.mceContentBody' in my theme) too small and awkwardly margined in the new post content area.
In my theme there's a css file called editor-style. I changed the width (to 98%) yet since TinyMCE uses cookies to remember the editor size, the CSS changes weren't sticking. After CLEARING MY BROWSER'S CACHE, the CSS width/margin changes took effect. Finally. Gah.
Add a 'body_id' using tinymce.init and then use that id in 'content_css' to give the editor the desired css behavior. Like so:
tinymce.init({
selector: "textarea",
content_css: '/css/app.css',
body_id: 'new-journal-editor'
});
And then in app.css:
#new-journal-editor {
height: 123px;
width: 123px;
}
I am facing the same problem but I end up doing this
#tinymce-textarea_ifr {
min-height: 500px !important;
}
.mce-tinymce {
width: 96% !important;
margin: 0 auto !important;
}
I find the best method to restrict the width tinyMCE 4+ textarea is to wrap the textarea in a new div or span tag. Then apply the width to that. This way you get use percentage widths instead of fixed px. if you want to adjust height edit the rows="15" value.
example:
<div style="width:90%!important;" ><textarea name="content"cols="100" rows="15" class="mceEditor" id="content"><?php echo $content;?></textarea></div>

Adjust height on jQueryUI dialog to be as tall as content up to a max

Using jQueryUI's dialog boxes, I want to popup information. My problem is I want to set the height of the dialog to however high the content is. If I don't specify a height, this works perfect. The height is automatically calculated based on the height of the content. Problem then is if the content is very tall, the dialog gets very tall too and goes below the window... maxHeight doesn't work well in this case either.
So I've been able to somewhat resolve this by adjusting the height and position after displaying the popup. However, while the content is being loaded (through ajax), it goes well below the screen. It's only after finishing that I can readjust the window. I'd rather not have that awkward delay.
UPDATE: Turns out I want something even more than just a maxHeight. I want a max INITIAL height. So after loading the dialog with data, it can only grow to a certain height. But after, you're allowed to expand the window. It's pretty easy to accomplish this:
$('<div><div></div></div>').attr('title', options.title).appendTo('body').dialog({
open: function() {
$(this).children().css('maxHeight', maxInitialHeight).load(url, function() {
thisDialog.$dialog.dialog('option', 'position', 'center');
});
}
});
That will dynamically load a dialog from 'url' with content up to a maxInitialHeight height. The 2 divs nested are necessary.
You could insert your content inside a <div class="dialog-data" /> and make that div the content of your dialog.
Then you could, with CSS, specify a max-height and overflow: auto to your div.dialog-data.
maybe like this
options.open = function() {
var dialog = $(this).dialog('widget');
var content = dialog.find('.ui-dialog-content');
$.ajax({
url: 'this your url',
success: function(result, status, xhr) {
content.empty().append(result);
content.dialog(
'option',
{
// this your options
}
);
};
});
};
Here's a much more concise way that is working for me
$(targetElement).css('max-height', '400px').dialog({
'resize' : function() {
$(this).css('max-height', '1000px');
}
});
First set max-height on the thing you are putting in the dialog. It appears on the screen no bigger that 400px.
But as soon as you start dragging it, the restriction is lifted.
... just what I wanted, and much cleaner code.
I tried to set max-height back to 'auto' as well, but that didn;t seem to stick, so 1000px is OK for me.

Categories