How can I stop jQuery UI dialogs from getting squashed? - javascript

I have a fairly simple div element which I want to turn into a popup via jQuery UI. The HTML is basically
<div id="login_form">
<table> ... </table>
</div>
Without any jQuery involvement, it renders fairly naturally like this (the green background comes from the div and fits around its contents):
When I make it into a popup with this code:
$(document).ready(function()
{
$("#login_form") .dialog (
{
autoOpen: false
});
$("#login_or_sign_up") .click (function()
{
$("#login_form") .dialog ("open");
});
});
It renders like this.
Yuck.
I'm fairly sure the reason is simply that I haven't included the jQuery UI CSS files. I don't want to include the jQuery UI CSS files.
By inspecting the popup I notice that jQuery has created another div which surrounds the one I provided, and this is styled to have a width of 300px. I expect this is the problem -- jQuery UI has picked a size which is too small and the inner elements are not reducing themselves to fit.
Can I make jQuery dialog-ify my div without shrinking it?
If not, I can probably work around this by adding width:100% styles to the inner elements individually. In that case, is there a general workaround which will not require me to alter any of the inner elements?

.dialog({ width: 'auto' }) works.

Related

slimScroll hidden on page load

I'm developing an application that uses the slimScroll jQuery plugin (http://rocha.la/jQuery-slimScroll) to essentially add a nice overflow to div containers.
Everything works apart from a small, almost insignificant annoyance: when the page is loaded for the first time, the plugin is initiated on the div and automatically displays the scrollbar. After hovering in then out of the container, the scrollbar is hidden.
Is there any way to make the scrollbar start in a hidden state on page load?
The developer was asked this a number of times but I can't find a solution on the website.
Any help would be much appreciated.
This code work for multiple elements that have same classes.
JS:
$(document).ready(function() {
$('.inner').slimScroll({
//your options
opacity: 0
}).mouseover(function() {
$(this).next('.slimScrollBar').css('opacity', 0.4);
});
});
for such HTML code like this.
<div id='box'>
<div class='inner'>
some paragraph
</div>
</div>
The result show here: https://jsfiddle.net/ATR616/4Lnr3fju/2/

jquery resizable changing css

I'm using the jQuery resizable function on some divs on a page I'm working on. I also have some events that trigger an element to not be resizable anymore so I'm calling .resize('destroy');
however it seems like changing an element from resizable to not resizable is changing the css of the element and making it act strange. What css changes take place when an element becomes resizable?
when you apply .resizable()
your element takes position: relative;
When you call the resizable function on an element, you are adding classes to the element eg:
ui-widget-content ui-resizable
The css file which comes with the plugin has got style attributes referring to these new classes which essentially adds a corner image. This is the only thing I can see that changes visually in this jsFiddle.

Button resizable jquery magic margin

I have created a button using the <button></button> tags. I applied .resizable() jQuery and it looks fine. But when I inspect element the button, it occupies the whole div with its margin-right though the margin-right is set to 0px. I've looked in the css and overrode some parts to fix it but I didn't succeed. What's causing it?
It is very similar to this: http://jsfiddle.net/nagwW/13/
If you inspect element the button, it occupies the whole row but how could I just limit the width with respect to its real width?
If you are using jQuery UI resizable function then you have to place the button element inside the element being resized, because jQuery UI's default functionality adds a div with class name "ui-resizable-handle". The clickable resize handle that you see.
<div id="resizable" class="ui-widget-content">
<button>Resizable</button>
</div>
See this JS Fiddle that I changed from jQuery UI:
http://jsfiddle.net/truthreveller/mX7Ej/3/

Jquery UI modal (popup box) control size and hide by default

jsFiddle for this question
I am currently using bootstrap modal, which is a jQuery plugin to create a popup box. (If anyone wants to check out the very short documentation, here is a link to it - it's very short, so only takes a minute).
Unfortunately, I am having a couple problems:
I need to be able to define the size of the modal pop-up box. I tried the following, but it does not display correctly:
<div class="modal" id="myModal" style="width: 800px; height: 900px;">
I need to be able to hide the modal by default. Currently, it displays as soon as the page loads. I tried the following, but it does not seem to hide correctly:
$(document).ready(function() { $('#myModal').modal("hide"); });
Any idea how I might be able to resolve these issues?
Answer 1: Try defining the modal CSS class and set the width and height.
Answer 2: when calling the modal function, pass in an option object with th property "show" as false.
$("#myModal").modal({show: false});
Answer 3: you can handle the "shown" event and wire it up to make an AJAX call to web page and set the result as the inner HTML of the div.
Try the following in the source. Worked for me.
$('#ModalForm').dialog(
{
modal : true ,
autoOpen : false ,
height : 300,
width : 400,
. . . .
try this
<div class="modal" id="myModal" style="width:800px;height:900px;display:none;">
To answer the second question the documentation says you can add an option like $('#myModal').modal({'show':false}) so that on initialization it should not be shown.
Third question's answer is use an iframe or load the html using ajax. To stop people from submitting you could use javascript for that or place a clear div to prevent anyone from actually using it. The first method assumes you are loading the form from the same domain.
Try this to force the dimensions to the what you want $('#myModal').modal({'show':false).height('600px').width('500px');​
You can supply the .hide class to the container of the modal to hide it, which is the default bootstrap method of hiding modals. As to the size, you can again supply your own class with your custom width and height to the container and it should take up on it, the way you're adding it inline now works fine as well, just make sure to add it to the main container.
So all in all your modal container should look like this:
<div class="modal hide fade custom-size" id="myModal"> ... </div>
Note: Added the .fade class to add the transition fade/slide effects, you can remove it if you like if you don't want those effects.
And as for the modal poping up as soon as you load your page all you have to do to remove that behavior is not call the modal at all as you are now, that way the modal will only popup when you click on action or "Launch Modal" button.
Here is a cleaned up fiddle, you had some non-valid styles like float:center (i wish that one existed): http://jsfiddle.net/zkzuM/2/, full page demo: http://jsfiddle.net/zkzuM/2/show/
#myModal{
height:200px;
width:100px;
}
try adding something like this to the css
your javascript
$('#myModal').modal({'show':false});
Take a look at the fiddle and its result.
.modal-body class has a max-height of 400px.
If you want a static height as 900px you should set height and max-height of .modal-body.
Otherwise that close button and its bar might float over the box.
#myModal .modal-body {
height: 775px;
max-height: 800px;
}
It's 775px for a 900px high #myModal because of margins and paddings of the box model.
It's always 125px shorter. If you want to make it dynamic you can write something like:
$('#myModal .modal-body').height($('#myModal').height()-125);
You do it right but have take a look the bootstrap CSS if it use the max-width min-width and comment it out.
If it does not work in JS you can do it by putting hide class in modal wrapper.

Why is my TinyMCE hidden textarea acting up?

I have about 7 textareas on a web page, all of them are rich text editors using TinyMCE. However at page load only 1 of them is visible and the rest of them hidden. The user can click a 'show' link which would display the remaining textareas one by one.
However, I have a weird problem. All the textareas are setup like this:
<textarea cols="40" rows="20"></textarea>
However, only the textarea displayed on page load is the full size I want it to be. The remaining textareas are really small when I show them. So I'm thinking that perhaps they aren't rendered because they are hidden on page load.
How can I remedy this?
Try adding some CSS to textareas that are hidden.
For example, use
<textarea cols="40" rows="20" style="width: 40em; height: 20em"></textarea>
I think I ran into this, where TinyMCE's CSS overrides some of the default CSS behaviour. I ended up having to "re-override" it, and eventually edited the TinyMCE's css pages.
I think this is an MCE bug, or at least a feature that MCE lacks.
Since I wanted to style my input box in CSS, not in HTML (yuck) I tried
visibility: hidden;
instead of
display: none;
and everything worked again.
I believe that the latter causes the element to take up no space, which trips up the MCE code which detects the width and height of the element.
When loading TinyMCE with jQuery, this problem can be solved as such:
1- On your textarea, specify a height in the inline style attribute:
<textarea style="height:200px;" class="tinymce" name="myfield"></textarea>
2- add a callback function when instantiating a TinyMCE editor. e.g. tinymceLoaded
$('textarea.tinymce').tinymce({
// Location of TinyMCE script
script_url : 'PATH_TO_TINYMCE.js',
// General options ...
// Theme options...
// callback function
init_instance_callback : "tinymceLoaded"
});
3- Set the height of your Editors in the tinymceLoaded function:
function tinymceLoaded(inst){
// get the desired height of the editor
var height = $('#' + inst.editorId).height();
// when the editor is hidden, the height calculated is 0
// Lets use the inline style text to solve this problem
if(height == 0){
height = $('#' + inst.editorId).css('height'); // 200px
height = height.replace(/[^0-9]/g, ""); // remove all non-numeric characters to isolate the '200'
}
// set the height of the hidden TinyMCE editor
$('#' + inst.editorId + '_ifr').css({height: height + 'px'});
}
Without having a few more specifics about your actual setup and how you're doing the vaious display/hide functionality it's hard to give a definitive answer.
I can throw a few general thoughts out though:
Do they render properly when you don't hide them on page load? That would give a definative answer for at what point the bug's occuring.
When you toggle the view of the textarea can you explicity set the row/col attributes at the same time?
Can you use css (maybe with !important) to set textarea width and height than to test if that has an effect?
From TinyMCE inside hidden div are not displayed as enabled when we put the div visible, user's slolife answer helped me:
Try calling tinyMCE.init(...) after you unhide the containing div.
I've been having the same issue where the height of the hidden textarea controls that were converted into TinyMCE editors were too small. Setting visibility to none worked but leaves a big empty space in its place.
The following solution worked well for me:
Do not hide your textarea controls initially on page load
Instead, set all of your TinyMCE's init config as follows:
tinyMCE.init({
...
init_instance_callback : "onInstanceInit"
});
In your onInstanceInit function, hide the initialized TinyMCE editor dynamically
If you show this editor afterwards, the height will be normal again just like it was never hidden
If you use production version of TinyMCE, you probably forgot to copy folders that tinymce.min.js needs. You need to have folders langs, plugins, skins and themes in the same folder as your tinymce.min.js file.
Another reason for the hidden thing is when you remove elements from the dom with tinymce initialized on them. You need to remove tinymce from this element first, so you will avoid weird behaviour when initialize new tinymce elements.
So for exemple :
removeElementWithTinymce = function(elementToRemove){
var parent = elementToRemove.parentNode;
tinymce.remove(elementToRemove.getAttribute('id'));
parent.removeChild(elementToRemove);
};
That's it.

Categories