Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Sep 2010
    Posts
    460
    Thanks
    214
    Thanked 1 Time in 1 Post

    Button and screen resizing/iphone issues

    Hi,

    I have buttons all over my web page and they display fine on a full screen laptop or even a notepad. My problem occurs both on the iphone and when I reduce the size of my screen/browser.

    If I have as an example:
    Code:
    <div class="float" width="50%">
    <input type="button" value="Round the Ragged Rock the Ragged Rascal Ran" />
    </div>
    
    <div class="float" width="50%">
    <input type="button" value="Peter Piper" />
    </div>
    So the idea is these two divs float beside each other each with a button in both with relatively long content (but not always). Or the second div has something like a map in it, width set as a percentage - I have this problem a lot so there are many examples.

    Now in full screen the layout works fine both divs take up the correct 50% of the screen. But if I reduce the screen size so that "Round the Ragged Rock the Ragged Rascal Ran" is actually longer than 50% of the screen, or this is viewed on the iphone then the div takes its width as the length of the button and pushes whatever is in the second div (the one on the right) aside completely messing up the layout.

    I have tried doing things like:
    Code:
    button{
    width:80%;
    font-size:80%;
    }
    But that doesn't make a difference.

    Is there a solution to this? What I think I want is the button and font-size to decrease in proportion to the screen size.

    Or do I need to create a div instead of a button which I can add something like the onclick function to?

    I'm happy to provide my code if required, but stripped it down to just a button and I still ended up with the same problem, so I think it is to do with the button input type itself - I would love to be corrected on this.

  • #2
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I can't replicate this,the code below looks as it should on an iphone 4 running ios 4.3.2 and the latest Firefox and Safari when resized.

    PHP Code:
    <!DOCTYPE html>
    <
    html>
    <
    head>
        <
    meta charset="utf-8">
        <
    meta name="viewport" content="width=device-width" />
        <
    style type="text/css">
            
    div {
                
    floatleft;
                
    width50%;
                
    background#eee;
                
    outline1px solid #000;
            
    }
        </
    style>
    </
    head>
    <
    body>
        <
    div><input type="button" value="Round the Ragged Rock the Ragged Rascal Ran" /></div>
        <
    div><input type="button" value="Short" /></div>
    </
    body>
    </
    html

  • #3
    Regular Coder
    Join Date
    Sep 2010
    Posts
    460
    Thanks
    214
    Thanked 1 Time in 1 Post
    If anyone is having the same problem I changed font-size to font-size:smaller, it helps but it isn't a fix.


  •  

    Posting Permissions

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