0

For purposes that are very central to my apps purpose, I display text content in an HTML table in a UIWebView. Here is an example of what that HTML looks like:

<table width = "100%">
     <tbody>
          <tr>//Row 1
               <td>
                    <div id = "guid">
                         Here is the text of the first row, first cell in the table
                    </div>
               </td>
               <td>
                    <div id = "guid">
                         Here is the text of the first row, second cell in the row
                    </div>
               </td>
          </tr>
          <tr>//Row 2
               <td>
                    <div id = "guid">
                         Here is the text of the second row, first cell in the row
                    </div>
               </td>
               <td>
                    <div id = "guid">
                         Here is the text of the second row, second cell in the row
                    </div>
               </td>
          </tr>
     </tbody>
</table>

Again, it might not seem like I need to use a table, but it is essential to other functionality of the app - more s can be added to the same row.

I am trying to add a highlight tool to my app, and am running into some issues due to the fact that I am working with a table. Here is an example of the type of selection I am trying to make (same structure, different content):

enter image description here

Once the selection is made, it is quite easy to set a highlight to the text using execCommand. Quite easy if there is only one column of data that is. Take a look at what happens when I try and highlight the selection I made above:

enter image description here

It highlights the cell from the other column! The reason I am using a table is that I need to make sure that each block of text in the row (within the tr/td tags) starts at the same time, even though they could have varying heights, and one could be longer than the other and make the row taller as a result. This approach ensures unity at the row level.

Anybody have any ideas what I could do to fix this?

Community
  • 1
  • 1
Lizza
  • 2,769
  • 5
  • 39
  • 72
  • 1
    You could try just creating a bunch of columns using divs of a given width, then within each div 'column', using `display:block` for the rows and `display:inline-block` for the individual cells. Getting each row to start at the same time is tricky though. You'd either need to then go through the individual cells and set the height of each row to the max height (to make sure all cells of a given row have the same height) or, if you know beforehand what the height of each cell will be, you could just do something like `div.td{ height:50px; }`. Does that make sense..? – adilapapaya Feb 27 '14 at 23:53
  • Hey, you are most welcome. :) I wouldn't mind at all looking over your fiddle. The tricky part seems to be getting the vertical alignment of the text within each cell to align correctly. Here's [a fiddle](http://jsfiddle.net/X9FjL/) that I made to test things out. You can see how the text always aligns towards the top of the cells instead of in the middle (if you want it to align top though, then awesome -- headache averted!) :) – adilapapaya Feb 28 '14 at 04:25
  • 1
    Actually, use [this link](http://jsfiddle.net/X9FjL/2/). Not sure why but the other fiddle just goes to a blank page. – adilapapaya Feb 28 '14 at 04:32
  • Found this link that helps me update the height of all elements in the class on the fly using jquery: http://stackoverflow.com/a/6781074/985027 – Lizza Feb 28 '14 at 18:08
  • 1
    ah, that would do the job perfectly! (I was going to reply that yes, you'd need to update the height dynamically if you don't want to set the height beforehand but looks like you figured it out on your own) :) – adilapapaya Feb 28 '14 at 18:24

0 Answers0