in one of our grails appln we are printing some of the stuffs from jquery ui tabs. After applying grails ui-performance plugin I could not print the contents of all the tabs available in the webpage. Only the selected tab is being printed. We are using a "print.css" to print the contents of the page. Moreover in Dev mode I could print the tab contents as I wish...any pointer to solve this problem using a single 'print.css' will be highly appreciated. --- SiQH
Yes, you can use:
.ui-tabs-nav { display: none; }
.ui-tabs .ui-tabs-hide { display: block !important; }
in your print.css. It's not perfect, because you don't get the tab caption as a title.
I ran across this problem before and the best solution is use
#media print { .ui-tabs-nav {display:none !important;}
The print print preview will still only show the active tab but when its sent to the printer all the tabs will print.
Related
I have a panel with a scrollable content. It works fine in every browser & device except for iPad (no matter what browser I use on the iPad).
I have a panel-container and a panel-slide
.panel-container {
position: relative;
width:100%;
height:100%;
z-index:1;
}
.panel-slide {
width:90%;
height: 90%;
display:block;
position: absolute;
z-index: 2;
background-color: white;
overflow-y: scroll;
overflow-x: hidden;
}
The panel-slide contains a lot of content, so I get the scroll bar. However I can't scroll on iPad.
I have googled the problem and have tried the -webkit-overflow-scrolling: touch, but I can't seem to get to the bottom of it.
What is there to do?
I don't know if this will be helpful, but I had a similar issue, and this is how I resolved it.
My issue:
My page has a popup element that gets populated by AJAX with a list of clickable links. When this element is pre-populated with the rest of the page (some pages required the list to be visible from initial page load), it worked fine. But, when I opened the element and populated the list, as mentioned above, using AJAX, the list would not scroll on iOS.
The problem, as far as I could tell:
In the interim between clicking the button to open the list and when the server responded with the populated list, I had the element show some simple text saying "Loading...". I found that when this was removed, and the element was already populated from the page load, it would work fine. It seemed that as long as there were already contents in the list with a height greater than the containing element, it would be scroll-able when the list populated.
My resolution:
What I did was to take the simple text in the interim from "Loading..." and to wrap it in a div that would prompt scrolling, like such: "<div style='height:1000px;'>Loading...</div>", and that seemed to work for me.
Again, I hope that this can help someone, or if not then perhaps someone with a little more skill than myself may be able to tell us why this might have worked.
There are no scrollbars in any of the iPhone OS. Use 2 fingers to scroll. They use gestures and not mouse scrolls so you are unable to achieve this without hacks.
It maybe worth looking at http://iscrolljs.com/
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.
I'm using the :focus state to show content, when the parent element has focus. Like so:
.child { display: none; }
.parent:focus .child { display: block; }
Note that the parent element has tabindex="0" set. Is there a way to get this to work in iOS browsers? I'm asking to see if a CSS-only solution is possible, no javascript please.
I've set up a reduced test case fiddle here: http://jsfiddle.net/E8zCU/
An answer that worked for me for a similar problem is here.
As the poster in that thread said, you just have to add
<body ontouchstart="">
to the top of your html code.
In my phonegap application I have a page that contains form elements. The problem is that when I navigate from home page to this page (form page) a white screen appears and then the form page appears. This screen occurs only once, when I open the form page after launching the app. This problem happens only for the form page, since the other pages in the application are showed directly.
I have set all transitions to none in my app, and tried to use fastclick, but nothing worked for me! How can I solve this problem?
Any help would be greatly appreciated.
Home page .js
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady ()
{
setTimeout(function(){ navigator.splashscreen.hide();} ,3000);
$('#GoToForm_BTN').on('click', function(){
$(this).attr('href','formPage.html');
} );
I have used this code in my css file but the problem remains
.ui-page {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
}
a, input, button {
-ms-touch-action: none !important;
}
*{
-webkit-transform: translateZ(0);
-webkit-transform:translate3d(0,0,0);
}
Without seeing any code it is difficult to locate the exact problem, if indeed there is a one. I believe that the problem can be located at the loading time of your application. If it is a multipage application (one html file), and depending on the size of the DOM tree created, it is natural that you are seeing this white screen. The DOM hasn't been fully loaded so you see a blank screen. The best thing you can do is to show a loading image when your application launches, and remove it when the page is ready.
I am working with a grails app, and would like to use a modal grails UI dialog box to hold my loading image. I would then control the closing of the box from JavaScript when my event returns (or a timeout happens). I am already using Grails UI dialog box on the page, so I thought I would do this with another dialog box that holds the loading image. Is it possible to have a Grails UI dialog box without buttons at the bottom?
I went the route of using CSS to hide the close container and footer dialog. Given that my dialog had an id of loading; adding the following CSS keeps the user from having a way to close the dialog:
#loading.yui-panel .container-close {
background-image: none;
visibility: hidden;
}
#loading div.ft {
display: none;
}