www.webdeveloper.com
Results 1 to 15 of 15

Thread: Text Fields not displaying properly on mobile but perfectly on desktop....

  1. #1
    Join Date
    May 2014
    Posts
    4

    Text Fields not displaying properly on mobile but perfectly on desktop....

    Hey there everyone,

    I'm new to the forum so pleas bare with me . I've recently taken over a project from a web developer that left a company and I've encountered a problem that I can't figure out how to fix.

    The site has a couple simple forms but the text areas for these form keep appearing longer on mobile than they do on a desktop PC. Here are screenshot showing the issue.

    Forms on desktop...

    http://i60.tinypic.com/8xjupx.png

    http://i58.tinypic.com/14pp8x.png

    Forms on mobile...

    http://i57.tinypic.com/2r5xnoy.png

    http://i62.tinypic.com/2my26pc.png

    All seems to be setup perfectly in CSS and the HTML files. Am potentially I missing something?

  2. #2
    Join Date
    Oct 2013
    Posts
    608
    You phoning doctor: Doc I don't feel so good.
    Doctor: What seems to be wrong?
    You: Well, I don't know. I poked and probed a bit. Things seem to be OK. Let me send you a selfie then gimme your best guess.
    Doctor: After viewing the photo you sent it appears you're sweating a bit. That indicates a fever. Looks like you have the flue. Drink plenty of liquids and get some bed rest.

    An hour later you're dead of a heart attack.
    ****

    Would you, or could you count on a doctor's diagnosis based on a photograph?
    Last edited by Kevin2; 05-20-2014 at 10:24 PM.

  3. #3
    Join Date
    May 2014
    Posts
    4
    Well I won't equate this to a heart attack. More of a mild rash. And most doctors can diagnosis rashes based on a photograph.

    But seriously, as I said initially, I'm new so I'm not entirely sure what's needed so bare with me.

    Should I post a link to the site?

  4. #4
    Join Date
    Dec 2002
    Location
    Seattle, WA
    Posts
    1,843
    Without seeing the actual code... I'm guessing the mobile browser is pushing the page around to fit it on the screen.
    Add this (to the head) and see if it fixes the issue
    Code:
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">

  5. #5
    Join Date
    Nov 2011
    Location
    Dallas, TX
    Posts
    370
    Your links go to a funky site that isn't showing any pics?
    "Life is unpredictable, eat dessert first."

  6. #6
    Join Date
    Oct 2013
    Posts
    608
    @Steve: The "Subscribe Today" form on those pages is actually a pic of the page in question. Kinda hard to tell with the very busy layout of those pic display pages.

    @Kes: a link would be good. Or post the page's HTML here. Of course if ShrineDesign's idea fixed the problem, well, not necessary

  7. #7
    Join Date
    May 2014
    Posts
    4
    Thanks a lot for the suggestion ShrineDesigns. Unfortunately, all it did was prevent the page from fitting the browser properly when accessed. The problems were still there.

    Here's a link to the site. Some of the code (like some CSS) needs to be migrated to the external file, but what's there so far seems correct to me. Might be missing something though.

    http://winwinmktservice.biz/index.html

  8. #8
    Setting aside the train wreck the rest of the site is, what with the illegible color contrasts, fixed width layout, design elements that cannot be made elastic, and absurdly undersized fixed metric (px) fonts... Much less the clearing DIV like it's still 2001 and endless pointless presentational use of classes thanks to bloated rubbish like jQuery, mootools and broken CSS methodology... Setting all that aside...

    Form elements do not... well... size consistently cross-browser. You are setting a fixed size on them that can't actually scale properly. Biggest problem is though you are trying to size them from the markup -- and that's so arbitrary across browsers you'll never get it right.

    A good first step would be to use ACTUAL semantic markup -- since labels and inputs aren't paragraphs, I don't think the form is a subsection of "Project Management Centre" so H3 is the wrong tag... so on and so forth. So step 1, let's drag that markup kicking and screaming into something well-formed and complete; swinging an axe at the garbage you don't need... maybe using some ID's that make sense instead of the gibberish and hard to follow "MERGE2" -- that don't even match the names?!? Get rid of the non-semantic use of STRONG... the NAME attribute on elements that shouldn't have a name like the input[submit]...

    So something like:
    Code:
    <form action="#" method="post" id="specialOffers">
    
    	<h2>Submit this form to get special offers...</h2>
    	
    	<fieldset>
    		<label for="SO_EMail">Email Address <b>*</b></label>			  
    		<div>
    			<input type="email" name="MERGE0" id="SO_EMail" />
    		</div>
    				  
    		<label for="SO_firstName">First Name <b>*</b></label>
    		<div>
    			<input type="text" name="MERGE1" id="SO_firstName" />
    		</div>
    		
    		<label for="SO_lastName">Last Name</label>
    		<div>
    			<input type="text" name="MERGE2" id="SO_lastName" />
    		</div>
    	</fieldset>
    						
    	<div class="submitsAndHiddens">
    		<input type="submit" class="submit" value="Subscribe to list" />
    		<input type="hidden" name="u" value="08e792fdf4717114b8b27d1d3" />
    		<input type="hidden" name="id" value="dd331035ce" />
    	</div>
    	
    </form>
    Styling the input inside those DIV is a matter of just setting a percentage width in the CSS and centering them with text-align. You'll never be able to get them to have a perfect side-to-side width without ANOTHER wrapping DIV in there, so I say just eye-ball that percentage. At narrower widths it might fall apart, but at that point I'd be stripping the formatting off that outer DIV anyways so it takes less screen space.

    Code:
    /* assumes a reset is in place nulling all padding and margins, and killing fieldset's border */
    #specialOffers {
    	max-width:24em;
    	margin:1em;
    	font:normal 100%/150% verdana,helvetica,sans-serif;
    }
    
    #specialOffers h2 {
    	margin-bottom:0.66em;
    	font:bold 150%/120% verdana,helvetica,sans-serif;
    	color:#920;
    }
    
    #specialOffers fieldset {
    	padding-bottom:0.25em;
    }
    
    #specialOffers fieldset div {
    	position:relative;
    	width:100%;
    	padding:0.5em 0;
    	margin-bottom:0.5em;
    	text-align:center;
    	border:1px solid #666;
    	background:#EEE;
    }
    
    #specialOffers label {
    	font-weight:bold;
    }
    
    #specialOffers label b {
    	color:#F00;
    }
    
    #specialOffers fieldset input {
    	width:90%;
    	padding:0.5em;
    	border:1px solid #999;
    }
    
    #specialOffers .submitsAndHiddens input {
    	padding:0.25em 1em;
    	color:#FFF;
    	background:#369;
    	border:0;
    	-webkit-border-radius:0.3em;
    	-moz-border-radius:0.3em;
    	border-radius:0.3em;
    }
    That's roughly how I'd go about it.

    Of course, this assumes an elastic layout with em's and percentage measurements, with the desire of the layout being at the very least semi-fluid... something you don't actually have which is why my advice would be to pitch that entire train wreck of inaccessible design in the trash, and start over with semantic markup, separation of presentation from content, and semi-fluid elastic responsive design. (yes, all THREE) -- as what you have right now is NOT an accessible design.

    ... and all those things I just listed are the stepping stones you should have climbed BEFORE making it responsive, since responsive is quite literally just the next step in accessible design.

  9. #9
    Oh, and they were broken here on desktop too -- which stands to reason since I'm a large fonts/120dpi user and you didn't take the elastic behavior of the input's default font size into account.

    *** side note *** I wish to hell when you set a INPUT to display:block it actually behaved like a block level element, but NO, that would be too easy. Shocking the only browser engine to actually treat form elements like normal elements is now effectively defunct.

  10. #10
    Ok, the more I think on it, the more the double-wrapper approach I think will fit your needs better. I'll use a span so we don't need any extra classes. You style the span, while stripping style off the input. Sounds weird, but a span can be sized in a consistent manner, something a input cannot do.

    Code:
    <form action="#" method="post" id="specialOffers">
    
    	<h2>Submit this form to get special offers...</h2>
    	
    	<fieldset>
    		<label for="SO_EMail">Email Address <b>*</b></label>			  
    		<div><span>
    			<input type="email" name="MERGE0" id="SO_EMail" />
    		</span></div>
    				  
    		<label for="SO_firstName">First Name <b>*</b></label>
    		<div><span>
    			<input type="text" name="MERGE1" id="SO_firstName" />
    		</span></div>
    		
    		<label for="SO_lastName">Last Name</label>
    		<div><span>
    			<input type="text" name="MERGE2" id="SO_lastName" />
    		</span></div>
    	</fieldset>
    						
    	<div class="submitsAndHiddens">
    		<input type="submit" class="submit" value="Subscribe to list" />
    		<input type="hidden" name="u" value="08e792fdf4717114b8b27d1d3" />
    		<input type="hidden" name="id" value="dd331035ce" />
    	</div>
    	
    </form>
    Code:
    #specialOffers {
    	max-width:24em;
    	margin:1em;
    	font:normal 100%/150% verdana,helvetica,sans-serif;
    }
    
    #specialOffers h2 {
    	margin-bottom:0.66em;
    	font:bold 150%/120% verdana,helvetica,sans-serif;
    	color:#920;
    }
    
    #specialOffers fieldset {
    	padding-bottom:0.25em;
    }
    
    #specialOffers label {
    	font-weight:bold;
    }
    
    #specialOffers label b {
    	color:#F00;
    }
    
    #specialOffers fieldset div {
    	padding:0.5em;
    	margin-bottom:0.5em;
    	text-align:center;
    	border:1px solid #666;
    	background:#EEE;
    }
    
    #specialOffers fieldset span {
    	display:block;
    	position:relative;
    	padding:0.25em 0.5em;
    	background:#FFF;
    	border:1px solid #999;
    }
    
    #specialOffers input:focus {
    	outline:none;
    }
    
    #specialOffers fieldset input {
    	width:100%;
    	padding:0;
    	border:0;
    }
    
    #specialOffers .submitsAndHiddens input {
    	padding:0.25em 1em;
    	color:#FFF;
    	background:#369;
    	border:0;
    	-webkit-border-radius:0.3em;
    	-moz-border-radius:0.3em;
    	border-radius:0.3em;
    }
    I added the outline override because webkit/blink's default behavior looks really stupid when we're using SPAN for the border instead of the INPUT itself. It's a sneaky trick, but it works... all the way back to IE 5.5 if need be.

    I put a live demo of this up here:
    http://www.cutcodedown.com/for_others/kes/template.html

    As with all my demo's the directory:
    http://www.cutcodedown.com/for_others/kes

    Is unlocked for easy access to the gooey bits and pieces. In the CSS you can see the reset I use, as well as the generic elastic starting point.

    Should fluid width to anything you want to put it inside of -- even if you're going to keep the crappy fixed width layout, designing fluid inside the fixed width is usually easier -- ESPECIALLY if you're going to start throwing media queries at it to make it responsive as, well... fluid means it can adjust to your responsive breakpoints automatically.

    Hope this helps.

  11. #11
    Join Date
    Oct 2013
    Posts
    608
    So it was a heart attack and not a skin rash

  12. #12
    Quote Originally Posted by Kevin2 View Post
    So it was a heart attack and not a skin rash
    Pretty much, which is why if that was my project, I'd toss the entire site and start over from scratch. It's filled with "not viable for web deployment" concepts if you actually care about accessibility.

  13. #13
    Join Date
    May 2014
    Posts
    4
    Such brutal honesty . And I love it . Thanks for the detailed explanation deathshadow.

    Yeah, I'm aware that a number of elements in the site is archaic and poorly done, and numerous times I've considered re-doing the entire thing, but the owner of the business has no intention of paying to have the site redone after forking out the cash to have the last dev do what he did.

    And, against everything I've told them, they insist on keeping the horrendous color scheme, siting that it's the "official" color scheme they're using for future projects. *sigh* So there's only so much I can do at this time. Needless to say, I've a lot of work ahead of me to get things up-to-snuff.

    I'll go through everything you suggested later tonight and update the thread accordingly. Thanks again.

  14. #14
    Quote Originally Posted by Kes View Post
    but the owner of the business has no intention of paying to have the site redone after forking out the cash to have the last dev do what he did.
    People who know nothing about websites do get a bit shy about opening up the wallet after someone ripped them off. You just have to explain to them the last guy ripped them off, and explain HOW they did so.

  15. #15
    Join Date
    May 2014
    Location
    bangalore
    Posts
    39
    add this meta link in the header position

    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">



    and then add given css code into your stylesheet


    @media only screen and (max-width: 320px)
    {

    <!--CSS form styles -->
    }



    here removing the CSS form style and add the form elements styles.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles