Using IOS 7.1.2 on Safari when I leave the focus on a input on my webpage and rotate my device from Horizontal to vertical, I see a black space on the right and the page is not displayed properly. Any solutions to this problem?

iOS Version: 7.1.2
Browser: Safari
I have a sample log-in page with two input fields and a submit button. When I focus on any of the input fields in landscape mode and rotate my phone and come to the portrait mode I see a weird black space towards the right of my page. Screenshots attached below:
My page code below:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <title>IOS Test</title>
    <style type="text/css">
        a, abbr, acronym, address, applet, article, aside, audio, b, blockquote, big, body, center, canvas, caption, cite, code, command, datalist, dd, del, details, dfn, dl, div, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, keygen, label, legend, li, meter, nav, object, ol, output, p, pre, progress, q, s, samp, section, small, span, source, strike, strong, sub, sup, table, tbody, tfoot, thead, th, tr, tdvideo, tt, u, ul, var
            background: transparent;
            border: 0 none;
            font-size: 100%;
            margin: 0;
            padding: 0;
            border: 0;
            outline: 0;
            vertical-align: top;
        ol, ul
            list-style: none;
        blockquote, q
            quotes: none;
        table, table td
            padding: 0;
            border: none;
            border-collapse: collapse;
        img
            vertical-align: top;
        embed
            vertical-align: top;
        article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video, div
            display: block;
        mark, rp, rt, ruby, summary, time
            display: inline;
        input, textarea
            border: 0;
            padding: 0;
            margin: 0;
            outline: 0;
        iframe
            border: 0;
            margin: 0;
            padding: 0;
        input, textarea, select
            margin: 0;
            padding: 0;
        body
            font-family: Arial, Myriad Pro, Trebuchet MS, sans-serif;
            font-size: 100%;
            background: #F5F5F5;
        a
            text-decoration: none;
        a:hover
            text-decoration: none;
        img, object, embed, video
            max-width: 100% !important;
        .clear
            display: block !important;
            width: 100% !important;
            clear: both !important;
        .body
            position: fixed;
            width: 100%;
            top: 0;
            left: 0;
            overflow-y: scroll;
            -ms-overflow-style: -ms-autohiding-scrollbar;
            -webkit-overflow-scrolling: touch;
            -ms-touch-action: pan-y;
            -ms-user-select: none;
            z-index: 0;
        .body > *
            -webkit-transform: translateZ(0px);
        .header
            background: #fff;
            text-align: center;
            border-bottom: #45A116 solid 8px;
            padding: 5% 10%;
        .content
            width: 70%;
            position: relative;
            margin: 20% auto 10% auto;
            text-align: center;
        .content input
            display: block;
            background: #E6E6E6;
            border-radius: 15px;
            border-bottom: #A8A8A8 solid 3px;
            margin-bottom: 5%;
            width: 96%;
            padding: 4% 2%;
            text-align: center;
            color: #595959;
        .content a
            display: inline-block;
            padding: 2% 10%;
            color: #fff;
            background: #45A116;
            margin-top: 5%;
            border-radius: 5px;
            border-bottom: #2C690E solid 3px;
            -webkit-transition: all 0.1s linear;
            -moz-transition: all 0.1s linear;
            -ms-transition: all 0.1s linear;
            -o-transition: all 0.1s linear;
        .content a:active
            background:#368011;
    </style>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function adjustBody() {
            var wh = $(window).height();
            $(".body").css({
                "height": wh + "px"
        $(document).ready(function () {
            adjustBody();
            $(window).resize(function () {
                adjustBody();
    </script>
</head>
<body>
    <div class="body">
        <div class="header">
            <img src="sampleImage.png" alt="Sample Logo" />
        </div>
        <form action="" method="get" id="sampleForm">
        <div class="content">
            <input type="email" value="User Name" onblur="if($(this)[0].value == ''){$(this)[0].value = 'User Name';}"
                onfocus="if($(this)[0].value != '' && $(this)[0].value == 'User Name'){$(this)[0].value = ''};" />
            <input type="password" value="Password" onblur="if($(this)[0].value == ''){$(this)[0].value = 'Password';}"
                onfocus="if($(this)[0].value != '' && $(this)[0].value == 'Password'){$(this)[0].value = ''};" />
            <a href="javascript:void(0);" onclick="$('#sampleForm').submit();">Login</a>
        </div>
        </form>
    </div>
</body>
</html>
Does anyone have any solutions to this problem?
Regards,
Mayank Tripathi

ALWAYS SAVE YOUR idevice USING ICLOUD !!!! IT SAVES ... ALL !! (includings apps data, but the apps themselves ! USE IT ! i done this...)

Similar Messages

HT1414 i am getting an error message saying unable to update as the firmware file is not compataible .Any solution to this problem

when i try to update iphone 4 i am getting message saying unable to update the firmware file was not compataible .
Any solution to this problem

If the problem is sending to just one address and it has worked in the past, I don't know if this will work. I posted this to another thread yesterday for someone who had the same problem you are having and it worked for them. You can take a look. This is thread that I found and the words below are the OP's suggested fix.
https://discussions.apple.com/thread/3048200?start=0&tstart=0
On the iphone i went Settings>Mail, contacts calanders>choose relevant account (if you have more than 1)> accountname>accountname> scroll down to 'Outgoing Mail server' and click on SMTP >click on your Primary Server >
My #Username and Password were showing 'Optional'. Filled them in with the correct details (email account login) and that fixed problem.

How im suppose to fix the auto shutdown problem in my iphone 3gs after updating to ios 5.1.1 this problem has made me a mobile ****** in my house and an loser in thing care so if any solution to this problem let me know

how im suppose to fix the auto shutdown problem in my iphone 3gs after updating to ios 5.1.1 this problem has made me a mobile ****** in my house and an loser in thing care so if any solution to this problem let me know

What "auto shutdown problem" are you talking about?

My two month old iphone lightning cable is corroded and not working. Any solutions to this apparently common problem on the horizon?

My two month old iPhone lightning cable is suddenly corroded and not working. Any solutions to this apparently common problem on the horizon?

You bought a used iPhone. Amazon is not an authorized supplier of iPhones, nor are any of the 3rd parties that sell iPhones there.
You can make an appointment at the genius bar and have it looked at.
If you are very very lucky, it is still under warranty and it wasn't opened or otherwise tampered with before you bought it. In which case, Apple will replace it under warranty.
If it's not under warranty, they will replace it for $199.
If it has been opened or tampered with, they won't touch it.

Page does not display properly in 3.0.4

If someone from apple reads these postings, the following page does not display properly in Safari 3.0.4 with mac os leopard.
I can not find an email to email directly to you.
http://bigten.cstv.com/sports/m-wrestl/spec-rel/021308aab.html

Hi
Welcome to Apple Discussions
Best way to reach Apple is to send a Bug Report via the Safari Menu>Report Bugs to Apple. While Apple doesn't respond directly to these notes, the information gets in the hands of Software Engineers at Cupertino.
Specific to the referenced site, there are multiple code errors, which would contribute to the rendering problem. Safari is a lot more specific about following correct code than other browsers. I suggest passing the Validation report on to the site developers. Good code practices (W3) makes for better uniformity and security on the Internet.

I bought my iphone 5 in Houston Texas May 15 2013 IMEI Nr. 013428009645399.The problem is that in the Greece the country which I live the 4G is not working.If you have any solution for this problem pls. let me know.My email is philcoueth@yahoo.gr Thank yo

I bought my iphone 5 in Houston on May 15 2013.
IMEI 013428009645399.The problem I have is that in the country
which I live GREECE the 4G is
not working.Please if you have any solution for this
problem let me know.My email is [email protected]
Thanking you in advance
Philip Couridis

iPhones purchased in the US are NOT guaranteed to work with 4G bands outside of North America.
For what crazy reason did you purchase an iPhone in the US if you live in Greece? If your phone needs servicing, it will have to be brought back to the US. You cannot get that phone serviced in Greece.

I HAVE IMAC 27 INCH MY MOUSE RIGHT CLICK IS NOT WORKING PROPERLY .ANY ONE HAVE HIS PROBLEM

I HAVE IMAC 27 INCH MY MOUSE RIGHT CLICK IS NOT WORKING PROPERLY .ANY ONE HAVE THIS PROBLEM

Have you tried going to System Preferences>Mouse and making sure that right click is set to secondary click?

Page will not display properly with inline Frames

I have a html page that will not display properly in Dreamweaver. I have a basic understanding of html and want to be able to edit a website in Dreamweaver that was given to me. It looks fine in a browser, but in Dreamweaver some of the content is missing and displays the following message, "Your browser does not support inline frames or is currently configured not to display inline Frames". I was able to open it without any problems using Microsoft Front Page, so is it possible to view and edit it in Dreamweaver?

Without seeing your page, I'm guessing that your page contains server-side includes, iframes and scripts to other files on the server that populate page with content on the server's end. You can't see it in DW because you don't have all the files in your DW local site folder. You said this views fine in FP. Was your page created in FP with FP proprietary tools?
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb

Pages are not displaying properly

Hi
I am using EP 7.0 SP 7.0. Some of the pages (like new ivew creartion page, Identity management page under User Administration etc.) are not displaying properly. The background is showing totally white and only the buttons and text are visible.
Though these pages were working fine before.
Is there any configuration change which is causing this?
Any suggestion ??????

Hi,
SAP recommends to use fully qualified domain names, when using the portal.
For example, to enter into the portal use "http://machine_name.company_name.com/irj/portal., instead of "http://machine_name/irj/portal".
Failing to do so may lead to inconsistency in communication on client side between the page and iViews.
Regards,
Srinivasan T
<b>helful answer=>points</b>

Images not displayed properly.Any advice on that?

Hi,
I found the following code inside the forum and i'm trying to understand it.
It appears to be a problem though. In particular the images(chess-pieces) are not displayed properly. The background of the gif images should be transparent but is not. Any advice?
Thanks
Here is the code:
import java.awt.*;
import javax.swing.*;
public class ChessBoard10 {
static final int PAWN = 0;
JFrame frame;
JComponent[][] checker;
public ChessBoard10() {
frame = new JFrame("CHESS GAME");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
Container con = frame.getContentPane();
con.setLayout(new GridLayout(8, 8));
checker = new JComponent[8][8];
for (int row = 0; row < 8; ++row) {
for (int col = 0; col < 8; ++col) {
JComponent p = new JPanel();
p.setBackground(setColor(row, col));
checker[row][col] = p;
con.add(p);
frame.setSize(500, 550);
frame.setVisible(true);
Color setColor(int y, int x) {
Color c;
if (y % 2 == 1) {
if (x % 2 == 1) {
c = Color.white;
} else {
c = Color.black;
} else {
if (x % 2 == 1) {
c = Color.black;
} else {
c = Color.white;
return c;
public void setPiece(Piece pc, int row, int col) {
JComponent p = checker[row - 1][col - 1];
//one base -> zero base conversion
if (p.getComponentCount() > 0) {
p.remove(0);
p.add(pc);
p.revalidate();
/*test*/
public static void main(String[] args) {
int Bpawn = 0,
Bbishop = 1,
Bking = 2,
Bknight = 3,
Bqueen = 4,
Brock = 5,
Wpawn = 6,
Wbishop = 7,
Wking = 8,
Wknight = 9,
Wqueen = 10,
Wrock = 11;
ChessBoard10 cb = new ChessBoard10();
for (int i = 1; i < 9; i++) {
cb.setPiece(new Piece(Bpawn), 2, i);
cb.setPiece(new Piece(Wpawn), 7, i);
cb.setPiece(new Piece(Bking), 1, 4);
cb.setPiece(new Piece(Bqueen), 1, 5);
cb.setPiece(new Piece(Bbishop), 1, 3);
cb.setPiece(new Piece(Bbishop), 1, 6);
cb.setPiece(new Piece(Bknight), 1, 2);
cb.setPiece(new Piece(Bknight), 1, 7);
cb.setPiece(new Piece(Brock), 1, 1);
cb.setPiece(new Piece(Brock), 1, 8);
cb.setPiece(new Piece(Wking), 8, 4);
cb.setPiece(new Piece(Wqueen), 8, 5);
cb.setPiece(new Piece(Wbishop), 8, 3);
cb.setPiece(new Piece(Wbishop), 8, 6);
cb.setPiece(new Piece(Wknight), 8, 2);
cb.setPiece(new Piece(Wknight), 8, 7);
cb.setPiece(new Piece(Wrock), 8, 1);
cb.setPiece(new Piece(Wrock), 8, 8);
class Piece extends JPanel {
String[] imgfile =
"Bpawn.gif",
"Bbishop.gif",
"Bking.gif",
"Bknight.gif",
"Bqueen.gif",
"Brock.gif",
"Wpawn.gif",
"Wbishop.gif",
"Wking.gif",
"Wknight.gif",
"Wqueen.gif",
"Wrock.gif" };
public Piece(int type) {
add(new JLabel(new ImageIcon(imgfile[type])));
}

Well, without actually testing the code which I most unfortunately can't do since my real computer is chrashed at the moment, try checking the
boolean Component.isOpaque();otherwise try using .png's instead altough it shouldn't matter.
This is just some general advices =(

TS1424 Every time I start up iTunes I get this error message. "A required iTunes component is not installed. Please repair or reinstall iTunes (-42404). I have researched this on Google and I have not read of any solution to this. Please advise.

Him
Every time I start up iTunes I get this error message. "A required iTunes component is not installed. Please repair or reinstall iTunes (-42404)." I have researched this on Google and I have not read of any solution. Please advise.

Here you go: http://support.apple.com/kb/HT1923
There are three steps so make sure you follow all of them. They are:
remove iTunes and everthing related to it
verify everything is really removed
reinstall iTunes.

Slideshow and Page do not display properly in Dreamweaver

I had a web designer redesign part of my website, www.mbpros.com. Specifically I had flash that was part of an include_top.htm page which appeared at the top of every page on my site...I wanted a slideshow so the developer designed a javascript slide show and placed it on each page of my site (as she said it didn't work when placed on the include_top.htm page). The site, when you view it, looks great with the slideshow.
I just downloaded the trial version of Dreamweaver (had been using Microsoft Expression) in order to make changes to my site. Some of the pages appear correctly..
HOWEVER, other pages have the old flash at the top when I view in Dreamweaver...even though the page is supposedly coded correctly AND even though the page looks correct (with the slideshow, not flash) when viewed live in a browser....see
ANY IDEAS WHAT I CAN DO? I'm not a web designer at all...and need to be able to use a program like Dreamweaver to easily make simple changes without requiring the use of a web designer.
Thanks,
Steve

Hello Steve
I may have misunderstood your question a littel and raced off and examined your site. What you are saying is that your pages in Dreamweaver look different to the web and you have some content that is from an old version of the site?
If that's the case, I'm wondering how you have set up the site in Dreamweaver? When you set up an individual site you should define a site. This helps dreamweaver manage various aspects of the site's structure. Did you do anything like that? Are you relying on an older copy of your site on your PC or did you install a completely fresh copy on your machine after the web designer's redesign?
One thing that I would try is to compare a page that does look ok with a page that does not. Identify the part of the page that doesn't look right and examine the two pages in code view to see if you can spot the difference.
Apart from that, the validation errors are a different thing. Your website is working and it looks pretty good and if that's your main concern that might be enough for you.
In the mean time, let's hope someone with a bit more clout can come up with some suggestions!
Martin

Add-On page will not display properly

Using Firefox 28.0 and when I go to the Get Add-On tabs the page does not render correctly. I basically get plain text and hyperlinks. The other tabs work fine. Same thing happens when I attempt to open https://addons.mozilla.org/en-US/firefox/ in the Firefox browser. If however I search for an Add-On the search result page renders correctly however whenever I attempt to install any add-on the downloading image comes up for a second then it says Error Downloading.
I have tried everything I can think of and have found in help forums. I even did a complete uninstall and reinstalled Firefox 28.0.
Any help would be appreciated!
Jake

Note that this issue can be caused by a wrong time or date setting on the computer.
Check the date and time in the clock on your computer: (double) click the clock icon on the Windows Taskbar.
*https://support.mozilla.org/kb/Secure+Connection+Failed

Page size not displaying properly for sub report

I created a landscape report in Visual Studio 2010 which contains sub reports. I had to change the layout of the main report back to portrait. The ruler on the main report updated itself to show the new page range. All of the sub reports updated as well except for one. I have one subreport where the ruler still displays like the report is in landscape mode. Is there a way to fix this? Is this a bug?

David -
I agree with your comment about being allowed to configure page setup in subreports. I don't know why users are allowed to do that.
I jumped to exporting the subreport because that is what Ludek suggested in the second post. In tried what he suggested in his last post but that will only export the main rpt, not the sub reports. According to him my only other option is to export the sub report via code. That seems like a lot of hassle. It sounds like I have to just put up with the inconvenience of looking at the rulers indicating that I have a landscape layout on one of my three subreports instead of seeing the correct portrait layout when I'm in the designer.
Also, I really wish there was a way to attach screenshots so you could see what I'm referring to, and how annoying this is. It still feels like a bug to me. Any suggestions on how I can report this other than via this forum would be appreciated.

Web pages are not displaying properly

pages are displaying text only, no graphics

If images are missing then check that you aren't blocking images from some domains.
*Press the F10 key or tap the Alt key to bring up the hidden "Menu Bar" temporarily.
*Check the permissions for the domain in the currently selected tab in "Tools > Page Info > Permissions"
*Check "Tools > Page Info > Media" for blocked images
*Select the first image link and use the cursor Down key to scroll through the list.
*If an image in the list is grayed and "<i>Block Images from...</i>" has a check-mark then remove this check-mark to unblock images from this domain.
Make sure that you do not block (third-party) images, the permissions.default.image pref on the <b>about:config</b> page should be 1.
Make sure that you haven't enabled a High Contrast theme in the Windows/Mac Accessibility settings.
Make sure that you allow pages to choose their own colors.
*Tools > Options > Content : Fonts & Colors > Colors : [X] "Allow pages to choose their own colors, instead of my selections above"
Note that these settings affect background images.
See also:
*http://kb.mozillazine.org/Website_colors_are_wrong
There are extensions like Adblock Plus (Firefox/Tools > Add-ons > Extensions) and security software (firewall, anti-virus) that can block images and other content.
See also:
*https://support.mozilla.org/kb/Troubleshooting+extensions+and+themes
*http://kb.mozillazine.org/Images_or_animations_do_not_load
*http://kb.mozillazine.org/Websites_look_wrong

Using IOS 7.1.2 on Safari when I leave the focus on a input on my webpage and rotate my device from Horizontal to vertical, I see a black space on the right and the page is not displayed properly. Any solutions to this problem?

Similar Messages

Maybe you are looking for