HTML and iPad

[jimpyle48]

I wrote a player aid for a board game using html and javascript. Works fine on Window based machines and MacBook but not on iPad. Is there an easy fix or a site to let me know how to get it to work on iPads?

 

Thanks!

 

Jim

[davej]

What doesn't work?

[jimpyle48]

I have some buttons in the window and they appear fine with MacBook and Windows but they only appear about 10% of the proper height on an iPad so you can't read the text in the buttons.

[davej]

How did you size/style the buttons?

[Ingolme]

I think this is due to iPad using the operating system's default button style.

 

You can force the button to not do that using -webkit-appearance: none on its CSS.

[jimpyle48]

I tried the -webkit -appearance from above but it didn't work. I may well have not entered it correctly.

 

Here's a sample of the html code:

 

<div id="button_win">
<button onclick="throwdice(), upTime(), cardRoll()"><img src="Graphics/CardButton.png"></button>
<button onclick="playerCont()"><img src="Graphics/PlayerControl.png"></button>
<button onclick="throwdice(), playerIdent()"><img src="Graphics/PlayerIdent.png"></button>
<button onclick="throwdice(), cornerIdent()"><img src="Graphics/PlayerIdentCorner.png"></button>
</br>

 

And in the css I have:

 

div#button_win{
background-image:url("Graphics/Table-Window-300.png");
background-repeat:no-repeat;
background-size:100% 100%;
width: 50%;
float: left;
-webkit-appearance: none;
}

 

Any suggestions?

 

Thanks in advance.

 

Jim

[Ingolme]

This:

div#button_win button {
-webkit-appearance: none;
}

 

But those buttons seem redundant, just put the onclick handlers on the <img> tags themselves and remove the buttons.