SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    24
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Responsive Web Form

    I am dealing with an issue with aligning an input field and a submit button horizontally. Out of the box it works fine but I don't like the height being too narrow. So I tweaked the two input tags to have more padding but that's where the issue begins. Here's a link to the problem: link

    Scroll down to the bottom and you will see two examples. The first example (A) looks fine on all devices and browsers but the second one does not. The height for each input field of example (B) differs in height. The input entry field is smaller in height than the 'Go' button for desktop using Firefox. However, it's the opposite when viewed on android devices.

    Is there a trick to get it to align correctly both having the exact same height? I have also Googled this to find this kind of example but I have yet to find any.

    Thank you for your time.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,175
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    You could play around with table display. For example, something like this:

    Code:
    form div {display: table; width: 100%;}
    
    form div input {margin: 0; float: none; display: table-cell; padding: 5px;}

  3. #3
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    24
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You could play around with table display. For example, something like this:

    Code:
    form div {display: table; width: 100%;}
    
    form div input {margin: 0; float: none; display: table-cell; padding: 5px;}
    Thank you. That made a great improvement. I still get a 2px difference on desktop but it seems to be good for mobile devices.

  4. #4
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    24
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you. That seems to help a lot. Desktop seems to have 1px at top and bottom difference. Mobile devices seems fine. You can check the same link to see the results.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,175
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by newseed View Post
    You can check the same link to see the results.
    Are you sure the page has been updated? I don't see ay changes.


Bookmarks

Posting Permissions

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