I'm making an simple mobile web page and i put the textinput on the page and many elements also.
so to see bottom element, the scrolling needed. but when i scrolled my page, i found my textinput moving together abnormally.
below image is that i captured when the error occurred in my android web browser.
first one is original textinput and green box is error occurred.
please let me know how to fix it..
self answer.
It is occurred cause it's content height.
I fixed it by change content height: auto; in css :)
Related
Please checkout the images below.
This is showing the right animations and styles of input with red underlined border.
But most of the times this stying is not being rendered and also the placeholder does not hide when entering an input. To see the behavior check this image.
you can see this live here at www.classroom.icoachu.us
The site is being developed in Angular material https://material.angularjs.org/latest/
I am unable to figure out the possible cause of this behavior.
It's not an angular issue. I get a 500 server error for http://classroom.icoachu.us/favicon.ico, so the side stops rendering and produces the second image.
I have a site which uses a different menu for mobile devices than on the Desktop version using media queries. If I resize a desktop browser window to a mobile width and click the mobile navigation dropdown button and then resize the window back to desktop size, the mobile menu remains visible instead of changing back to display:none. Unfortunately this site is still in staging so I cannot show you a live example, but I was hoping someone could point me in the right direction of getting that DIV to become hidden again once the window is resized back to full screen.
Also, I realize that the chances of this scenario playing out in the real world are slim, but the client would like for it to be addressed anyway.
Thanks!
I figured out that it was javascript that was showing the DIV in the first place, not a media query, so I just added display:none to the div for the Desktop media query and the issue has gone away. Thanks!
This is a problem that seems to have occurred for no reason. Everything was working fine, and now all of a sudden the overlay iframe for the admin interface renders too high so that any tabs are rendered underneath the toolbar. I hadn't edited any css or html so I don't see how I could have done this. Has anyone seen this happen, and how did they fix it? I'm attaching two images. One shows the site as it is (incorrectly). The other shows another similar site that is functioning correctly. Also, notice on the incorrect display, somehow the toolbar is showing OVER the browser scrollbar.
The problem is that I was swapping in JQuery 1.8.3 with hook_js_alter. This has a known problem causing this exact issue. I didn't need a later version of JQuery after all so I removed that, and it fixed the problem.
I'm creating a web app exclusively for the iPad/mobile-Safari. The homepage is a run-of-the-mill HTML/CSS page with 3 main sections. But once you click on either of the 3 main buttons, you are directed to a page constructed with 2 iFrames (one on top for Nav, one on bottom for Content)
The problem was that before either of these 3 pages loaded there was a quick flash of white color and then the page loaded. I tried hiding the visibility style of the iframe and then onLoad change it to 'visible' and that worked. But it worked only once, when the iFrame-constructed page first loads. Once it loads and I click on a link on that page, the white flash is back because the iFrame has loaded already so it's already visible.
I tried the obvious like adding a css style to the iframe with a background color (also tried an inline style) but the same thing happened. Any ideas on how to solve it? Thanks!
You can do this cheat:
<iframe src="..." style="visibility:hidden;" onload="this.style.visibility='visible';"></iframe>
In the content, you can catch all link and form:
document.getElementsByTagName("a").addEventListener("click", function(e){
window.top.document.getElementsByTagName("iframe")[0].style.visibility = "hidden";
});
Explain:
First time, your iframe is hidden, and you can see the background of your main page (not white of iframe)
After loaded, Javascript will make iframe is visible and you can see content and background of iframe.
When click a link inside iframe, a trigger will fire, and Javascript will hide iframe again.
I met that problem, and that a whole day to trying to fix, but I cannot except above way. You can meet that issue on Chrome, Firefox, and other browsers, not just on Safari Mobile.
I think the same with KimKha. But "visibility" does not work well sometimes, so I think using "opacity" is better.
<iframe src="..." style="opacity:0;" onload="this.style.opacity=1;"></iframe>
I came across this issue, found lots of solution like KimKha mentions..
None of the solutions assist in further page transitions in the iframe and hiding it really is not a good solution.
With lots of trail and error I came up with the following which fixed my IOS webkit iFrame transition white flash issue, ironically it's such a simple solution:
Just add this to your CSS
html{background:#000}
change the colour to your desired color.
It looks like what the ultimate issue with IOS webkit is when your iframe calls another page, IOS removes the body from the current page for a split second before rendering the content from the new page. by forcing the HTML to have the background colour (default will naturally be white) this fixes the white flicker.
Also note that if your server is set to not allow caching of the .css file providing the styles then you will always get the flicker.
In apache to ensure caching look at
ExpiresByType text/css "access plus 30 days"
I'm having a problem with IE7 when clicking on images that open up using the Lightbox 2 javascript image viewer. Instead of overlaying the image on the current page it opens the image into a separate page.
Not sure if this is an AJAX problem possibly ? Works fine in Firefox.
Anybody else come across this before ?
Your page is performing the fall-back behaviour you would expect in the following scenarios...
JavaScript is disabled
There is an error in the JavaScript that is creating the lightbox effect (look out for a very brief flash of the yellow error icon before the next page loads - or fire up some dev tools)
There is a JavaScript error on the page before the image is clicked, which has stopped execution of JavaScript on the page (look out for the yellow error icon in the status bar again!)
The only thing I can think of is that I have google toolbar amd McAfee security installed that may be blocking the overlay (????) but don't think that should make any difference.