bootstrap modal shows previously resized textarea as it is - javascript

I am using a bootstrap modal to get some information from user. Inside the modal-content class I have given a <textarea /> field to let user provide comment. This textarea is and should remain resizable. But the problem is when the user resizes the text area and closes the modal, the textarea shows previously changed size and it does not reset to original.
Please follow the link below to reproduce the issue:
Open Modal, Resize the textarea so that it will stretch even outside the modal
Now click on close
Open the modal again, the previously changed size of textarea will be shown.
Note that CSS resize: none; is not the option I DO want the textarea should be re-sizable.
Also, I have jquery available, Is there option with jquery to reset the size when the modal closes automatically?
Edit: The duplicate suggestion is different as the textarea here comes within a bootstrap modal.
Demo

When the modal is closed (hidden.bs.modal event) reset the textarea height and width.
$('#myModal').on('hidden.bs.modal', function() {
$(this).find('textarea').css({'width': '', 'height': ''});
})
JSFiddle

Related

Resize Height tinyMCE editor

I have bootstrap tabs setup with one tab having the tinyMCE editor and another tab carrying a raw/minified version of the data that goes into the tinyMCE editor
When I initially load the page, the height of the editor is set to 100px. When running the data collection, it uses tinymce.get('dataReport').execCommand('mceInsertContent', false, content);
and the height of the editor will change as it adds content.
My issue, when the other tab (raw data tab) is active, when the user switches back to the tinyMCE tab, the height of the editor is still at 100px. But once the user clicks inside the editor, it will resize.
Is there a way to manually call a resize on tinyMCE when the tab is selected?
I tried fooling it with a onclick="tinymce.execCommand('mceFocus',false,'dataReport');" on the tab button, and it will focus fine (ie. I can start typing right away) but the height of it is still at 100px.
you can use resizeTo(w,h) method documentation
In your onClick call a function updateTinymce()
function updateTinymce(){
tinymce.execCommand('mceFocus',true,'dataReport');
var ed = tinymce.activeEditor;
ed.theme.resizeTo(400, 200);
}

Semantic-ui pop up z-index?

http://semantic-ui.com/modules/popup.html#/examples
I have used the pop up described above and it works well. The only thing I see that I have a blue coloured page header div (width 100%, height 200px, z-index:9998).
I have a series of images below that on the page. The pop up triggers when an image is clicked. However for some reason the pop up window is popping up under the page header div when an image near the top of the page is clicked.
How can I make the pop up appear over the top of that header div?
If I need to set the z-index of the div, where do I set it and on which element/class?
I guess you need this, like document says: https://semantic-ui.com/modules/popup.html#/settings
set this attibute to false -> movePopup: false
$('#button_event_trigger').popup({
popup: $('.custom.popup'),
movePopup: false, //this here
on: 'click'
});
In my case, I had a button inside a sidebar, that needs trigger the popup, then popup appears inside the container with overflow hidden, and css z-index was not working.
Search for 1190 in semantic-UI.css. Override the value.

Colorbox is not showing content box correctly

I have a cbox that is not showing content as expected. It should show it as this image:
Instead, the inner box is not showing, but the scroll down is being done. The content is there, because I can see it in this image:
But it's not being shown inside the colorbox.
Any idea on why it's not working?
EDIT: As additional info, my colorbox.css is being loaded before the colorbox.js, and jquery is being loaded before colorbox.js.
After executing these lines:
$('#cboxOverlay').css('z-index', '99');
$('#cboxOverlay').show();
optionsContainer.show();
The white box is being created with no content. But for the second example, the white box is not being shown...
Where optionsContainer contains text at innerHTML and innerText.
It seems there are some custom z-index overriding colorbox z-index.

Bootstrap popover: hide when cursor moves outside of the window

I want to display a popover which contains several buttons when user hovers over a text link
The problem I have is the default Bootstrap popover I'm currently using is dismissed when the cursor from the link which triggered it (e.g. when the user moves to select one of the buttons)
This jsFiddle is an example of what I tried to do.. The principle is: show popover when the link (#example) is hovered, hide popover when the popover (.popover) is unhovered.
But this doesn't work, although I'm sure that the BS popover is encapsulated in a .popover class (I check with FF dev debug tool).
Funny thing: it works with another div! If I replace
$('.popover').mouseleave(function(){
$('#example').popover('hide');
});
By this
$('.square').mouseleave(function(){
$('#example').popover('hide');
});
The popover is indeed hidden when no longer hovering the blue square.
Why doesn't work with .popover?
You need to hide popover when the mouse leaves the .popover-content not .popover. And .popover-content does not exist at the beginning so you need to bind the event to the document
$(document).on('mouseleave','.popover-content',function(){
$('#example').popover('hide');
});
http://jsfiddle.net/o4o9rrsq/2/

Unable to set the absolute position of modal window

I have a jQuery modal window that appears upon click of a button. I have a on the close-modal box where I want to capture the editable text of the modal window upon closing and so I want to make the modal full screen so the user cannot simply click on the main page thus rendering the action on the click of the close modal defunct.
I have tried setting the position as absolute with top:0 left:0 bottom:0 right:0 as mentioned on some posts but this is not working. The modal is being displayed relative to the position of the click despite setting the values in line so I am unsure as to why this is happening. It keeps adding random values to the top style despite being specified.
Is there anyway round this?
Have you try to put the div of the modal window right after de tag? And try to aadd body, html {width:100%; height 100%; }

Categories