Please, see image below and you will see what I talking about.
When I click on link or picture feature of Summernote BoosTrap Editor ( v0.6.16 ) the Modal appears inside another Modal, that's weird. I don't know if I have some CSS overriding another ones or if its BUG of SummerNote.
Summernote url: http://summernote.org/#/
Thanks.
I found the issue. In my point of view its a incompatibility between SummerNote and bootstrap-modal plugin.
In SummerNote I found code below:
var tplDialog = function (className, title, body, footer) {
return '<div class="' + className + ' modal" aria-hidden="false">' +
'<div class="modal-dialog">' +
'<div class="modal-content">' +
(title ?
'<div class="modal-header">' +
'<button type="button" class="close" aria-hidden="true" tabindex="-1">×</button>' +
'<h4 class="modal-title">' + title + '</h4>' +
'</div>' : ''
) +
'<div class="modal-body">' + body + '</div>' +
(footer ?
'<div class="modal-footer">' + footer + '</div>' : ''
) +
'</div>' +
'</div>' +
'</div>';
};
What the meaning of this, when i click on Link or Picture feature on SummerNote he calls the .modal() and the default behavior of this function, on Bootstrap-modal Plugin, is create a new div with class="modal-dialog". If I remove this class="modal-dialog" and try again, everything works fine!
i think you just need to enable this option
dialogsInBody: true
$('.summernote').summernote({
height: 300,
dialogsInBody: true
});
As originally pointed on this issue, Summernote´s crew has included the solution in the documentation, which says to include the following option:
$('#summernote').summernote({
dialogsInBody: true
});
But even so you experience a bug that freezes the underlaying modal, you can use this ugly, but handy and short workaround:
$('.modal.link-dialog').on('hide.bs.modal', () => {
setTimeout(() => {
if ($('.modal:not(.link-dialog)').hasClass('show')) {
$('body').addClass('modal-open');
}
}, 0);
});
It basically re-add the modal-open class to the body when another modal is active.
Related
I'm currently implementing a Swiper using react. I'm using Bullets as pagination marks. My code for the pagination looks as follows:
<Swiper
navigation
pagination={{
clickable: true,
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + '</span>';
}
}}
onSlideChange={() => console.log('slide change')}
onSwiper={(swiper) => console.log(swiper)}
>
Since I'm using react the attribute of the span should be className instead of class. The problem is, that if I change it to className instead of class, the CSS of the bullets does not get applied. I hope somebody can help me to fix this, thanks in advance.
Use it like this,
return <span className={`${className}`}>{index + 1}</span>;
This will work!
Adding an extra overlay div to the base tpl in the "fancybox-stage" ruins the captions for some reason. Without using the base tpl, the caption is read properly from tye data('caption') attribute. Is this intended?
baseTpl:
'<div class="fancybox-container" role="dialog" tabindex="-1">' +
'<div class="fancybox-bg"></div>' +
'<div class="fancybox-inner">' +
'<div class="fancybox-infobar"><span data-fancybox-index></span> / <span data-fancybox-count></span></div>' +
'<div class="fancybox-toolbar">{{buttons}}</div>' +
'<div class="fancybox-navigation">{{arrows}}</div>' +
'<div class="fancybox-stage"><div style="position:absolute;z-index:99999;"id="overlay"></div></div>' +
'<div class="fancybox-caption"></div>' +
"</div>" +
"</div>",
Even if I try to add +caption+ to the caption div in base tpl, the console error says caption is not defined, so that's not a solution either. Won't work with +slide.opts.$orig.data('caption')+either.
I fixed it by directly editing the base tpl within the js file of fancybox, using the base tpl change through options and javascript although having exactly the same code, breaks caption functionality, however inside the core js file, it does not.
I am trying to use bootstrap to fill a container depending on it's size. I am able to do it with the screen size, when the container is the whole page or the whole bootstrap modal (which is pretty much the same), as it does by default when using bootstrap. See this JSFiddle for an example of what I want (which is pretty much the default behavior).
My problem is when the container is something else, like a dhtmlx modal window. I am trying to still use col-*-* but it makes no sense as I am not trying to fit the screen but only the container. I tried with spans-* but I cannot get it to work properly.
Would you have an idea on how I could do the same but inside a specific container, like a dhtmlx window?
This code snippet is an example of code where I have a container (the dhtmlx modal window) and where I need to set a container for bootstrap and get a responsive grid based on the size of this container and not the screen.
var myForm, formData;
var dhxWins, w1;
function doOnLoad() {
dhxWins = new dhtmlXWindows();
dhxWins.attachViewportTo("vp");
w1 = dhxWins.createWindow("w1", 10, 10, 300, 250);
myForm = w1.attachHTMLString(
'<div class="container">' +
'<div class="form-group col-xs-12 col-sm-6">' +
'<label>label</label>' +
'<div>' +
'<input class="form-control" type="text">' +
'</div>' +
'</div>' +
'</div>'
);
}
doOnLoad();
div#vp {
height: 600px;
border: 1px solid #dfdfdf;
}
<link rel="stylesheet" href="https://2a6781b6e7331b7c52c1706cd28c7de3f641b52b.googledrive.com/host/0B4bedT44-LokVFBFUXlaVEthaFE?t=.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ecropolis.s3.amazonaws.com/ui/libs/moment.min.js"></script>
<script src="https://344bb70794e57c6753700eb885a1f4eb0c383612.googledrive.com/host/0B4bedT44-LokaV9tODJoX29BVFk"></script>
<div id="vp"></div>
I have been researching on this question for a couple of days, trying lots of things but achieving nothing.
If you have an idea, please help.
I could not find a way to do this in an elegant way, so I did it the hard way. This is the solution I will use (and that works).
I wrote an example were I change the classes as I need for how I use bootstrap in my form, but you can easily adapt this to your own needs.
window.attachEvent("onResizeFinish", function(obj){
deleteClassCol();
if (obj.getDimension()[0] < 768)
{
$('.form-group').addClass('col-xs-12');
$('.label-control').addClass('col-xs-12');
$('.theInput').addClass('col-xs-12');
}
else if (obj.getDimension()[0] < 992)
{
$('.form-group').addClass('col-xs-6');
$('.label-control').addClass('col-xs-2');
$('.theInput').addClass('col-xs-10');
}
else if (obj.getDimension()[0] < 1200)
{
$('.form-group').addClass('col-xs-4');
$('.label-control').addClass('col-xs-2');
$('.theInput').addClass('col-xs-10');
}
else
{
$('.form-group').addClass('col-xs-3');
$('.label-control').addClass('col-xs-2');
$('.theInput').addClass('col-xs-10');
}
});
function deleteClassCol(){
[".form-group", ".label-control", ".theInput"].forEach(function(theClass) {
$(theClass).removeClass (function (index, css) {
return (css.match (/(^|\s)col-\S+/g) || []).join(' ');
});
});
}
I'm trying to create a drop down list directive, with down-arrow that appears when the mouse is hovering the dropdown header or when the dropdown list is oppend, and disappears otherways.
I succeeded to do this, but if the dropdown list is closed not by selecting element or by pressing on the header list again, than the arrow isn't disappead.
(I.E. If i'm openning one list and than openning another without closing the first one, than arrow of the first list is not disappearing)
JsFiddle - http://jsfiddle.net/rpg2kill/uS4Bs/
code:
var myApp = angular.module('myApp', ['ui.bootstrap']);
function MyCtrl($scope) {
$scope.supportedList= ['Option1', 'Option2', 'Option3', 'Option4'];
$scope.selectedItem = 'Option1';
}
myApp.directive('dropDown',
function () {
return {
restrict: 'E',
replace: false,
scope: {
supportedList:'=',
selectedItem:'='
},
template:
'<div ng-mouseenter="onMouseEntered()" ng-mouseleave="onMouseLeft()">' +
'<a class="dropdown-toggle" data-toggle="dropdown" href="" ng-click="onMouseClicked()" >' +
'<img ng-style="{\'visibility\': dropDownIconVisibility}" src="http://png.findicons.com/files/icons/2222/gloss_basic/16/arrow_down.png"> </img>' + //Arrow down Icon
'<span>{{selectedItem}}</span>' +
'</a>' +
'<ul class="dropdown-menu">' +
'<li ng-repeat="item in supportedList" ng-click="onSelectedItem(item)">' +
'{{item}}' +
'</li>' +
'</ul>' +
'</div>'
,
link: function(scope, element, attrs) {
scope.dropDownIconVisibility = "hidden";
scope.dropDownIconVisibilityLocked = false;
scope.onSelectedItem = function(item) {
scope.dropDownIconVisibilityLocked = false;
scope.selectedItem = item ;
};
scope.onMouseEntered = function()
{
scope.dropDownIconVisibility = "visible";
};
scope.onMouseLeft = function()
{
if (scope.dropDownIconVisibilityLocked)
return;
scope.dropDownIconVisibility = "hidden";
};
scope.onMouseClicked = function()
{
scope.dropDownIconVisibility = "visible";
scope.dropDownIconVisibilityLocked = !scope.dropDownIconVisibilityLocked;
};
}
};
})
The code is little ugly. A better solution is to show the arrow if the mouse is hovering OR the list is openned, but I don't know how to bind angular to the state of the dropdown list.
Is there a way to binding angular to Twitter bootstrap's dropdown event?
Or is there a better way to solve this problem?
I suggest you using full CSS approach - it takes less code, it does not trigger JS evaluations, thus, it performs better (Angular is a bit slow with all its cool features). Once you go mobile - CSS will be more preferable, as supports downgrading with media queries and so on... There are too many pros!
Remove all your mouse-tracking code and add just two CSS rules and here you go:
a.dropdown-toggle img {
visibility: hidden;
}
a.dropdown-toggle:hover img {
visibility: visible;
}
I succeeded to solve the problem, unfortunately the solution is not so pretty, but at least it works.
I'll try to solve this with only CSS as madhead suggested.
The problem was that I didn't know when the user clicked outside the dropdown, that caused the dropdown popup to close but the icon was still displayed. So I attached an handler to each directive that listen on document.click event and hides the Icon.
document.addEventListener('click', function (event) {
scope.$apply(function () {
scope.hideDropdownIcon();
});
}, false);
That worked, but if I clicked on another Dropdown when the current dropdown was opened, the document.click event was not fired. So I had to create my event and attach it to $window and to call it when any dropdown is opens.
var event = new Event('hideDropDownIcon');
$window.addEventListener('hideDropDownIcon', function (e) {
scope.hideDropdownIcon();
}, false);
You can see it here:
http://jsfiddle.net/rpg2kill/uS4Bs/6/
There must be a better solution. So if you know how to do it better or by using only css, I would like to know.
Thanks.
Found CSS solution to the problem.
css is so simple instead all the js events..
The CSS:
a.dropdown-toggle img {
visibility: hidden;
}
li.ng-scope:hover img,li.ng-scope:active img,.open a img{
visibility: visible;
}
You can check this: http://jsfiddle.net/rpg2kill/HVftB/1/
I have a flash object, and when it loads the IE "image not found" graphic shows up for a fraction of a second and then disappears.
I've tried to check for errors, and the only one which may be relevant is this:
SEC7113: CSS was ignored due to mime type mismatch
jquery.uploadify.css
(It is being sent as text/javascript).
I don't know if this is relevant and could cause such behaviour.
On all other browsers, including IE9, it does not happen.
Any ideas?
EDIT:
I am using the uploadify script, which generates the flash object - this is the code:
// Create the button
if (!settings.buttonImage) {
var button = jQuery('<div />', {
id : settings.id + '_button',
'class' : 'uploadifyButton ' + settings.buttonClass,
html : '<span class="uploadifyButtonText">' + settings.buttonText + '</span>'
});
jQuery('#' + settings.id).append(button);
jQuery('#' + swfuploadify.movieName).css({position: 'absolute', 'z-index': 1});
} else {
jQuery('#' + swfuploadify.movieName).addClass(settings.buttonClass);
}