Jump to content

Have a div dynamically resize depending on window size of browser


travd93

Recommended Posts

Hi All,

I posted a thread previously which was answered pretty well so thought I would try my luck again,

I am creating a logon page for my company, the logon page will be mostly used by mobiles and ipads so I have had to learn alot (imo) about mobile sites, so excuse me if I have failed in some respects haha.

 

The website below is my test site and what I am hoping to have achieved is to have the logon keypad dynamically shape depending on browser window, i.e a mobile is smaller than an ipad.

The goal then is to have the buttons also become larger and smaller. Is this even possible?

 

If it is not possible can someone let me know how I can actually make the keypad larger so at least it will look the part on an ipad.

 

Any help is appreciated, thanks.

 

http://mrt.guardian1.com.au:57005/test/patrols.html

Link to comment
Share on other sites

Thats great, thanks for your help again. Its these little CSS functions that I just dont know about that get me haha. I suppose thats why I'm not a real web dev.

I do however have a question still, how can I get the table to have a larger height, it just does not seem to be responding. The width 80% works but height does not, would changing this to a Div table help?

<body>       <div id="keypad" >         <label for="pin">Pin Number:</label>         <table style="width:80%; height:80%; margin:0 auto; border:1px solid black;">           <tr>             <td colspan="3"><input type="text"readonly size="3" id="d"></td>               </tr>           <tr>             <th><input type="button" value="1" onClick='v("1")'></th>             <th><input type="button" value="2" onClick='v("2")'></th>             <th><input type="button" value="3" onClick='v("3")'></th>               </tr>           <tr>             <td><input type="button" value="4" onClick='v("4")'></td>             <td><input type="button" value="5" onClick='v("5")'></td>             <td><input type="button" value="6" onClick='v("6")'></td>               </tr>           <tr>             <td><input type="button" value="7" onClick='v("7")'></td>             <td><input type="button" value="8" onClick='v("8")'></td>             <td><input type="button" value="9" onClick='v("9")'></td>               </tr>           <tr>             <td><input type="button" value="0" onClick='v("0")'></td>             <td colspan="2"><input type="button" value="Clear" onClick='c("")'></td>               </tr>             </table>           </div></body>

Please note that I have css all around this bad boy and if you want to see the real page click on the link in my OP

Edited by travd93
Link to comment
Share on other sites

Thanks but I figured it out,

Because i was using jquery mobile I needed to use the .ui-btn class to make any changed to the buttons.

I had tried the ages ago with no result but it was because the jquery was overwriting it.

	#keypad .ui-btn { 		height: 20px;		font-size: 35px; 		} 
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...