Anthony Johnston Anthony Johnston - 2 months ago 22
CSS Question

100% height button/label/input in a table cell iOS safari

I can't find a way to do this

There seems to be padding placed above and below the element, although I have set it zero

https://plnkr.co/edit/WvEqNCxEcLY5yS1IT738?p=preview

<div>
<button>hello</button>
</div>

<table><tr><td>
<button>hiya</button>
</td></tr></table>

td,
div{
padding: 0;
height: 10em;
border: solid;
}

button {
height: 100%;
width:100%;
border:solid 10px #f00;
}


I don't want to use absolute position as the contents vary, and JS would be an overhead I couldn't live with!

Is there a known bug here? Would anyone have a link to it so I can watch it not get fixed for years and drives me to a stress related end

Thanks in advance

ios pic

enter image description here

chrome on win 10 (desired result)

enter image description here

18C 18C
Answer Source

Thebutton, input, textarea, img, video, audio etc. are REPLACED ELEMENTS. The positioning rules for them are other than for standard elements. You can try to enclose replaced elements into a span or div.

Add <div/> inside <td/> and put <button/> into <div/> it will work properly. Add styles to new <div/> element and use:

button 
{
  height: 100%;
  width:100%;
  padding:0;
  margin:0;
}

<table><tr><td><div class="replaced-element-container"><button>hiya</button></div></td></tr></table>

Well, this is embarrassing but it meets W3C requirements.