gif of what is happening
The content of swal moves upward then down on hover,
the title is set equal to a whitespace
<h2 class="swal2-title" id="swal2-title" style="display: flex;"></h2>
style in internet explorer
swal.fire({
title: ' ',
text: sText,
showCancelButton: true,
showConfirmButton: true,
confirmButtonText: i18n.t('["GENERAL"]["BUTTON.CONFIRM"][0]'),
cancelButtonText: i18n.t('["GENERAL"]["BUTTON.CANCEL"][0]'),
confirmButtonColor: '#fe792c',
reverseButtons: true
}
)
instead of an empty space, I used '' insted. that fixed the moving ui problem
Related
I'm using SweetAlert v10.14.1 as a toastr with code
<script>
const Toast = Swal.mixin({
toast: true,
position: 'top-right',
showConfirmButton: false,
timer: 5000,
})
</script>
it works fine .. but the message dropped down from top with white background .. i want to :
1- fade it in and out
2- change apperance to a bootstrap theme
No fade-in effect at the moment. If you want to remove the "boing" effect, you can just do it adding to your props:
Swal.fire({
... you other props...
showClass: {
popup: "", // it removes the 'boing' effect, the default value is 'swal2-show'
},
});
Here is a screen: draw error.
My problem is that the single events are drawed over 2 days.
If I click on week mode the events are drawed, on day mode not.
If I click on previous/ next the calendar return "Cannot read property 'event' of undefined" and the existing events disappear.
When I click on empty day, fullcalendar sometimes return "Cannot set property 'el' of undefined".
Here is some source.
Include:
- jQuery.js
- bootstrap.js /css
- moment.js
- fullcalendar.js /css
<div id='calendar'></div>
<script>
$(window).load(function() {
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'month',
locale: 'de',
selectable: true,
selectHelper: true,
editable: true,
allDaySlot: false,
allDayDefault: false,
eventOverlap: false,
events: "./kalender/events.php",
});
});
</script>
events.php return an json array.
[{"start":"2017-02-03T12:00:00+0100","id":7,"titel":"test","nachricht":"nachricht","overlap":false,"color":"rgb(255,0,0)"},{"start":"2017-02-05T12:00:00+0100","id":8,"titel":"Bf1 Key","nachricht":"test","overlap":false,"color":"rgb(255,0,0)"},{"start":"2017-02-10T00:00:00+0100","id":9,"titel":"asd","nachricht":"asdasd","overlap":false,"color":"rgb(255,0,0)"},{"start":"2017-02-17T00:00:00+0100","id":10,"titel":"sdf","nachricht":"sdf","overlap":false,"color":"rgb(255,0,0)"}]
Thanks.
In Safari 5 the Viewport-Height is wrong on first load: http://www.filmreich.com/
When the slider starts to go to next slide, the viewport-height is correct. This is the code I use:
slider.reloadSlider({
mode: 'horizontal',
speed: 800,
pause: 7000,
infiniteLoop: false,
adaptiveHeight: true,
preloadImages: 'visible',
nextText: '<i class="fa fa-angle-right"></i>',
prevText: '<i class="fa fa-angle-left"></i>',
pager: false,
controls: false,
auto: true,
onSliderLoad: function(){
jQuery('.article-controls a').on('click', function(e){
e.preventDefault();
var goTo = jQuery(this).attr('data-slide-index');
slider.goToSlide(goTo);
});
}
});
I use jQuery(window).load(), to be sure the slider is fully loaded.
I find a solution - not the best way - but that worked for me. I added the following Code to the onSlideLoad-function:
setTimeout(function(){
var sliderHeight = jQuery('.bxslider li:first-child').height() + 'px';
jQuery('.bx-viewport').css('height', sliderHeight);
}, 300);
I'm using Smartclient, v 8.2 (LGPL).
I have a MenuButton that opens a Menu. The button is aligned right. the problem is that when the menu is displayed; the left side of the menu is aligned with the left side of the button, and there's no space for rendering the menu. As a result, when I click the menu button, the page becomes wider (horizontal scrollbar appears) in order to make space for rendering the menu. when the menu is hidden, the page returns to normal size.
is there any way to avoid this? What I would like is that the right side of the menu is aligned with the right side of the button.
I tried using the align property of the menu, but no matter what value I used, I always see the same behavior. Also I set overflow= "hidden", but still same problem.
this is small test case:
isc.Menu.create({
ID: "menu",
autoDraw: false,
showShadow: true,
shadowDepth: 10,
overflow: "hidden",
align: "right",
data: [
{title: "New", keyTitle: "Ctrl+N", icon: "icons/16/document_plain_new.png"},
{title: "Open", keyTitle: "Ctrl+O", icon: "icons/16/folder_out.png"},
{isSeparator: true},
{title: "Save", keyTitle: "Ctrl+S", icon: "icons/16/disk_blue.png"},
{title: "Save As", icon: "icons/16/save_as.png"}
]
});
isc.MenuButton.create({
ID: "menuButton",
autoDraw: false,
title: "File",
width: 100,
menu: menu
});
isc.HLayout.create({
width: "100%",
members: [
isc.Canvas.create({
width: "*",
height: 24,
backgroundColor: "lightgray"
}),
menuButton
]
})
I found the problem: if showShadow is set to true, then I see the issue described in the question. removing that attribute (default is false) solved the problem: menu is aligned to the right, and no scrollbars appear.
So I have a TabPanel defined like so:
panel = new Ext.TabPanel({
fullscreen: true,
cardSwitchAnimation: 'slide',
ui: 'dark',
items: [home, faq, about]
});
The home section is defined like so:
home = new Ext.Component({
title: "Home",
scroll: 'vertical',
tpl: [
'<tpl for="."',
' <div messageId="{message_id}">',
' </div>',
'</tpl>'
]
});
Now, ONLY on the home tab, I want a section right underneath the TabPanel that is going to contain some other elements, specifically, a textbox, button, and two dropdowns.
How can I add them so that the content section still acts the same way and doesn't start until underneath these added elements?
It's not 100% clear what your aim is, but it sounds like you just want to stack two panels on top of each other within your 'home' card as below.... If you need to control how much room each sub-item takes up you need to look at layout properties specifically hbox I think.
home = new Ext.Panel({
title: "Home",
scroll: 'vertical',
items: [
{
html: 'first panel'
},
{
tpl: '<tpl for="."><div messageId="{message_id}"></div></tpl>'
}
]
});
Alternatively you might have been talking about having something like a second toolbar, in which case take a look at dockedItems.