CODEWITHSUNDEEP
iphonehtmlcssweb-applications
ashansky
ashansky

Reputation: 730

Unable to select text in a table cell (iPhone Mobile Safari)

I'm building a webapp that targets the iPhone. And for the most part I don't want a user to be able to select the text on the screen (ie button text, toolbars, etc), so in my css I specify the default behavior for -webkit-user-select: none;. But on certain table cells I do want the user to be able to select text, so I apply the css class below .selectable which changes the -webkit-user-select: to auto. Now this works in Chrome and Safari, but not on the iPhone. Could someone explain why and/or how to fix it?

body {
    /* Remove the iphone callout */
    -webkit-touch-callout: none;
    /* Remove the iphone link highlight */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    /* Prevent the automatic resizing of text */
    -webkit-text-size-adjust: none;
    /* Limit copy and paste to only elements we want */
    -webkit-user-select: none;
    overflow-x: hidden;
    font-family: Arial, Helvetica, sans-serif;
    font-size:13px;
    margin:0;
    padding:0;
    min-height:460px;
}

.selectable, input, textarea {
    -webkit-user-select: auto;
}

Edit: I tried removing the -webkit-user-select:none altogether, and while it does allow me to select other things, it does not allow me to select the text of a table cell, only the row as a whole. Is there anyway to get this to work as is or do I need to remove the table altogether?

Upvotes: 0

Views: 1730

Answers (2)

millenomi
millenomi

Reputation: 6589

Note that the text of the table cell is only available for selection if the zoom level is high enough for the user to pull the selection handle inside a cell without triggering the selection of other elements. This is nontrivial to avoid, and happens on all pages.

Upvotes: 1

Tom van der Woerdt
Tom van der Woerdt

Reputation: 29985

You should not be blocking --everything-- only to allow some parts later. Instead, you should block only the elements you don't want to be selectable. This will solve your issue. :-)

Upvotes: 0

Related Questions