Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to override the minimum width of a button in Safari on iPad?

I have the following HTML-page:

<html>
<head><style>
  * { margin: 0; padding: 0; border: none; }
  button { width: 14px; background: #F00; }
</style></head>
<body>
  <button></button>
  <button></button>
  <button></button>
</body>
</html>

When I run this code in any desktop browser, it works perfectly; the buttons are 14 pixels wide. When I run this code in Safari on an iPad, the buttons are wider. Is there some minimum width for buttons? Can this width be overridden?

like image 594
Tommy Carlier Avatar asked Sep 23 '10 10:09

Tommy Carlier


People also ask

How do I get rid of the edit button on safari?

That button cannot be removed, as its used to give you options to customize the rest of the Start Page how you see fit. Take a look over tips here: Customize your Safari settings on iPhone.

How do I change my Safari homepage on IPAD?

1) Click Safari > Preferences from the top menu bar. 2) Choose the General tab. 3) In the box next to Homepage, enter the URL of the website you want. If you are currently on that site, just click the Set Current Page button.


2 Answers

Just now encountered the same problem. I did small trial/research which showed that font-size affects horizontal paddings (both left and right). So, to fix this - explicitly state padding: 0 or any other padding you require. iOS 11.2, iOS 10.3.3

like image 135
Ruslan Zaytsev Avatar answered Sep 28 '22 08:09

Ruslan Zaytsev


Answering my own question: apparently, the minimum width of <button> depends on the font size. So by setting the font size to 0, I can make the buttons smaller. I do realize that small buttons are not good when used on a touch-driven device like the iPad, so I'll probably create an alternate, more touch-friendly version of the UI.

like image 36
Tommy Carlier Avatar answered Sep 28 '22 06:09

Tommy Carlier