I have Ajax file upload control on an aspx page. The drag and drop zone of the control is visible on Chrome and mozilla but not on IE10. I understand that it should be visible on browsers which support HTML5 and CSS3. I believe IE10 has the support.
I went through the CSS and found this difference
<div class="ajax__fileupload_dropzone" id="ctl00_Mainform_AjaxFileUpload_Html5DropZone" style="width: 100%; height: 60px; visibility: visible;">Drop files here</div> (In Chrome)
<div class="ajax__fileupload_dropzone" id="ctl00_Mainform_AjaxFileUpload_Html5DropZone" style="width: 100%; height: 60px; display: none; visibility: hidden;"/> (In IE10)
In case of IE10, The display is set to none and visibility to hidden.
My question specifically is
At what point is this browser specific css rendered? so that I could get to why this is happening even when there is support for HTML5 and CSS3
I believe I cannot change this property in my code as it would be overwritten again in case of IE10.
EDIT:
I did try to edit the css by setting display to "block" and visibility to "visible". But this creates a disproportionate view with scroll bars which is not an ideal solution in my case
catch it with jquery.
// let the dropzone load first
setTimeout(function () {
$('.ajax__fileupload_dropzone').text('Drag Drop/Click');
if ($.browser.msie) {
$('.ajax__fileupload_dropzone').css({'visibility': 'visible','display':''});
}
}, 10);
this got it to show but it would not work right. I updated the toolkit from 15.1.2.0 to 15.1.3.0 and this seems to fix the problem. The odd thing is the night before I had no problems with IE.
Related
I'm creating a site using Angular 2, I successfully included a Google Form inside using an iFrame. It's working perfectly on every browser I tested (Firefox, Opera, Chrome) on my laptop (linux) and on my phone (android).
However, it's not working on iOS. The iframe is diplayed and can be scrolled (screenshot) but it's too large for the screen, it's not responsive at all. Here is what it looks like on my tablet (android).
I tried fixing it by looking at a dozen stackoverflow answers, but so far I've only managed to make the iframe scrollable by adding the last line of CSS. It's been a month now that I'm stuck with the iframe like this and I'm becoming a bit desperate!
Setting the width of the iframe manually to an absolute value has no effect on iOS (but it does have one on my phone).
This is the CSS of the div that contains the iframe:
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
width: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
and this is the CSS of the iframe itself:
max-width: 100%;
min-width: 100%;
height: 100%;
Here is the HTML part containing the iframe:
<div class="frame-flex">
<iframe src="https://docs.google.com/forms/whatever/viewform?embedded=true" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
</div>
I must add that I'm a beginner in HTML/CSS (in case you're wondering why the CSS is ugly). Thanks for your time anyway!
PROBLEM:
Google is aware of google forms not being responsive on IOS: https://productforums.google.com/forum/#!topic/docs/8UG9CQmgzY0
Essentially, the embedded google form works fine on desktop but has no scrolling options on mobile. On my IOS 9 tests on ipad, Safari would also crash. Bootstrap4 and Angular tests I conducted found that embedded iframe google forms were also non responsive and no scroll bar.
WORKAROUND:
You can still use the following on IOS if your web page does not use ONE OF THE FRAMEWORKS ABOVE (this also allows for a top navigation bar):
<style>
#all{
width:100%;
height: 100%;
float:none;
text-align:center;
}
</style>
<div id="all">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSf-TDDGGzhgIpQLSfwA7QGFQLSf9IpQLSf/viewform" frameborder="0" marginheight="0" marginwidth="0" ></iframe>
</div>
FINALLY (though not directly related to google forms): Check these stackoverflow links:
how to properly display an iFrame in mobile safari
How to get an IFrame to be responsive in iOS Safari?
I am experiencing an issue with <table> elements in Safari on iOS. I want to change a table to display:block; but I cannot seem to change it away from display: table;. I can debug it on a macbook pro I have and inspect the elements and the strange thing is, on a different site of mine I have a <table> that is display: block; and I can't change it, but then I have a different <table> (the one I would like to change) that is display: table; and I cannot get the style to override with display: block;. I have tried normal ways of overriding the css such as !important and it seems as though it should catch, but in the computed tab in Safari, it still will only show display: table;. I know that changing the <table> to display:block; will correct my issue, because my other table works correctly.
Does anyone have any experience with Safari overriding styles and what might be preventing me from changing the display property of the table?
Unfortunately, since the issue only occurs in iOS Safari (not in Chrome emulation), it is difficult for me to link to an example here.
In case anyone is interested - I tracked down this issue to be related to the -webkit safari uses.
It was broken and overriding my styles because the <!DOCTYPE html> was not corrected set on my html page.
This was due to a <script> tag that was located outside of my html and above the <!DOCTYPE html> declaration. Moving the <script> tag inside my html fixed the issue.
I am making a hybrid app, in which I have a left panel. On opening the left panel my page turns black. I am facing this problem only in windows phone 8. Panels work properly on android devices. Is there a problem with Windows support for jQuery Mobile?
I have an image for the menu button. onclick event of this image i have called a javascript function. the javascript function is as follows
<img src="images/leftnav_icon.png" id="leftnavImage" onclick="OpenLeftPanel()"/>
function OpenLeftPanel() {
$('#myPanel ul').listview();
$('#myPanel ul').listview('refresh');
$("#myPanel").panel("open");
}
How about just opening the panel th default way like described in the docs
<a href="#[your_panel_id]" data-rel="panel">
<img src="..." />
</a>
The data-rel should be optional. To run your listview-foo, bind to panelbeforeopen and run your stuff then (described on the same link as above).
Thank you all for your help. I got this problem solved. I just added a footer to all my pages and the left panel works fine now! CSS for footer is
#yourFooterId{
position: absolute;
bottom: 0px;
width: 100%;
height: 1px;
opacity: 0;
}
I've been given a design to implement which has a lightbox which has some content inside which includes links. This is all fine and working except for when it comes to iOS where it's not possible to interact with the content of a lightbox if its position happens to be on top of a video.
It's acting as though the video is on top of the lightbox content - even though it's behind. The issue occurs even with extremely simple barebones HTML.
Stripped back HTML:
<video id="home_video" controls preload="none" poster="http://www.videojs.com/img/poster.jpg" width="500">
<!-- video sources -->
</video>
<!-- positioned over the video -->
<div id="lightbox">
Not touchable on iOS
Touchable because it's not over a video
</div>
Associated stripped back styling:
#lightbox {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.5);
}
#lightbox > a {
display: inline-block;
background: red;
padding: 20px;
}
#touchable {
margin-top: 400px; /* taller than video */
}
I've put together a jsfiddle example. It includes some JS which alerts when you've successfully clicked/touched a link. On desktop browsers it's possible to click both links, on iOS it's only possible to click the second.
It might be worth noting that the issue occurs whether the lightbox is pre-opened on page, or after being explicitly opened as in this jsfiddle
I can think of a number of ways of hacking around the problem - such as moving the video off screen, replacing it with its poster image, or by transforming the video using translateX to hide it, but I'd prefer to leave the video where it is, if possible.
Has anyone stumbled across this issue before and found a solution? Any pointers?
This is a quirk of Mobile Safari, where it intercepts all touch/click events for elements on top of a video element, regardless of z-index or DOM order, only when the controls attribute is set.
So the solution is to remove the controls attribute and implement your own custom controls wit Javascript. You can use existing open source players to provide these controls for you (e.g. jPlayer, videojs, etc.), but you need to be careful because some of them have a special case for iOS where they will just use the native player controls. I think this is because it's simpler than making those mouse-centric controls work with the quirks of iOS (like touch and lack of volume control). So you need to check the documentation to see if there's a flag to force the player to use its own controls rather than the built-in ones.
I have attached two pictures, the first shows the "desktop" of the webapp I work on, some of the icons you see open dialogs made of a <div/> containing an <iframe/>, but while on a normal pc it all works properly, on the iPad it seems there is a problem with the z-index of some elements, as shown in second picture.
The small red rounds with number inside are defined as follows:
.countComunicazioni {
position: relative;
background: url(/images/admin/menu_sgs/counter.gif) no-repeat center center;
height: 35px;
width: 35px;
color: #FFF;
top: -105px;
left: 120px;
z-index: 0;
font-weight: bold;
display: none;
}
.countComunicazioni p {
margin-top: -5px;
padding-top: 10px;
}
The markup is a <div class="countComunicazioni"/> tag and a <p/> tag inside.
I also noticed that now the problem also appears in Google Chrome V22, the numbers in red circles are always on top even if they have z-index == 0 and the dialogs have z-index > 1000.
As per this bug report ( http://code.google.com/p/chromium/issues/detail?id=144518 ), the change seems to be intended, even if I would bet it'll broke many layouts, not only ours.
This problem was not present in previous versions of Google Chrome, nor is present on Firefox V15 or Internet Explorer V9, where everything is rendered problem.
How can this problem be solved? I'm no CSS expert, so I must admit I have tried little, if anything, so far... And also, who is "right" here? Is our markup incorrect, or does the problem lie in google chrome new rendering strategy?
EDIT
It seems I've been able to solve the issue shown in the two pics: all the dialogs generated from my web app are placed inside a <div/> with position:fixed placed on the very top of the body, now I tried to move the div to the very bottom of the page, and the layout seems now correct.
There is one more problem though: when opening a modal dialog, the opaque layer that is supposed to be created between the dialog and the below content, is actually created above it, see new screenshot.
How could this problem be solved? Does it require modifying our javascript or is it an issue with jquery ui itself?
Just found out myself that the way that chrome 22+ handles z-index has been altered.
Check out this awesome explanation here that I didn't write here...
http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-position-fixed-elements
Basically the way I understand it is that elements which have
position: fixed
now get counted with their own z-index layer so you'll have to adjust your pages accordingly to suit.
Hope that helps!