The document says: the basic dialog window is an overlay positioned within the viewport.
Is there anyway to make it draggable partly outside the viewport? like the window in Windows system, you could drag it to 99% outside the screen.
I found the answer here: jQuery UI Dialog / Drag Question
if (!$.ui.dialog.prototype._makeDraggableBase) {
$.ui.dialog.prototype._makeDraggableBase = $.ui.dialog.prototype._makeDraggable;
$.ui.dialog.prototype._makeDraggable = function() {
this._makeDraggableBase();
this.uiDialog.draggable("option", "containment", false);
};
}
This does the magic, thanks.
Btw: you may want to add "overflow: hidden;" somewhere, e.g. body {overflow: hidden;}
Related
I have noticed this for a while however that when using Lightswitch and setting properties to "Stretch to Container", that the screen sometimes appears to be over-stretched and moves items down to the next line, for example:
When pressing the "See My Projects Only" the buttons switch (so I hide this one and display the other option" using the below code:
if (screen.ChangeDefaultValue.count > 0) {
screen.ChangeDefaultValue.selectedItem = screen.ChangeDefaultValue.data[0];
screen.ChangeDefaultValue.selectedItem.HomepageProjectsDefault = false;
screen.DefaultOption = null;
myapp.applyChanges();
setTimeout(function () {
screen.Projects.refresh();
}, 100);
screen.findContentItem("SeeAllProjects").isVisible = false;
screen.findContentItem("SeeMyProjectsOnly").isVisible = true;
}
else {
}
This works perfectly, however as you can see in the 2nd image above, the button moves down below the parameter search box as if it has been overstretched. I have tried changing the margin and padding of the .msls-content however this error still occurs here and on multiple of my other pages.
Has anyone found a fix to this problem?
Further information:
I am using msls-2.5.3.css and is declared in the default.htm file
I have tried this https://social.msdn.microsoft.com/Forums/vstudio/en-US/fb1305c5-ac13-474e-8ae0-df74ebf12590/html-client-custom-control-stretch-to-container-sizing-bug-problem?forum=lightswitch
THE PROBLEM
this small block of code in the msls-2.5.3.css appears to be the issue however if I comment it out then other screens break. all of the padding in the height appears to disappear and they all overlap each other on the modal screens
.msls-clear {
clear: both;
}
In LightSwitch HTML, we can use column layout option to render the control in each column. By setting "stretch to container" property, column is only stretched to container size and not the control inside each column is stretched with container. Controls are properly rendered inside the container. Issue occurs due to the column width stretches when hide and show the content item and this is not related with component used in the page. Follow the below workaround solution while remove the content item dynamically by click on the button. Please remove the class ‘msls-clear’ on button click or apply clear: none to the class ‘msls-clear’.
this.element.parents(".msls-column").next(".msls-clear").removeClass("msls-clear")
Hope this will helps you..!
Thanks,
Francis
Im no expert in CSS but this appears to have fixed my issues:
.msls-clear {
clear: right;
max-width: 1850px;
}
all of the machines I have tested have a resolution of 1920 x 1080 so by reducing the width down slightly it will never over stretch the items.
I did originally comment out the clear: right; which worked in internet explorer, however I tested some Syncfusion controls in google chrome/firefox. I could not click on any of them and therefore had to add in the max-width.
If someone can propose a better solution I would be grateful but at least for now this works
I'm working on a phonegap app that has a fixed sidebar behind the page and I found an behavior issue.
The sidebar is hidden, the user can see it with a tap on a menu icon. When the user tap on he icon the page go to the right and it shows the sidebar that is in a minor z-index.
If the user want to close the menu he have to drag the visible part of the page to the left.
My problem was that in the sidebar I have a block that is vertically scrollable. It works fine but the thing is, if I put the .scroll (overflow-y: scroll; -webkit-overflow-scrolling: touch;) class in this element and the user swipe horizontally from right to left over it the sidebar and the page start a drag.
We're using snap.js for the sidebar interaction.
I want to disable this drag. I tried with CSS and preventing horizontal scroll but it doesn't work.
I attach a pic for more visual details.
Use iScroll5 for scrolling.
Then hook into the onScrollStart event:
myScroll.on('beforeScrollStart', function(event)
{
if (isPanelOpen){
myScroll.disable();
}
else{
myScroll.enable();
}
});
Or - if you not wanna use iScroll5, you can set a global bool, which indicates, if a panel is open (you've gotta do this anyway).
If a Panel is open (meaning, you're showing the sidebar) set the bool to true in snap.js - this subsequently means, you've gotta tweak snap.js.
Then, on touchmove, check the bool if it is true. Then you know, a panel is open, and you can do a event.stopPropagation on touchmove in order to prevent the event bubbling up to get recognized by snap.js and avoid the panels closes too early.
Woop! We found it!
The problem was that we're catching the touchmove event for each element with .scroll class and we're stoping the propagation of it.
We had notice that when we tried to start a horizontal scroll all page was moving like a drag so we added this CSS property:
html, body, .ui-mobile .ui-page-active { overflow-x: hidden; }
And...it works fine!
P.S. we don't actually need the horizontal scroll in any element, so, this is fine for us.
I have a div at the top of my mobile application that is position:fixed so it will stay on the top of the browser (it scrolls away in ios 4 and lower which is fine). When an input is focused and brings up the keyboard, the div moves down to the middle of the page. See screenshots:
http://dbanksdesign.com/ftp/photo_2.PNG
Edit:
Here is a simplified test page:
http://dbanksdesign.com/test/
<body>
<div class="fixed"><input type="text" /></div>
<div class="content"></div>
</body>
.fixed { position:fixed; top:0; left:0; width:100%; background:#ccc; }
.content { width:100%; height:1000px; background:#efefef; }
Unfortunately you are probably best off using absolute positioning for your fixed elements when working with IOS. Yes, IOS5 does claim to support fixed positioning, but it all falls down when you have interactive controls within that fixed element.
I had the same problem with the search box on my switchitoff.net site. In IOS5 the fixed header would jump down the page if the search box gained focus while the page was scrolled. I tried various workarounds, and the one I currently have is a <div> which sits over the search box. When this <div> is clicked the following occurs:
The page is scrolled to the top
The fixed header is changed to absolute
The <div> covering the search box is hidden
The search <input> is focused
The above steps are reversed when the search box loses focus. This solution prevents the header jumping down the page when the search box is clicked, but for a simpler site you are probably better using absolute positioning in the first place.
There is another tricky issue with IOS5 and fixed positioning. If you have clickable elements on your fixed area with body elements scrolled behind them, this can break your touch events.
For example, on switchitoff.net the buttons on the fixed header became unclickable when interactive elements were scrolled behind them. touchstart was not even being fired when these buttons where tapped. Luckily onClick still seemed to work, although this is always a last resort for IOS because of the delay.
Finally notice how (in IOS5) you can click on the fixed header and scroll the page. I know this emulates the way you can use the scroll wheel over a fixed header in a normal browser, but surely this paradigm doesn't make sense for a touch-UI?
Hopefully Apple will continue to refine the handling of fixed elements, but in the meantime it's easier to stick with absolute positioning if you have anything interactive in your fixed area. That or go back to IOS4 when things were so much easier!
Using the JohnW recomendation to use absolute instead of fixed I came up with this workaround:
First set up a bind to detect when the input is onFocus, scroll to the top of the page and change the element position to absolute:
$('#textinput').bind('focus',function(e) {
$('html,body').animate({
scrollTop: 0
});
$('#textinput-container').css('position','absolute');
$('#textinput-container').css('top','0px');
});
Note that I'm using the id textinput for the input and textinput-container for the div top bar that is containing the input.
Set up another bind to detect when the input is not on focus anymore to change the position of the div back to fixed
$('#textinput').bind('blur',function(e) {
$('#textinput-container').css('position','fixed');
$('#textinput-container').css('top','0px');
});
I've been using a similar solution for a bar fixed at the bottom of the page, the code posted should be working for a bar fixed at the top but I didn't test it
Modified version of pablobart's solution but without scrolling to top:
// Absolute position
$('#your-field').bind('focus',function(e) {
setTimeout(function(){
$('section#footer').css('position','absolute');
$('section#footer').css('top',($(window).scrollTop() + window.innerHeight) - $('section#footer').height());
}, 100);
});
// Back to fixed position
$('#your-field').bind('focusout',function(e) {
$('section#footer').removeAttr('style');
});
The simple CSS:
section#footer
*{ position:fixed; bottom:0; left:0; height:42px }*
This solution works pretty well for me. All the code does is wait until the user taps on a text field, then changes the element identified by the 'jQuerySelector' parameter from a 'fixed' to 'static' position. When the text field looses focus (the user tapped on something else) the element's position is changed back to 'fixed'.
// toggles the value of 'position' when the text field gains and looses focus
var togglePositionInResponseToInputFocus = function(jQuerySelector)
{
// find the input element in question
var element = jQuery(jQuerySelector);
// if we have the element
if (element) {
// get the current position value
var position = element.css('position');
// toggle the values from fixed to static, and vice versa
if (position == 'fixed') {
element.css('position', 'static');
} else if (position == 'static') {
element.css('position', 'fixed');
}
}
};
And the associated event handlers:
var that = this;
// called when text field gains focus
jQuery(that.textfieldSelector).on
(
'focusin',
function()
{
togglePositionInResponseToInputFocus(that.jQuerySelector);
}
);
// called when text field looses focus
jQuery(that.textfieldSelector).on
(
'focusout',
function()
{
togglePositionInResponseToInputFocus(that.jQuerySelector);
}
);
The reason the buttons are becoming unclickable is because they have actually scrolled invisibly with the content. They are still there, just not at the location they were originally, nor where you see them.
If you can guess how much the button has moved (based on how much the content has moved) you can click on the invisible button and it will function normally. In other words, if the content has scrolled by 50 pixels, click 50 pixels away from the button and it will work.
You can scroll the content manually (even by a tiny amount) and the buttons will again work as expected.
Just hide your fixed element on focus and then show it again on focusout. I bet your users don't need to see it when focused. I know this is not a solution but I think it is a better approach. Keep it simple.
I want to keep a jquery UI dialog in a fixed position (with respect to content) even if that means it opens outside the browser window. I'm able to control the positioning until the dialog hits the edge of the window, but there appears to be some kind of offset control that is keeping it from opening offscreen.
I'm successfully using this solution for the same issue with datepicker:
How to control positioning of jQueryUI datepicker
I wonder if a similar fix is possible for dialog (I tried the obvious change - replacing "datepicker" with "dialog" - doesn't work).
Many thanks.
I had the same challenge which I managed to fix by using Fixed CSS positioning. Initialize the dialog on page load (with autoOpen: false) and then when you want the dialog to be displayed:
$('#dialogContent').parent().css('position', 'Fixed').end().dialog('open');
add the following setting to the dialog.
dialogClass: "dialog-fixed"
in your css declare the class as follows.
.dialog-fixed
{
position:fixed !important;
}
that works for me... as per jquery 2.1.1 and jquery ui 1.11.2
Is there a way to move down by some pixel a div with a text inside? (Maybe using jQuery or w/e)
The effect I would get is like when stackoverflow shows at top the yellow message (for a badge) But I need it inside a page, without moving down all the rest of the page
EXAMPLE:
http://img690.imageshack.us/img690/7324/senzatitolo2mb.jpg
(I would add a fade effect too while the message is moving down)
Ps. Please consider the message can be more than 1 (just like stackoverflow at top)
with jQuery this would be done like:
<div id="message">Some message</div>
$("#message").slideDown(500); //where 500 is the time effect in miliseconds..
Online demo: http://jsfiddle.net/NzPfM/
Se more about jQuery effects here: http://api.jquery.com/category/effects/
If you want to slide it down and fade it in at the same time, then you should use .animate() instead, something like:
$("#message").animate({height:"30px", opacity:1 },500);
Online demo: http://jsfiddle.net/NzPfM/1/
UPDATE: If you want to avoid moving other content while animating you can use position:absolute in css see demo below:
Demo avoiding push down: http://jsfiddle.net/NzPfM/2/
You can set the div to position:absolute and then animate it down using jQuery.animate to change the top style.
read about jQuery.animate here: http://api.jquery.com/animate/
You can see a simple example here: http://jsfiddle.net/NsxTa/
Note: This method as opposed to using the slideDown will actually slide the entire div down from it's hiding place, where as slideDown will just reveal statically positioned content, which imo looks really awefull
Assuming that your page is not laying inside some container with position-absolute,
adding a container element as fist child of the body will push down render all the rest of the page.
(container - any HTML tag that contains HTML. usually DIV).
This is an example using pure javascript:
http://jsfiddle.net/osher/ByngB/
connect the "add" to your messaging event, or render the on the server
connect the "remove" to the close button of the message bar
and that will be all :)
function $e(s){ return document.getElementById(s) }
function add(){
var d = document.createElement("div");
d.innerHTML = "your message: " + $e("txt").value;
document.body.insertBefore(d, document.body.firstChild);
}
function remove(){
// assuming that your page content is wrapped in a div with ID="content"
if (document.body.firstChild.id == "content") return;
document.body.removeChild( document.body.firstChild);
}